{% load i18n %}
{% load static %}
{% load comment_tags %}

<input type="checkbox" class="peer sr-only" id="toggle-spoiler-{{ comment.urlhash }}">
<div class="flex justify-between">

    {#COMMENT INFO#}
    <div class="h-12 flex items-center">
        {% get_profile_image comment.user as profile_image %}
        {% if profile_image %}
            <img src="{{ profile_image }}" alt="Profile" class="inline-block w-12 h-12 rounded-full"/>
        {% endif %}
        <span class="inline-block align-middle ltr:ml-2 rtl:mr-2 text-lg font-semibold text-comment-name-text-light dark:text-comment-name-text-dark"><span dir="ltr">{{ comment.user.username }}</span></span>
        <span class="mx-1 text-comment-time-text-light dark:text-comment-time-text-dark">•</span>
        <span class="text-sm text-comment-time-text-light dark:text-comment-time-text-dark">
            {% if settings.time_type == 1 and comment.posted|is_time_lt_days:settings.time_days %}
                {{ comment.posted|timesince }} {% trans 'ago' %}
            {% elif settings.time_type == 1 and not comment.posted|is_time_lt_days:settings.time_days %}
                {{ comment.posted|date:'SHORT_DATE_FORMAT' }} {{ comment.posted|time:'TIME_FORMAT' }}
            {% elif settings.time_type == 2 %}
                {{ comment.posted|timesince }} {% trans 'ago' %}
            {% elif settings.time_type == 3 %}
                {{ comment.posted|date:'SHORT_DATE_FORMAT' }} {{ comment.posted|time:'TIME_FORMAT' }}
            {% endif %}
        </span>
        <span class="ltr:ml-2 rtl:mr-2 rtl:scale-x-[-1]">
            {% if comment.is_updated %}
                {% include 'icons/icon_pen.html' with class='inline w-3 h-3 fill-icon-pin-light dark:fill-icon-pin-dark' %}
            {% endif %}
        </span>
        <span class="ltr:ml-2 rtl:mr-2 rtl:scale-x-[-1]">
            {% if comment.is_pinned %}
                {% include 'icons/icon_pin.html' with class='inline w-3 h-3 fill-icon-pin-light dark:fill-icon-pin-dark' %}
            {% endif %}
        </span>
    </div>

    {#COMMENT OPTIONS#}
    <div class="grid content-center ltr:mr-1 rtl:ml-1">
        {% if request.user.is_authenticated and comment.user == request.user %}
            {% if comment.is_spoiler or settings.allow_edit or settings.allow_delete %}
                <div class="group flex flex-row-reverse space-x-3 ltr:space-x-reverse rounded-full bg-comment-option-bg-light dark:bg-comment-option-bg-dark p-2 border-2 border-comment-option-border-light dark:border-comment-option-border-dark">
                    {% include 'icons/icon_dots.html' with class='inline w-6 h-6 fill-icon-dots-light dark:fill-icon-dots-dark' %}
                    {% if settings.allow_edit %}
                        <label for="toggle-edit-{{ comment.urlhash }}" class="hidden group-hover:inline">{% include 'icons/icon_edit.html' with class='w-6 h-6 cursor-pointer fill-icon-edit-light dark:fill-icon-edit-dark' %}</label>
                    {% endif %}
                    {% if settings.allow_delete %}
                        <span onclick="LoadDeleteCommentForm('{{ comment.urlhash }}')" class="hidden group-hover:inline">{% include 'icons/icon_delete.html' with class='w-6 h-6 cursor-pointer fill-icon-delete-light dark:fill-icon-delete-dark' %}</span>
                    {% endif %}
                    {% if comment.is_spoiler %}
                        {% include 'icons/icon_eye_off.html' with class='hidden w-6 h-6 fill-none fill-icon-spoiler-option-light dark:fill-icon-spoiler-option-dark group-hover:inline' %}
                    {% endif %}
                </div>
            {% endif %}
        {% elif comment.is_spoiler %}
            <label for="toggle-spoiler-{{ comment.urlhash }}" class="rounded-full p-2 cursor-pointer border-2 bg-comment-option-bg-light dark:bg-comment-option-bg-dark border-comment-option-border-light dark:border-comment-option-border-dark">
                {% include 'icons/icon_eye.html' with class='inline w-6 h-6 fill-none stroke-icon-spoiler-light dark:stroke-icon-spoiler-dark' %}
            </label>
        {% endif %}
    </div>
</div>

{#COMMENT SECTION#}
<div class="mt-2 {% if comment.is_spoiler and not comment.user == request.user %}hidden peer-checked:block{% endif %}">
    {#COMMENT CONTENT#}
    {% if settings.allow_edit %}<input type="checkbox" class="peer sr-only" id="toggle-edit-{{ comment.urlhash }}">{% endif %}
    <div class="p-2 text-justify block peer-checked:hidden">
        {#CONTENT#}
        {% if comment.content|wordcount > settings.content_words_count %}
            <input type="checkbox" class="peer sr-only" id="toggle-more-{{ comment.urlhash }}">
            <div class="whitespace-pre-wrap dark:text-white inline-block peer-checked:hidden {% if LANGUAGE_CODE == 'fa-ir' %}font-default-fd{% else %}font-default{% endif %}">{{ comment.content|truncatewords:settings.content_words_count }}</div>
            <div class="whitespace-pre-wrap dark:text-white hidden peer-checked:block {% if LANGUAGE_CODE == 'fa-ir' %}font-default-fd{% else %}font-default{% endif %}">{{ comment.content }}</div>
            <label for="toggle-more-{{ comment.urlhash }}" class="inline peer-checked:hidden cursor-pointer text-comment-read-more-light dark:text-comment-read-more-dark">{% trans 'Read More' %} {% include 'icons/icon_down.html' with class='w-6 inline-block' %}</label>
            <label for="toggle-more-{{ comment.urlhash }}" class="hidden peer-checked:block cursor-pointer text-comment-read-more-light dark:text-comment-read-more-dark">{% trans 'Read Less' %} {% include 'icons/icon_up.html' with class='w-6 inline-block' %}</label>
        {% else %}
            <div class="whitespace-pre-wrap dark:text-white {% if LANGUAGE_CODE == 'fa-ir' %}font-default-fd{% else %}font-default{% endif %}">{{ comment.content }}</div>
        {% endif %}
    </div>
    <div class="text-justify hidden peer-checked:block">
        {% if request.user.is_authenticated and comment.user == request.user and settings.allow_edit %}
            {% include 'forms/comment_form_edit.html' with comment=comment settings=settings %}
        {% endif %}
    </div>

    <div class="mt-2 flex justify-between">

        {#COMMENT REACTION#}
        <div class="flex space-x-2">
            {% if settings.allow_reaction %}
                <form id="form-comment-react-{{ comment.urlhash }}" method="post" action="{% url 'comment:react' %}">{% csrf_token %}
                    <div id="comment-react-list">
                        {% include 'comment/comment_reactions.html' %}
                    </div>
                </form>
            {% endif %}
        </div>

        {#COMMENT REPLY#}
        {% if settings.allow_reply and comment.is_parent %}
            {% with count_children=comment.children.filter_accepted.count %}
                <label for="toggle-reply-{{ comment.urlhash }}" class="grid self-center">
                <span class="cursor-pointer text-reply-text-light dark:text-reply-text-dark px-1">
                    {% if count_children > 1 %}
                        {{ count_children|number }} {% trans 'Replies' context 'reply-count' %}
                    {% elif count_children == 1 %}
                        {{ count_children }} {% trans 'Reply' context 'reply-count' %}
                    {% else %}
                        {% trans 'Reply' context 'verb' %}
                    {% endif %}
                </span>
                </label>
            {% endwith %}
        {% endif %}
    </div>
</div>