{% extends get_master_template %}
{% load static %}

{% block extra_css %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
    <style>
        .rating__star {
            cursor: pointer;
        }

        .rating_active {
            width: 50px;
            height: 50px;
            background-size: contain;
            background-image: url("{% static 'djf_surveys/images/star-fill.png' %}");
        }

        .rating_inactive {
            width: 50px;
            height: 50px;
            background-size: contain;
            background-image: url("{% static 'djf_surveys/images/star-border.png' %}");
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container px-5 py-5">
        <section>
            <div class="py-16 lg:items-end lg:justify-between lg:flex sm:px-6 lg:px-8">
                <h2 class="max-w-xl text-2xl font-bold sm:text-3xl">
                    Result - {{ object.name }}
                </h2>

                <div class="btn-group">
                    <div class="flex -space-x-4 hover:space-x-1 float-right">
                        {% if user.is_superuser %}
                            <a href="{% url 'djf_surveys:admin_download_survey' survey.slug %}" class="z-20 block p-4 text-purple-700 transition-all bg-purple-100 border-2 border-white rounded-full active:bg-purple-50 hover:scale-110 focus:outline-none focus:ring"
                                    type="button">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                      </svg>
                            </a>

                            <a href="{% url 'djf_surveys:admin_summary_survey' survey.slug %}" class="z-20 block p-4 text-blue-700 transition-all bg-blue-100 border-2 border-white rounded-full active:bg-blue-50 hover:scale-110 focus:outline-none focus:ring"
                                    type="button">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
                                    </svg>
                            </a>
                        {% endif %}
                        <a href="{% url 'djf_surveys:create' survey.slug %}" class="z-20 block p-4 text-green-700 transition-all bg-green-100 border-2 border-white rounded-full active:bg-green-50 hover:scale-110 focus:outline-none focus:ring"
                                type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                    </svg>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        {% if page_obj %}
            <div class="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {% for object in page_obj %}
                    {% include 'djf_surveys/components/card_list_answer.html' %}
                {% endfor %}
            </div>
            <div class="py-10">
                {% include 'djf_surveys/components/pagination.html' %}
            </div>
        {% else %}
            {% include 'djf_surveys/components/empty_state.html' %}
        {% endif %}
    </div>

    {% include 'djf_surveys/components/modal_delete.html' %}

{% endblock %}

{% block extra_js %}
    <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
    {% include 'djf_surveys/components/modal_delete_js.html' %}
{% endblock %}