{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
    <!-- 사용자오류 표시 -->
    {% if messages %}
    <div class="alert alert-danger my-3" role="alert">
    {% for message in messages %}
        <strong>{{ message.tags }}</strong>
        <ul><li>{{ message.message }}</li></ul>
    {% endfor %}
    </div>
    {% endif %}
    <h2 class="border-bottom py-2">{{ question.subject }}</h2><div class="row my-3">
        <div class="col-1"> <!-- 추천영역 -->
            <div class="bg-light text-center p-3 border font-weight-bolder mb-1">{{question.voter.count}}</div>
            <a href="#" data-uri="{% url 'pybo:vote_question' question.id  %}"
               class="recommend btn btn-sm btn-secondary btn-block my-1">추천</a>
        </div>
        <div class="col-11"> <!-- 질문영역 -->
            <!-- 기존내용 -->
            <div class="card">
                <div class="card-body">
                    <div class="card-text" style="white-space: pre-line;">{{ question.content }}</div>
                    <div class="d-flex justify-content-end">
                        {% if question.modify_date %}
                        <div class="badge badge-light p-2 text-left mx-3">
                            <div class="mb-2">modified at</div>
                            <div>{{ question.modify_date }}</div>
                        </div>
                        {% endif %}
                        <div class="badge badge-light p-2 text-left">
                            <div class="mb-2">{{ question.author.username }}</div>
                            <div>{{ question.create_date }}</div>
                        </div>
                    </div>
                    {% if request.user == question.author %}
                    <div class="my-3">
                        <a href="{% url 'pybo:question_modify' question.id  %}"
                           class="btn btn-sm btn-outline-secondary">수정</a>
                        <a href="#" class="delete btn btn-sm btn-outline-secondary"
                            data-uri="{% url 'pybo:question_delete' question.id  %}">삭제</a>
                    </div>
                    {% endif %}
                     <!-- 질문 댓글 Start -->
                    {% if question.comment_set.count > 0 %}
                    <div class="mt-3">
                    {% for comment in question.comment_set.all %}  <!-- 등록한 댓글을 출력 -->
                        <a name="comment_{{ comment.id }}"></a>
                        <div class="comment py-2 text-muted">  <!-- 댓글 각각에 comment 스타일 지정 -->
                            <span style="white-space: pre-line;">{{ comment.content }}</span>
                            <span>
                                - {{ comment.author }}, {{ comment.create_date }}
                                {% if comment.modify_date %}
                                (수정:{{ comment.modify_date }})
                                {% endif %}
                            </span>
                            {% if request.user == comment.author %}
                            <a href="{% url 'pybo:comment_modify_question' comment.id  %}" class="small">수정</a>,
                            <a href="#" class="small delete"
                               data-uri="{% url 'pybo:comment_delete_question' comment.id  %}">삭제</a>
                            {% endif %}
                        </div>
                    {% endfor %}
                    </div>
                    {% endif %}
                    <div>
                        <a href="{% url 'pybo:comment_create_question' question.id  %}"
                           class="small"><small>댓글 추가 ..</small></a>  <!-- 댓글 추가 링크 -->
                    </div>
                    <!-- 질문 댓글 End -->
                </div>
            </div>
        </div>
    </div>
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in question.answer_set.all %}
        <a name="answer_{{ answer.id }}"></a>
        <div class="row my-3">
            <div class="col-1">  <!-- 추천영역 -->
                <div class="bg-light text-center p-3 border font-weight-bolder mb-1">{{answer.voter.count}}</div>
                <a href="#" data-uri="{% url 'pybo:vote_answer' answer.id  %}"
                    class="recommend btn btn-sm btn-secondary btn-block my-1">추천</a>
            </div>
            <div class="col-11">  <!-- 답변영역 -->
                <!-- 기존내용 -->
                <div class="card">
                    <div class="card-body">
                        <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
                        <div class="d-flex justify-content-end">
                            {% if answer.modify_date %}
                            <div class="badge badge-light p-2 text-left mx-3">
                                <div class="mb-2">modified at</div>
                                <div>{{ answer.modify_date }}</div>
                            </div>
                            {% endif %}
                            <div class="badge badge-light p-2 text-left">
                                <div class="mb-2">{{ answer.author.username }}</div>
                                <div>{{ answer.create_date }}</div>
                            </div>
                        </div>
                        {% if request.user == answer.author %}
                        <div class="my-3">
                            <a href="{% url 'pybo:answer_modify' answer.id  %}"
                               class="btn btn-sm btn-outline-secondary">수정</a>
                            <a href="#" class="delete btn btn-sm btn-outline-secondary "
                               data-uri="{% url 'pybo:answer_delete' answer.id  %}">삭제</a>
                        </div>
                        {% endif %}
                        {% if answer.comment_set.count > 0 %}
                        <div class="mt-3">
                        {% for comment in answer.comment_set.all %}
                            <a name="comment_{{ comment.id }}"></a>
                            <div class="comment py-2 text-muted">
                                <span style="white-space: pre-line;">{{ comment.content }}</span>
                                <span>
                                    - {{ comment.author }}, {{ comment.create_date }}
                                    {% if comment.modify_date %}
                                    (수정:{{ comment.modify_date }})
                                    {% endif %}
                                </span>
                                {% if request.user == comment.author %}
                                <a href="{% url 'pybo:comment_modify_answer' comment.id  %}" class="small">수정</a>,
                                <a href="#" class="small delete"
                                   data-uri="{% url 'pybo:comment_delete_answer' comment.id  %}">삭제</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endif %}
            <div>
                <a href="{% url 'pybo:comment_create_answer' answer.id  %}"
                   class="small"><small>댓글 추가 ..</small></a>
            </div>

        </div>
    </div>
    {% endfor %}
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        {% if form.errors %}
        <div class="alert alert-danger" role="alert">
        {% for field in form %}
            {% if field.errors %}
            <strong>{{ field.label }}</strong>
            {{ field.errors }}
            {% endif %}
        {% endfor %}
        </div>
        {% endif %}
        <div class="form-group">
            <textarea {% if not user.is_authenticated %}disabled{% endif %}
              name="content" id="content" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="답변등록" class="btn btn-primary">
    </form>
</div>

{% endblock %}
{% block script %}
<script type='text/javascript'>
$(document).ready(function(){
    $(".delete").on('click', function() {
        if(confirm("정말로 삭제하시겠습니까?")) {
            location.href = $(this).data('uri');
        }
    });
    $(".recommend").on('click', function() {
        if(confirm("정말로 추천하시겠습니까?")) {
            location.href = $(this).data('uri');
        }
    });
});
</script>
{% endblock %}