{% extends 'core/layout/base.html' %}
{% load static %}

{% block content %}

<article class="card">

    <div>

        <div class="avatar-box">

            {% if question.user.profile.avatar %}
                <img src="{{ question.user.profile.avatar.url }}" width="80">
            {% else %}
                avatar
            {% endif %}

        </div>

        <div class="vote-box">

            <span id="question-rating-{{ question.id }}">
                {{ question.rating }}
            </span>

            {% if request.user.is_authenticated %}

                {% if not question_reaction %}

                    <button
                        class="question-like"
                        data-id="{{ question.id }}"
                    >
                        +
                    </button>

                    <button
                        class="question-dislike"
                        data-id="{{ question.id }}"
                    >
                        -
                    </button>

                {% else %}

                    <span>voted</span>

                {% endif %}

            {% endif %}

        </div>

    </div>

    <div>

        <div class="question-title">
            {{ question.title }}
        </div>

        <p>{{ question.body }}</p>

        <div class="meta">

            <span>Tags:</span>

            {% for tag in question.tags.all %}

                <a
                    class="tag"
                    href="/?tag={{ tag }}"
                >
                    {{ tag }}
                </a>

            {% endfor %}

        </div>

    </div>

</article>


{% for answer in answers %}

<article
    class="answer-card"
    id="answer-{{ answer.id }}"
>

    <div>

        <div class="avatar-box">

            {% if answer.user.profile.avatar %}
                <img src="{{ answer.user.profile.avatar.url }}" width="80">
            {% else %}
                avatar
            {% endif %}

        </div>

        <div class="vote-box">

            <span id="answer-rating-{{ answer.id }}">
                {{ answer.rating }}
            </span>

            {% if request.user.is_authenticated %}

                {% if answer.id not in answer_reactions %}

                    <button
                        class="answer-like"
                        data-id="{{ answer.id }}"
                    >
                        +
                    </button>

                    <button
                        class="answer-dislike"
                        data-id="{{ answer.id }}"
                    >
                        -
                    </button>

                {% else %}

                    <span>voted</span>

                {% endif %}

            {% endif %}

        </div>

    </div>

    <div>

        <p>{{ answer.body }}</p>

        <div class="answer-controls">

            {% if question.correct_answer_id == answer.id %}

                <span class="correct-label">
                    ✔ Correct
                </span>

            {% endif %}

        </div>

        {% if request.user == question.user %}

            <button
                class="correct-answer-btn"
                data-question="{{ question.id }}"
                data-answer="{{ answer.id }}"
            >
                Correct
            </button>

        {% endif %}

    </div>

</article>

{% endfor %}


<form method="post">

    {% csrf_token %}

    {{ form.body }}

    {{ form.body.errors }}

    <button type="submit">
        Answer
    </button>

</form>

{% endblock %}

<script>
    window.ASK_QUESTION_ID = {{ question.id }};
    window.ANSWERS_COUNT = {{ answers|length }};
</script>