{% extends "Includes/layout.html.twig" %}

{% block body %}
<main class="row main mx-0" id="vue_app_form_id" v-cloak>
    <section class="content-area fade-in">
        <div class="row mb-3" style="overflow: hidden; max-height: 85vh">
            <div class="col-6" style="height: 100vh">

                <div class="pb-3 container-fluid rounded-2 px-0 page-header">

                    <div class="border-bottom position-relative d-flex align-items-center nav nav-tabs">
                        <a :class="[activePanel === 'globalEdit' ? 'active' : '', 'btn-tab nav-link']"
                           id="globalEditTab" @click="switchPanel('globalEdit', 'panel')" href="#globalEdit">
                            {{ 'Global settings'|trans }}
                        </a>
                        <a :class="[activePanel === 'styleEdit' ? 'active' : '', 'btn-tab nav-link']"
                           id="styleEditTab" @click="switchPanel('styleEdit', 'panel')" href="#styleEdit">
                            {{ 'Style'|trans }}
                        </a>
                        <a :class="[activePanel === 'questionEdit' ? 'active' : '', 'btn-tab nav-link']"
                           id="questionEditTab" @click="switchPanel('questionEdit', 'panel')" href="#questionEdit">
                            {{ 'Question'|trans }}
                        </a>
                        <button type="button" class="button slider-icon bg-transparent"
                                :data-tippy-content="Translator.trans('Show history')"
                                data-tippy-placement="right"
                                @click="showCustomHistory({{ advertiser.id }}, '{{ advertiser.name|e('js')|raw }}')">
                            <i class="fal fa-history"></i>
                        </button>
                        <div class="my-auto ml-auto d-flex align-items-center">
                            <form-input id="form-active"
                                        v-model="jsonDafInstance.active"
                                        label="{{ 'Form'|trans }}"
                                        info-tooltip-content="{{ 'If the form is not enabled, it will automatically be as redirect mode'|trans }}"
                                        :no-border="true"
                                        :no-label="true"
                                        type="checkbox"></form-input>

                            <button-multiple :content-position="'right'" class="ml-3">
                                <template v-slot:main-btn>
                                    <button type="button" class="btn btn-primary cursor-pointer rounded-30 px-4"
                                            :disabled="isLoading" @click="triggerSave(null, false)">
                                        {{ 'Save'|trans }}
                                    </button>
                                </template>
                                {% if is_granted('ROLE_BACKEND') %}
                                    <template v-slot:extra-btn>
                                        <button type="button" class="btn btn-primary cursor-pointer rounded-30 px-4"
                                                :disabled="isLoading" @click="openModalComment">{{ 'Save with a comment'|trans }}
                                        </button>
                                    </template>
                                {% endif %}
                            </button-multiple>

{#                            <button v-show="activePanel === 'globalEdit'" class="btn btn-primary text-white rounded-30 px-4 py-2" :disabled="isLoading" @click="saveSettings('global')">#}
{#                                {{ 'Save'|trans }}#}
{#                            </button>#}

{#                            <button v-show="activePanel === 'styleEdit'" class="btn btn-primary text-white rounded-30 px-4 py-2" :disabled="isLoading" @click="saveSettings('style')">#}
{#                                {{ 'Save'|trans }}#}
{#                            </button>#}

{#                            <button v-show="activePanel === 'questionEdit'" class="btn btn-primary text-white rounded-30 px-4 py-2" :disabled="isLoading" @click="saveSettings('question')">#}
{#                                {{ 'Save'|trans }}#}
{#                            </button>#}
                        </div>
                    </div>
                </div>
                <div :class="[activePanel === 'questionEdit' ? 'px-0' : '', 'container-fluid']" style="height: 80%; overflow-y: auto;">
                    {# ################## GLOBAL EDIT PANEL ################## #}
                    <div v-show="activePanel === 'globalEdit'">
                        {{ include('CvLibrary/Form/Edit/global_settings.html.twig') }}
                    </div>
                    {# ################## STYLE EDIT PANEL ################## #}
                    <div v-show="activePanel === 'styleEdit'">
                        {{ include('CvLibrary/Form/Edit/style_edit.html.twig') }}
                    </div>
                    {# ################## CUSTOM EDIT PANEL ################## #}
                    <div v-show="activePanel === 'questionEdit'" class="container border-left-7 pl-3">
                        {{ include('CvLibrary/Form/Edit/question_edit.html.twig') }}
                    </div>
                </div>
            </div>
            <div class="col-6 px-0">
                <div class="form-group form-label-group position-relative input-login">
                    <label for="previewScaling" class="control-label labelInput focusInput font-500 d-flex">{{ 'Preview scaling'|trans }}</label>
                    <i class="fal fa-search-minus" style="font-size: 1.3em;"></i>
                    <input type="range" min="0" max="1" step="0.01" v-model="scalePreview" id="previewScaling" class="w-75">
                    <i class="fal fa-search-plus" style="font-size: 1.3em;"></i>
                </div>
                <div class="loader" v-if="iframeLoading" id="main-loader"></div>
                <iframe :src="finalUrl" width="100%" height="85%" ref="dafPreview"></iframe>
            </div>
        </div>
    </section>

    {% if is_granted('ROLE_BACKEND') %}
        <save-and-comment name-with-comment="{{ 'Save with a comment'|trans }}"
                          :is-linked-brief="false"
                          :id="'modifyDafInstanceOptions'"
                          :e-save-with-comment="triggerSave"
        ></save-and-comment>
    {% endif %}

    <span class="d-none invisible twig-data-daf" data-daf="{{ jsonDafInstance }}"></span>
    <span class="d-none invisible twig-data-daf-token" data-daf-token="{{ dafInstance.token }}"></span>
    <span class="d-none invisible twig-data-jobgroup-list" data-jobgroup-list="{{ jobgroupList|json_encode }}"></span>
    <span class="d-none invisible twig-data-default-daf-options" data-default-daf-options="{{ defaultDafOptions|json_encode }}"></span>
    <span class="d-none invisible twig-data-link" data-link="{{ link }}"></span>
    <span class="d-none invisible twig-data-daf-options" data-daf-options="{{ optionsDaf|json_encode }}"></span>
    <span class="d-none invisible twig-data-daf-logo-files" data-daf-logo-files="{{ logoFiles|json_encode }}"></span>
    <span class="d-none invisible twig-data-daf-font-files" data-daf-font-files="{{ fontFiles|json_encode }}"></span>
    <span class="d-none invisible twig-data-daf-id" data-daf-id="{{ dafInstance.id }}"></span>
    <span class="d-none invisible twig-data-dafinstances" data-dafinstances="{{ dafInstances|json_encode }}"></span>
    <span class="d-none invisible twig-data-security-options" data-security-options="{{ securityOptions|json_encode }}"></span>

    <span class="d-none invisible twig-data-path-current-route" data-path-current-route="{{ path(routeName, {'advertiser': advertiser.id, 'dafInstance': ':did' }) }}"></span>
    <span class="d-none invisible twig-data-path-daf-save-settings" data-path-daf-save-settings="{{ path("ajax_daf_save_settings", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>

    <span class="d-none invisible twig-data-path-ajax-daf-custom-questions-get" data-path-ajax-daf-custom-questions-get="{{ path("ajax_daf_custom_questions_get", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-daf-custom-question-answers-get" data-path-ajax-daf-custom-question-answers-get="{{ path("ajax_daf_custom_question_answers_get", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-daf-custom-question-new-save" data-path-ajax-daf-custom-question-new-save="{{ path("ajax_daf_custom_question_new_save", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-daf-custom-question-status-update" data-path-ajax-daf-custom-question-status-update="{{ path("ajax_daf_custom_questions_status_update", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>

    <span class="d-none invisible twig-data-path-ajax-daf-custom-answer-new-save" data-path-ajax-daf-custom-answer-new-save="{{ path("ajax_daf_custom_answer_new_save", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-daf-custom-answer-status-update" data-path-ajax-daf-custom-answer-status-update="{{ path("ajax_daf_custom_answer_status_update", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-daf-custom-answer-update" data-path-ajax-daf-custom-answer-update="{{ path("ajax_daf_custom_answer_update", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>

    <span class="d-none invisible twig-data-path-ajax-daf-upload-logo-file" data-path-ajax-daf-upload-logo-file="{{ path("ajax_daf_upload_logo_file", {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}"></span>
</main>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('cvlibrary-daf-selector-header') }}
    {{ encore_entry_script_tags('cvlibrary-form-edit-index') }}
{% endblock %}