{% 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>

                <a href="{% url 'djf_surveys:create' survey.slug %}" class="inline-block px-5 py-3 mt-4 font-medium text-white bg-blue-500 rounded-lg sm:m-0">
                    Add Survey
                </a>
            </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 %}