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

<form id="form-comment-create" method="post" action="{% url 'comment:create' %}">{% csrf_token %}

    {# render info inputs #}
    {% include 'comment/comment/object_info.html' with object_info=object_info settings=settings %}

    {# main form #}
    <div class="block rounded-lg bg-textarea-bg-light dark:bg-textarea-bg-dark p-4">
        {% if request.user.is_authenticated %}
            <textarea name="content" id="id_content" rows="5" placeholder="{% trans 'Write Something...' %}" spellcheck="false" class="mb-4 box-border block min-h-[124px] w-full resize-y bg-transparent px-2 text-base outline-0 text-textarea-text-light dark:text-textarea-text-dark selection:bg-textarea-text-selection-light dark:selection:bg-text-selection-dark placeholder:text-textarea-text-placeholder-light dark:placeholder:text-textarea-text-placeholder-dark {% if LANGUAGE_CODE == 'fa-ir' %}font-default-fd{% else %}font-default{% endif %}"></textarea>

            <div class="flex justify-end">
                {#ALLOW_SPOILER#}
                {% if settings.allow_spoiler %}
                    <label class="ltr:mr-4 rtl:ml-4 grid content-center">
                        <input type="checkbox" name="is_spoiler" id="id_is_spoiler" class="peer sr-only"/>
                        {#ICON EYE#}
                        <span class="block cursor-pointer peer-checked:hidden">{% include 'comment/icons/icon_eye.html' with class='inline-block w-8 fill-none stroke-icon-spoiler-light dark:stroke-icon-spoiler-dark' %}</span>
                        {#ICON EYE OFF#}
                        <span class="hidden cursor-pointer peer-checked:block">{% include 'comment/icons/icon_eye_off.html' with class='inline-block w-8 fill-icon-spoiler-light dark:fill-icon-spoiler-dark' %}</span>
                    </label>
                {% endif %}
                <button type="button" onclick="CreateComment('form-comment-create','{{ settings.status_check }}')" class="rounded-lg border-none bg-btn-send-bg-light dark:bg-btn-send-bg-dark py-2 px-6 text-xl text-btn-send-text-light dark:text-btn-send-text-dark dark:font-semibold outline-0 shadow-md">{% trans 'Send' context 'form-button' %}</button>
            </div>
        {% else %}
            <div><a href="{% get_settings 'LOGIN_URL' %}" class="font-bold text-btn-login-text-light dark:text-btn-login-text-dark">{% trans 'Login to comment' context 'login-required' %}</a></div>
        {% endif %}
    </div>

</form>