{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% load l10n %}
{% load wagtailadmin_tags wagtailimages_tags static %}
{% block titletag %}{% blocktrans with title=page.get_admin_display_title %}Survey Creator{{ title }}
{% endblocktrans %}{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <link href="{% static 'wagtailsurveyjs/css/creator.css' %}" type="text/css" rel="stylesheet">
    <style>
        .content {
            padding: 0 !important;
        }

        .svc-notifier {
            bottom: 80px;
        }

    </style>
{% endblock %}

{% block content %}
    <div id="surveyContainer" style="height: 100vh"></div>



    <footer class="footer w-grid md:w-grid-flow-col">
        <nav class="actions actions--primary footer__container" aria-label="Actions">
            <div class="w-dropdown-button">
                <a href="{% if explore_url %}{{ explore_url }}{% else %}
                     {% url 'wagtailadmin_pages:edit' survey.pk %}{% endif %}"
                   class="button action-save button-longrunning" data-controller="w-progress"
                   data-action="w-progress#activate" data-w-progress-active-value="Finishing up…">
                    <svg class="icon icon-spinner icon" aria-hidden="true">
                        <use href="#icon-spinner"></use>
                    </svg>
                    <em data-w-progress-target="label">
                        {% trans 'Done' %}
                    </em>
                </a>
            </div>
        </nav>
    </footer>

{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script src="{% static 'wagtailsurveyjs/js/creator.js' %}"></script>
    <script>

        $(function () {
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            const csrfToken = getCookie('csrftoken');

            const surveyId = '{{ survey.id }}';
            const surveyName = '{{ survey.title }}';
            const surveyUpdateUrl = '{{ survey.survey_creator_update_url }}';
            const surveyJsonStr = '{{ survey.json|escapejs }}'
            let settings = JSON.parse('{{ settings|escapejs }}')
            const {has_license} = settings


            let surveyJson = {}

            if (surveyJsonStr) {
                surveyJson = JSON.parse(surveyJsonStr);
            }

            const options = {
                json: surveyJson,
                name: surveyName,
                id: surveyId,
                autoSaveApiEndpoint: surveyUpdateUrl,
                hasLicense: has_license,
                csrfToken: csrfToken,
                creatorOptions: {
                    showSurveyTitle: false
                }
            }

            SurveyJSDjango.edit("surveyContainer", options);
        })
    </script>
{% endblock %}