{% load hrtags %}
{% load evelinks %}
{% load l10n %}

<div class="card-header">
    <div class="card-title">Comments</div>
</div>
<div class="card-body">
    {% if perms.hrapps.create_comment %}
        <form class="mb-2" action="{% if admin %}{% url "hradmin:create_comment" application.id %}{% else %}{% url "hrapps:create_comment" application.id %}{% endif %}" method="POST"
            style="display: flow-root;">
            <label for="comment">Comment</label>
            <textarea class="form-control" rows="3" placeholder="Comment..." id="comment" name="comment"></textarea>
            <div class="float-start">
                <input class="form-check-input" type="checkbox" id="private" name="private"/>
                <label for="private">Private</label>
            </div>
            {% csrf_token %}
            <button class="btn btn-md btn-primary float-end mt-1" type="submit">Post</button>
        </form>
    {% endif %}
    {% if root_comments %}
        {% for comment in root_comments %}
            <div class="card mb-3">
                <div class="card-header justigy-content-between d-flex align-items-center" style="flex-grow: 1;">
                    <div class="d-flex align-items-center" style="flex: 1;">
                        <img src="{{ comment.user.profile.main_character.character_id|character_portrait_url:32 }}"
                         style="border-radius: 100%;">
                        &nbsp;{{ comment.user.profile.main_character }}
                    </div>
                    {% if comment.private %}
                    <div class="text-center text-warning" style="flex: 1;">
                        <i>Private Thread</i>
                    </div>
                    {% endif %}
                    <div class="text-end" style="flex: 1;">
                        <small class="text-muted">
                            <i class="local-time" data-utctime="{{ comment.created.isoformat }}">
                                {{ comment.created.isoformat }}
                            </i>
                        </small>
                    </div>
                </div>
                <div class="card-body">
                    <p>{{ comment.content }}</p>
                </div>
                <ul class="list-group list-group-flush">
                    {% if replies|get_item:comment.id %}
                        {% for reply in replies|get_item:comment.id %}
                            <li class="list-group-item" style="padding: 0 !important;">
                                <ul class="list-group list-group-flush list-group-horizontal">
                                    <li class="list-group-item item-left" style="display: inline-flex; padding-left: 4px;">
                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="20px" class="reply-svg" style="transform: scale(-1,-1)">
                                                <path d="M773.33-200v-157.33q0-56.67-37.66-94.34-37.67-37.66-94.34-37.66h-393L405-332.67l-47.67 47.34L120-522.67 357.33-760 405-712.67 248.33-556h393q84.34 0 141.5 57.17Q840-441.67 840-357.33V-200h-66.67Z"></path>
                                            </svg>
                                        </div>
                                        <div>
                                            <img
                                                src="{{ reply.user.profile.main_character.character_id|character_portrait_url:32 }}"
                                                style="border-radius: 100%">
                                            &nbsp;{{ comment.user.profile.main_character }}
                                            <br>
                                            <small class="text-muted" ><i class="local-time" data-utctime="{{ reply.created.isoformat }}">{{ reply.created.isoformat }}</i></small>
                                        </div>
                                    </li>
                                    <li class="list-group-item">{{ reply.content }}</li>
                                </ul>
                            </li>
                        {% endfor %}
                    {% endif %}
                    <li class="list-group-item p-0">
                        <div class="accordion accordion-flush" id="accordionReplyWrapper{{ comment.id }}">
                            <div class="accordion-item border-0">
                                <h2 class="accordion-header" id="headingReply{{ comment.id }}">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseReply{{ comment.id }}" aria-expanded="false" aria-controls="collapseReply{{ comment.id }}">
                                        Leave a Reply
                                    </button>
                                </h2>
                                <div id="collapseReply{{ comment.id }}" class="accordion-collapse collapse" aria-labelledby="headingReply{{ comment.id }}" data-bs-parent="#accordionReplyWrapper{{ comment.id }}">
                                    <div class="accordion-body">
                                        <form action="{% if admin %}{% url "hradmin:create_reply" application.id comment.id %}{% else %}{% url "hrapps:create_reply" application.id comment.id %}{% endif %}" method="POST">
                                            <label for="reply_{{ comment.id }}" class="form-label d-none">Comment</label>
                                            <textarea class="form-control" rows="3" placeholder="Reply..." id="reply_{{ comment.id }}" name="reply"></textarea>
                                            {% csrf_token %}
                                            <div class="clearfix mt-2">
                                                <button class="btn btn-md btn-primary float-end" type="submit">Reply</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        {% endfor %}
    {% endif %}
</div>