{% load static %}
{% load jalali_tags %}
{% load humanize %}
<div id="comment-{{ comment.id }}" class="rounded-[16px] border-[1px] border-white p-6 flex flex-col gap-4 items-start justify-start {% if comment.is_admin %}gradient-box{% endif %} transition">
    <div class="flex flex-row items-center justify-start gap-4">
        <img src="{% static 'images/product.png' %}" class="w-12 h-12 rounded-full">
        <div class="flex flex-col">
            <div class="flex flex-row items-center justify-start gap-4">
                <p class="text-white font-semibold text-xl">{{ comment.name }}</p>
                <p class="text-text2 font-semibold text-xs">{{ comment.created_at|date:"Y/m/d-H:i" }}</p>
            </div>
            {% if comment.parent %}
                <a href="#comment-{{ comment.parent.id }}" class="text-sm text-white reply-to" data-target="comment-{{ comment.parent.id }}">
                    در پاسخ به {{ comment.parent.name }}
                </a>
            {% endif %}
        </div>
    </div>
    <p class="text-white text-justify text-base font-medium font-iranyekan">{{ comment.content }}</p>
    <div class="flex flex-row justify-between items-center w-full">
        <a href="" class="rounded-lg flex items-center justify-center gap-2 bg-white w-40 h-12 group hover:bg-yellow1 transition-all duration-300 hover:bg-theme-blink-shadow">
            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 7.5H10C12.0625 7.5 13.8125 8.90625 14.3125 10.8125C14.4375 10.4375 14.5 10 14.5 9.5C14.5 7.3125 12.6875 5.5 10.5 5.5H7H6.25C5.8125 5.5 5.5 5.1875 5.5 4.75V4V3.125L1.71875 6.5L5.5 9.90625V9V8.25C5.5 7.84375 5.8125 7.5 6.25 7.5H7ZM7 9V10.5V11C7 11.4062 6.75 11.7812 6.40625 11.9375C6.03125 12.0938 5.625 12.0312 5.3125 11.75L0.3125 7.25C0.09375 7.0625 0 6.8125 0 6.5C0 6.21875 0.09375 5.96875 0.3125 5.78125L5.3125 1.28125C5.625 1 6.03125 0.9375 6.40625 1.09375C6.75 1.25 7 1.625 7 2V2.5V4H8.5H10.5C13.5312 4 16 6.46875 16 9.5C16 11.9375 14.7812 13.4688 13.8438 14.2812C13.7188 14.375 13.5938 14.4688 13.4688 14.5625C13.375 14.625 13.2812 14.6875 13.1875 14.75C13.0625 14.8438 12.9375 14.9062 12.8438 14.9688C12.7812 15 12.6875 15 12.5938 15C12.25 15 12 14.75 12 14.4062C12 14.1875 12.0938 14 12.25 13.8438C12.25 13.8125 12.2812 13.8125 12.2812 13.7812C12.375 13.7188 12.4375 13.625 12.5312 13.5312C12.5938 13.4375 12.625 13.375 12.6875 13.2812C12.8438 12.9688 13 12.5625 13 12.0312C13 10.375 11.6562 9.03125 10 9.03125H8.5H7V9Z" fill="#001D3E"/>
            </svg>
            <span class="text-blue1 font-bold group-hover:text-white pt-1">پاسخ دادن</span>
        </a>
        <div class="flex flex-row justify-end items-center gap-2">
            <p class="font-semibold text-text2 text-xs pl-2">آیا این دیدگاه از نظر شما مفید بود؟</p>
            <span class="text-white font-semibold text-base">{{ comment.like|default:"0" }}</span>
            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.78125 14C8.96875 14.1562 8.1875 13.625 8 12.8125L7.9375 12.4375C7.75 11.4062 7.15625 10.4688 6.34375 9.8125L6.125 9.625C5.40625 9.0625 5 8.21875 5 7.28125V6.5V5V3.8125C5 2.8125 5.5 1.875 6.3125 1.3125L7.53125 0.53125C8.03125 0.1875 8.59375 0 9.1875 0H12.25C13.0625 0 13.75 0.6875 13.75 1.5C13.75 1.625 13.7188 1.75 13.6875 1.84375C14.3125 2.03125 14.75 2.59375 14.75 3.25C14.75 3.5625 14.6562 3.8125 14.5312 4.03125C15.2188 4.1875 15.75 4.78125 15.75 5.5C15.75 6 15.5312 6.40625 15.1875 6.6875C15.6562 6.9375 16 7.4375 16 8C16 8.84375 15.3125 9.5 14.5 9.5H10C10.4062 10.25 10.7188 11.0312 10.875 11.875L10.9688 12.2188C11.125 13.0312 10.5938 13.8125 9.78125 14ZM1 11C0.4375 11 0 10.5625 0 10V3C0 2.46875 0.4375 2 1 2H3C3.53125 2 4 2.46875 4 3V10C4 10.5625 3.53125 11 3 11H1Z" fill="white"/>
            </svg>
            <span class="text-white font-semibold text-base pr-3">{{ comment.dislike|default:"0" }}</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.0938 1.09375C11.3125 1.4375 12 2.6875 11.6562 3.875L11.4688 4.5C11.375 4.84375 11.25 5.1875 11.0938 5.5H14C15.0938 5.5 16 6.40625 16 7.5C16 8.0625 15.75 8.5625 15.4062 8.9375C15.4688 9.125 15.5 9.3125 15.5 9.53125C15.5 10.1562 15.1875 10.75 14.6875 11.125C14.7188 11.25 14.75 11.375 14.75 11.5312C14.75 12.1562 14.4375 12.7188 14 13.0938C13.9375 14.1562 13.0625 15.0312 12 15.0312H8.9375C8.25 15.0312 7.5625 14.8125 7 14.4375L5.0625 13.1562C4.71875 12.9062 4.625 12.4688 4.875 12.0938C5.09375 11.75 5.5625 11.6562 5.90625 11.9062L7.84375 13.1875C8.15625 13.4062 8.53125 13.5312 8.9375 13.5312H12C12.25 13.5312 12.5 13.2812 12.5 13.0312C12.5 12.9688 12.4688 12.9375 12.4688 12.875C12.375 12.5 12.5625 12.125 12.9062 11.9688C13.0938 11.9062 13.25 11.7188 13.25 11.5312C13.25 11.4062 13.1875 11.2812 13.125 11.2188C12.9688 11 12.9375 10.7188 13.0312 10.4688C13.0938 10.2188 13.3125 10.0625 13.5938 10C13.8125 9.96875 14 9.75 14 9.5C14 9.375 13.9375 9.28125 13.875 9.1875C13.6875 9 13.625 8.75 13.6875 8.5C13.75 8.25 13.9375 8.0625 14.1562 7.96875C14.3438 7.90625 14.5 7.71875 14.5 7.5C14.5 7.25 14.25 7 14 7H9.8125C9.53125 7 9.28125 6.84375 9.15625 6.59375C9.03125 6.34375 9.03125 6.0625 9.1875 5.84375C9.5625 5.3125 9.84375 4.71875 10.0312 4.09375L10.2188 3.46875C10.3125 3.0625 10.0938 2.65625 9.6875 2.53125C9.28125 2.4375 8.875 2.65625 8.75 3.0625L8.59375 3.6875C8.40625 4.3125 8.09375 4.875 7.65625 5.375L6.03125 7.125C5.75 7.4375 5.28125 7.46875 4.96875 7.1875C4.6875 6.90625 4.65625 6.4375 4.9375 6.125L6.53125 4.375C6.8125 4.0625 7.03125 3.6875 7.15625 3.28125L7.3125 2.65625C7.65625 1.4375 8.90625 0.75 10.0938 1.09375ZM1 6H3C3.53125 6 4 6.46875 4 7V14C4 14.5625 3.53125 15 3 15H1C0.4375 15 0 14.5625 0 14V7C0 6.46875 0.4375 6 1 6Z" fill="white"/>
            </svg>
        </div>
    </div>
</div>
{% if comment.replies.all %}
    <div class="pl-4 mt-4 flex flex-col gap-4">
        {% for child in comment.replies.all %}
            {% include "f_blog/comment_item.html" with comment=child %}
        {% endfor %}
    </div>
{% endif %}