{% extends "layouts/base.html" %}

{% block title %} {{ judul }} {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
<div class="content">
    <div class="page-inner">
        <div class="page-header">
            <h4 class="page-title">Informasi</h4>
            <ul class="breadcrumbs">
                <li class="nav-home">
                    <a href="/home">
                        <i class="flaticon-home"></i>
                    </a>
                </li>
                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>
                <li class="nav-item">
                    <a href="faq">Informasi</a>
                </li>
                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>
                <li class="nav-item">
                    <a href="#">Pilih Topik</a>
                </li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="background-color:#0077ff">
                        <h4 class="card-title"><b><a style="color:white;"
                                    href="{% url 'faq:category_detail' category.slug %}">{{category.name}}</a></b></h4>
                    </div>
                    <div class="card-body">
                        <!---Content-->
                        {% for question in category.question_set.all %}
                        <h3>
                            <p "{% url 'faq:question_detail' category.slug question.slug %}">{{question.question}}</p>
                        </h3>
                        <ul>
                            {% for answer in question.answer_set.all %}
                            <li><b>{{answer.answer}}</b>
                                {% if can_vote_answer %}
                                | found this answer helpful?
                                <form style="display: inline;"
                                    action="{% if category_enabled %}{% url 'faq:vote_answer' question.category.slug question.slug answer.slug %}{% else %}{% url 'faq:vote_answer' question.slug answer.slug %}{% endif %}"
                                    method="post">
                                    {% csrf_token %}
                                    <input type="hidden" value=True name="vote">
                                    <button type="submit">yes({{answer.helpful}})</button>
                                </form>
                                <form style="display: inline;"
                                    action="{% if category_enabled %}{% url 'faq:vote_answer' question.category.slug question.slug answer.slug %}{% else %}{% url 'faq:vote_answer' question.slug answer.slug %}{% endif %}"
                                    method="post">
                                    {% csrf_token %}
                                    <input type="hidden" value=False name="vote">
                                    <button type="submit">no({{answer.not_helpful}})</button>
                                </form>
                                {% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                        {% endfor %}
                        <hr>
                        <a href="{% url 'faq:index_view' %}">back</a>
                        {% if can_add_question %}
                        <a href="{% url 'faq:add_question' category.slug %}">add question</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

{% endblock javascripts %}