{#
    LimeSurvey
    Copyright (C) 2007-2017 The LimeSurvey Project Team / Louis Gac
    All rights reserved.
    License: GNU/GPL License v2 or later, see LICENSE.php
    LimeSurvey is free software. This version may have been modified pursuant
    to the GNU General Public License, and as distributed it includes or
    is derivative of works licensed under the GNU General Public License or
    other free or open source software licenses.
    See COPYRIGHT.php for copyright notices and details.

    (¯`·._.·(¯`·._.· Default survey template options ._.·´¯)·._.·´¯)

    This is the form for the option parameters of the basic default template.

    @TODO Check if even used
#}
{% set aOptions = json_decode(templateConfiguration.options)  %}

{% set brandlogofileOptions , brandlogofileInheritFilename, brandlogofileInheritPreview = '', '', '' %}
{% set backgroundimagefileOptions , backgroundimagefileInheritFilename, backgroundimagefileInheritPreview = '', '', '' %}

{{ registerPackage('font-roboto') }}
{{ registerPackage('font-noto') }}
{{ registerPackage('font-news_cycle') }}
{{ registerPackage('font-ubuntu') }}
{{ registerPackage('font-lato') }}
{{ registerPackage('font-websafe') }}

{# The default template offers the variety of styles #}
{% set fontOptions = '' %}


{# For surveyspecific settings add an inherit option #}
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
    {% set fontOptions = fontOptions ~ '<option value="inherit">'~ gT("Inherit")  ~' ['~ gT("inherited value:") ~ ' ' ~ oParentOptions.font ~']</option>' %}
{% endif %}


{% set fontOptions = fontOptions ~ aOptionAttributes.optionAttributes.font.dropdownoptions %}

<div class="container-fluid" style="position:relative">
    {# Small loading animation to give the scripts time to parse and render the correct values #}
    <div class="" style="display:none;height:100%;width:100%;position:absolute;left:0;top:0;background:rgb(255,255,255);background:rgba(235,235,235,0.8);z-index:2000;">
        <div style="position:absolute; left:49%;top:35%;" class="text-center">
            <i class="ri-loader-fill remix-pulse ri-3x"></i>
        </div>
    </div>
    <div class="row">
        {# Begin template option form #}
        <form class='form action_update_options_string_form' action=''>

            {# If this is a surveyspecific settings page, offer the possibility to do a full inheritance of the parent template #}
            {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                <div class='row' id="general_inherit_active">
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_general_inherit' class='control-label'>{{gT("Inherit everything" )}}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input id="general_inherit_on" name='general_inherit' type='radio' value='on' class='selector_option_general_inherit ' data-id='simple_edit_options_general_inherit'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input id="general_inherit_off" name='general_inherit' type='radio' value='off' class='selector_option_general_inherit ' data-id='simple_edit_options_general_inherit'/>
                                    {{ gT("No") }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row action_hide_on_inherit">
                    <hr/>
                </div>
            {% endif %}

            {# Second settings row #}
            <div class='row action_hide_on_inherit'>

                {# Show Clear And Exit #}
                <div class='col-12 col-lg-4 col-xl-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_showclearall' class='control-label'> {{ gT("Show link/button to delete response & exit survey") }} </label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='showclearall' value='on' class='selector_option_radio_field simple_edit_options_showclearall ' data-id='showclearall'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='showclearall' value='off' class='selector_option_radio_field simple_edit_options_showclearall ' data-id='showclearall'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary" title="{{ gT("Inherited value:") }} ">
                                        <input type='radio' name='showclearall' value='inherit' class='selector_option_radio_field simple_edit_options_showclearall ' data-id='showclearall'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.showclearall }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Third settings row #}
            <div class='row action_hide_on_inherit'>
                {# hideprivacyinfo #}
                <div class='col-12 col-md-6 col-lg-4 col-xl-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_hideprivacyinfo' class='control-label'>{{ gT("Hide privacy info") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='hideprivacyinfo' value='on' class='selector_option_radio_field simple_edit_options_hideprivacyinfo ' data-id='hideprivacyinfo'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='hideprivacyinfo' value='off' class='selector_option_radio_field simple_edit_options_hideprivacyinfo ' data-id='hideprivacyinfo'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' name='hideprivacyinfo' value='inherit' class='selector_option_radio_field simple_edit_options_hideprivacyinfo ' data-id='hideprivacyinfo'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.hideprivacyinfo }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {# questionhelptextposition #}
                <div class='col-12 col-lg-4 col-xl-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_questionhelptextposition' class='control-label'>{{ gT("Question help text position") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='questionhelptextposition' value='top' class='selector_option_radio_field simple_edit_options_questionhelptextposition ' data-id='questionhelptextposition'/>
                                    {{ gT("Top") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='questionhelptextposition' value='bottom' class='selector_option_radio_field simple_edit_options_questionhelptextposition ' data-id='questionhelptextposition'/>
                                    {{ gT("Bottom") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' name='questionhelptextposition' value='inherit' class='selector_option_radio_field simple_edit_options_questionhelptextposition ' data-id='questionhelptextposition'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.questionhelptextposition }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {# Fix num auto (and real num value) #}
                <div class='col-12 col-lg-4 col-xl-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_fixnumauto' class='control-label'>{{ gT("Fix automatically numeric value") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    {# bFixNumAuto : 1 and bNumRealValue : 0 #}
                                    <input type='radio' name='fixnumauto' value='enable' class='selector_option_radio_field simple_edit_options_fixnumauto' data-id='fixnumauto'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    {# bFixNumAuto : 0 and bNumRealValue : 0 #}
                                    <input type='radio' name='fixnumauto' value='partial' class='selector_option_radio_field simple_edit_options_fixnumauto' data-id='fixnumauto'/>
                                    {{ gT("For expression") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    {# bFixNumAuto : 0 and bNumRealValue : 1 #}
                                    <input type='radio' name='fixnumauto' value='disable' class='selector_option_radio_field simple_edit_options_fixnumauto' data-id='fixnumauto'/>
                                    {{ gT("No") }}
                                </label>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' name='fixnumauto' value='inherit' class='selector_option_radio_field simple_edit_options_fixnumauto' data-id='fixnumauto'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.fixnumauto == gT("No") ? gT("Default") : oParentOptions.fixnumauto }}]
                                    </label>
                                {% else %}
                                    {# Since added after theme distribution and don't want reset : use empty value for leave default #}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' name='fixnumauto' value='off' class='selector_option_radio_field simple_edit_options_fixnumauto' data-id='fixnumauto'/>
                                        {{ gT("Default") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                {# Show popups #}
                <div class='col-12 col-md-6'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_showpopups' class='control-label' {{ showpopups_disabled_qtip }}>{{ gT("Show popups") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary control-label" {{ showpopups_disabled }}>
                                        <input type='radio' name='showpopups' value='1' {{ showpopups_disabled }} class='selector_option_radio_field simple_edit_options_showpopups ' data-id='showpopups'/>
                                        {{ gT("Popup") }}
                                    </label>
                                    <label class="btn btn-outline-secondary" {{ showpopups_disabled }}>
                                        <input type='radio' name='showpopups' value='0' {{ showpopups_disabled }} class='selector_option_radio_field simple_edit_options_showpopups ' data-id='showpopups'/>
                                        {{ gT("On page") }}
                                    </label>
                                    <label class="btn btn-outline-secondary" {{ showpopups_disabled }}>
                                        <input type='radio' name='showpopups' value='-1' {{ showpopups_disabled }} class='selector_option_radio_field simple_edit_options_showpopups ' data-id='showpopups'/>
                                        {{ gT("No") }}
                                    </label>
                                    {# If this is a root template setting, don't show the inherit button #}
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                        <label class="btn btn-outline-secondary" {{ showpopups_disabled }}>
                                            <input type='radio' name='showpopups' value='inherit' class='selector_option_radio_field simple_edit_options_showpopups ' data-id='showpopups'/>
                                            {{ gT("Inherit") }} [{{ oParentOptions.showpopups }}]
                                        </label>
                                    {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row action_hide_on_inherit'>
                <hr/>
            </div>

            <div class='row action_hide_on_inherit'>

                {# Background Color #}
                <div class='col-md-6 col-lg-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_bodybackgroundcolor' class='control-label'>{{ gT("Background color") }}</label>
                        <div class="input-group">
                            <div class="input-group-addon style__colorpicker">
                                <input type="color" name="bodybackgroundcolor_picker" data-value="{{oParentOptions.bodybackgroundcolor}}" class="selector__colorpicker-inherit-value"/>
                            </div>
                            <input type="text" name="bodybackgroundcolor" data-inheritvalue="{{oParentOptions.bodybackgroundcolor}}" value="inherit" class="selector_option_value_field selector__color-picker form-control simple_edit_options_bodybackgroundcolor" data-id="bodybackgroundcolor" />
                            {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                <div class="input-group-addon">
                                    <button class="btn btn-outline-secondary btn-xs selector__reset-colorfield-to-inherit"><i class="ri-refresh-line"></i></button>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                </div>

                {# Font Color #}
                <div class='col-md-6 col-lg-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_fontcolor' class='control-label'>{{ gT("Font color") }}</label>
                        <div class="input-group">
                            <div class="input-group-addon style__colorpicker">
                                <input type="color" name="fontcolor_picker" data-value="{{oParentOptions.fontcolor}}" class="selector__colorpicker-inherit-value"/>
                            </div>
                            <input type="text" name="fontcolor" value="inherit" data-inheritvalue="{{oParentOptions.fontcolor}}" class="selector_option_value_field selector__color-picker form-control simple_edit_options_fontcolor" data-id="fontcolor" />
                            {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                <div class="input-group-addon">
                                    <button class="btn btn-outline-secondary btn-xs selector__reset-colorfield-to-inherit"><i class="ri-refresh-line"></i></button>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {# Question Background Color #}
                <div class='col-md-6 col-lg-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_questionbackgroundcolor' class='control-label'>{{ gT("Question background color") }}</label>
                        <div class="input-group">
                            <div class="input-group-addon style__colorpicker">
                                <input type="color" name="questionbackgroundcolor_picker" data-value="{{oParentOptions.questionbackgroundcolor}}" class="selector__colorpicker-inherit-value"/>
                            </div>
                            <input type="text" name="questionbackgroundcolor" value="inherit" data-inheritvalue="{{oParentOptions.questionbackgroundcolor}}" class="selector_option_value_field selector__color-picker form-control simple_edit_options_questionbackgroundcolor" data-id="questionbackgroundcolor" />
                            {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                <div class="input-group-addon">
                                    <button class="btn btn-outline-secondary btn-xs selector__reset-colorfield-to-inherit"><i class="ri-refresh-line"></i></button>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {# Check icon #}
                <div class='col-md-6 col-lg-3'>
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_checkicon' class='control-label'>{{ gT("Check icon") }}</label>
                        <div class="input-group">
                            <select name="checkicon" value="" class="selector_option_value_field form-select simple_edit_options_checkicon" data-id="checkicon" id="checkicon" >
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    {{ '<option value = "inherit" > Inherit</option>' }}
                                {% endif %}
                                {{ aOptionAttributes.optionAttributes.checkicon.dropdownoptions}}
                            </select>
                            <div class="input-group-addon selector__checkicon-preview">
                                ( <i class="fa" data-inheritvalue="{{ oParentOptions.checkicon }}" style=" background-color: #328637; color: white; width: 16px; height: 16px;  padding: 3px; font-size: 11px; ">
                                    &#x{{ oParentOptions.checkicon }};
                                </i> )
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class='row action_hide_on_inherit'>
                <hr/>
            </div>

             <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    {# Background image #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_backgroundimage' class='control-label'>{{ gT("Background image") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='backgroundimage' value='on' class='selector_option_radio_field simple_edit_options_backgroundimage ' data-id='backgroundimage'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='backgroundimage' value='off' class='selector_option_radio_field simple_edit_options_backgroundimage ' data-id='backgroundimage'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' name='backgroundimage' value='inherit' class='selector_option_radio_field simple_edit_options_backgroundimage ' data-id='backgroundimage'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.backgroundimage }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class='col-md-8 col-lg-6'>
                    {#  Background image file selector #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_backgroundimagefile' class='control-label'>{{ gT("Background image file") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield selector_image_selector' data-parent="backgroundimage" id='simple_edit_options_backgroundimagefile' name='backgroundimagefile'>
                                {% set optgroup = '' %}
                                {% for image in templateConfiguration.imageFileList %}
                                    {% if image.group != optgroup %}
                                        {% if optgroup != '' %}
                                            {% set backgroundimagefileOptions = backgroundimagefileOptions ~ '</optgroup>' %}
                                        {% endif %}
                                        {% set backgroundimagefileOptions = backgroundimagefileOptions ~ '<optgroup label="' ~ image.group ~ '">'  %}
                                        {% set optgroup = image.group %}
                                    {% endif %}
                                    {% if oParentOptions.brandlogofile == image.filepath %} 
                                        {% set brandlogofileInheritPreview = backgroundimagefileInheritPreview ~ image.preview %} 
                                        {% set brandlogofileInheritFilename = backgroundimagefileInheritFilename ~ image.filename %} 
                                    {% endif %}
                                    {% set backgroundimagefileOptions = backgroundimagefileOptions ~ '<option data-lightbox-src="' ~ image.preview ~ '" value="' ~ image.filepath ~ '">' ~ image.filename ~ '</option>' %}
                                {% endfor %}
                                {% set backgroundimagefileOptions = backgroundimagefileOptions ~ '</optgroup>' %}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    {% set backgroundimagefileOptions = '<option data-lightbox-src="' ~ backgroundimageInheritPreview ~ '" value="inherit">' ~ gT("Inherit")~ ' [' ~ gT("inherited value:") ~ ' ' ~ backgroundimagefileInheritFilename ~ ']</option>' ~ backgroundimagefileOptions %}
                                {% endif %}
                                {{ backgroundimagefileOptions }}
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-md-4 col-lg-2'>
                    <br/>
                    <button class="btn btn-outline-secondary selector__open_lightbox" data-target="#simple_edit_options_backgroundimagefile"> {{ gT('Preview image')}}</button>
                </div>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    {# Brandlogo #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_brandlogo' class='control-label'> {{ gT("Logo") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='brandlogo' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_brandlogo'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' name='brandlogo' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_brandlogo'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' name='brandlogo' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_brandlogo'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.brandlogo }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-md-8 col-lg-6'>
                    {#  Brandlogo file selector #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_brandlogofile' class='control-label'>{{ gT("Logo file") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield selector_image_selector' data-parent="brandlogo" id='simple_edit_options_brandlogofile' name='brandlogofile'>
                                {% set optgroup = '' %}
                                {% for image in templateConfiguration.imageFileList %}
                                    {% if image.group != optgroup %}
                                        {% if optgroup != '' %}
                                            {% set brandlogofileOptions = brandlogofileOptions ~ '</optgroup>' %}
                                        {% endif %}
                                        {% set brandlogofileOptions = brandlogofileOptions ~ '<optgroup label="' ~ image.group ~ '">'  %}
                                        {% set optgroup = image.group %}
                                    {% endif %}
                                    {% if oParentOptions.brandlogofile == image.filepath %} 
                                        {% set brandlogofileInheritPreview = brandlogofileInheritPreview ~ image.preview %} 
                                        {% set brandlogofileInheritFilename = brandlogofileInheritFilename ~ image.filename %} 
                                    {% endif %}
                                    {% set brandlogofileOptions = brandlogofileOptions ~ '<option data-lightbox-src="' ~ image.preview ~ '" value="' ~ image.filepath ~ '">' ~ image.filename ~ '</option>' %}
                                {% endfor %}
                                {% set brandlogofileOptions = brandlogofileOptions ~ '</optgroup>' %}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    {% set brandlogofileOptions = '<option data-lightbox-src="' ~ brandlogofileInheritPreview ~ '" value="inherit">' ~ gT("Inherit")~ ' [' ~ gT("inherited value:") ~ ' ' ~ brandlogofileInheritFilename ~ ']</option>' ~ brandlogofileOptions %}
                                {% endif %}
                                {{ brandlogofileOptions }}
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-md-4 col-lg-2'>
                    <br/>
                    <button class="btn btn-outline-secondary selector__open_lightbox" data-target="#simple_edit_options_brandlogofile"> {{ gT('Preview image')}}</button>
                </div>
            </div>
            <div class='row action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    <div class='mb-3 row'>
                        {# Animate body On/Off #}
                        <label for='simple_edit_options_animatebody' class='control-label'>{{ gT("Animate body") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='on' class='selector_option_radio_field  ' data-id='simple_edit_options_animatebody' name='animatebody'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='off' class='selector_option_radio_field  ' data-id='simple_edit_options_animatebody' name='animatebody'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' value='inherit' class='selector_option_radio_field  ' data-id='simple_edit_options_animatebody' name='animatebody'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.animatebody }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-md-10 col-lg-6'>
                    {# Animate body -> Animation type #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_bodyanimation' class='control-label'>{{ gT("Body animation") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield' data-parent="animatebody" id='simple_edit_options_bodyanimation' name='bodyanimation'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT("Inherit") }} [{{gT("inherited value:")}} {{oParentOptions.bodyanimation }}]</option>
                                {% endif %}
                                {{aOptionAttributes.optionAttributes.bodyanimation.dropdownoptions}}
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-md-2'>
                    {# Animate body -> Animation type duration #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_bodyanimationduration' class='control-label'>{{ gT("Duration") }}</label>
                        <div class='col-12'>
                            <input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatebody" id='simple_edit_options_bodyanimationduration' name='bodyanimationduration' title='{{ gT("inherited value:") }} ' />
                        </div>
                    </div>
                </div>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    {# Animate question -> On/Off #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_animatequestion' class='control-label'>{{ gT("Animate question") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_animatequestion' name='animatequestion'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_animatequestion' name='animatequestion'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_animatequestion' name='animatequestion'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.animatequestion }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-md-10 col-lg-6'>
                    {# Animate question -> Animation type #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_questionanimation' class='control-label'>{{ gT("Question animation") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield' data-parent="animatequestion" id='simple_edit_options_questionanimation' name='questionanimation'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT("Inherit") }} [{{gT("inherited value:")}} {{ oParentOptions.questionanimation }}]</option>
                                {% endif %}
                                {{aOptionAttributes.optionAttributes.questionanimation.dropdownoptions}}
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-md-2'>
                    {# Animate question -> Animation type #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_questionanimationduration' class='control-label'>{{ gT("Duration") }}</label>
                        <div class='col-12'>
                            <input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatequestion" id='simple_edit_options_questionanimationduration' name='questionanimationduration' title='{{ gT("inherited value:") }} ' />
                        </div>
                    </div>
                </div>
            </div>

            {# Animate alert #}
            <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    {# Animate alert -> On/Off #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_animatealert' class='control-label'>{{ gT("Animate alert") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_animatealert' name='animatealert'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_animatealert' name='animatealert'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_animatealert' name='animatealert'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.animatealert }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-md-10 col-lg-6'>
                    {# Animate alert -> Animation options #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_alertanimation' class='control-label'>{{ gT("Alert animation") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield' data-parent="animatealert" id='simple_edit_options_alertanimation' name='alertanimation'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT("Inherit") }} [{{gT("inherited value:")}} {{oParentOptions.alertanimation }}]</option>
                                {% endif %}
                                {{aOptionAttributes.optionAttributes.alertanimation.dropdownoptions}}
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-md-2'>
                    {# Animate alert -> Animation options #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_alertanimationduration' class='control-label'>{{ gT("Duration") }}</label>
                        <div class='col-12'>
                            <input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatealert" id='simple_edit_options_alertanimationduration' name='alertanimationduration' title='{{ gT("inherited value:") }} '/>
                        </div>
                    </div>
                </div>
            </div>

            {# Animate checkbox #}
            <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    {# Animate alert -> On/Off #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_animatecheckbox' class='control-label'>{{ gT("Animate checkbox") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_animatecheckbox' name='animatecheckbox'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_animatecheckbox' name='animatecheckbox'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_animatecheckbox' name='animatecheckbox'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.animatecheckbox }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-md-10 col-lg-6'>
                    {# Animate alert -> Animation options #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_checkboxanimation' class='control-label'>{{ gT("Alert animation") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield' data-parent="animatecheckbox" id='simple_edit_options_checkboxanimation' name='checkboxanimation'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT("Inherit") }} [{{gT("inherited value:")}} {{oParentOptions.checkboxanimation }}]</option>
                                {% endif %}
                                {{aOptionAttributes.optionAttributes.checkboxanimation.dropdownoptions}}
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-md-2'>
                    {# Animate alert -> Animation options #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_checkboxanimationduration' class='control-label'>{{ gT("Duration") }}</label>
                        <div class='col-12'>
                            <input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animatecheckbox" id='simple_edit_options_checkboxanimationduration' name='checkboxanimationduration' title='{{ gT("inherited value:") }} ' />
                        </div>
                    </div>
                </div>
            </div>

            {# Animate radio #}
            <div class='row action_hide_on_inherit'>
                <div class='col-12 col-lg-4'>
                    {# Animate alert -> On/Off #}
                    <div class='mb-3 row'>
                        <label for='simple_edit_options_animateradio' class='control-label'>{{ gT("Animate radio buttons") }}</label>
                        <div class='col-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_animateradio' name='animateradio'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-outline-secondary">
                                    <input type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_animateradio' name='animateradio'/>
                                    {{ gT("No") }}
                                </label>
                                {# If this is a root template setting, don't show the inherit button #}
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-outline-secondary">
                                        <input type='radio' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_animateradio' name='animateradio'/>
                                        {{ gT("Inherit") }} [{{ oParentOptions.animateradio }}]
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {# Animate alert -> Animation options #}
                <div class='col-md-10 col-lg-6'>

                    <div class='mb-3 row'>
                        <label for='simple_edit_options_radioanimation' class='control-label'>{{ gT("Radio button animation") }}</label>
                        <div class='col-12'>
                            <select class='form-select selector_option_value_field selector_radio_childfield' data-parent="animateradio" id='simple_edit_options_radioanimation' name='radioanimation'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT("Inherit") }} [{{gT("inherited value:")}} {{oParentOptions.radioanimation }}]</option>
                                {% endif %}
                                {{aOptionAttributes.optionAttributes.radioanimation.dropdownoptions}}
                            </select>
                        </div>
                    </div>
                </div>
                {# Animate alert -> Animation options #}
                <div class='col-md-2'>

                    <div class='mb-3 row'>
                        <label for='simple_edit_options_radioanimationduration' class='control-label'>{{ gT("Duration") }}</label>
                        <div class='col-12'>
                            <input type="text" class='form-control selector-numerical-input selector_option_value_field selector_radio_childfield' data-parent="animateradio" id='simple_edit_options_radioanimationduration' name='radioanimationduration' title='{{ gT("inherited value:") }} ' />
                        </div>
                    </div>
                </div>
            </div>
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ sprintf( gT("%s fonts"), templateConfiguration.template_name)|capitalize }}</div>
                        <div class='panel-body'>
                            <div class='mb-3 row'>
                                <label for='simple_edit_options_font' class='control-label'>{{ gT("Select font:") }}</label>
                                <div class='col-12'>
                                    <select class='form-select selector_option_value_field' id='simple_edit_options_font' name='font' data-inheritvalue='{{oParentOptions.packages_to_load}}'>
                                        {{ fontOptions }}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class='row ls-space margin top-15 bottom-15 '>
                <hr/>
            </div>
            {# Fruity variation #}
            <div class='row'>
                <div class='col-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ sprintf( gT("%s variations"), templateConfiguration.template_name)|capitalize }} </div>
                        <div class='panel-body'>
                            <div class='mb-3 row'>
                                <label for='simple_edit_add_css' class='control-label'>{{ gT("Select variation:") }}</label>
                                <div class='col-12'>
                                    <select class='form-select selector_cssframework_value_field' id='simple_edit_add_css' name='cssframework' data-inheritvalue='{{oParentOptions.files_css}}'>
                                        {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                            {{ '<option value="inherit">'~ gT("Inherit")  ~' ['~ gT("inherited value:") ~'</option>' }}
                                        {% endif %}

                                        {{aOptionAttributes.optionAttributes.cssframework.dropdownoptions}}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row d-none'>
                <div class='col-12'>
                    <button class='btn btn-success col-6 col-md-4 col-lg-2 action_update_options_string_button'>
                        {{ gT("Save") }}
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class='row action_hide_on_inherit'>
        {# Upload an image #}
        <div class="container-fluid ls-space margin bottom-15">
            <div class="row ls-space margin bottom-15">
                <div class="col-md-6">
                    {{ sprintf( gT("Upload an image (maximum size: %d MB):"), (templateConfiguration.maxFileSize/1024/1024) ) }}
                </div>
                <div class="col-md-6">
                {{ C.Html.form(createUrl('/admin/themes/sa/upload'), 'post', { 'id' : 'upload_frontend', 'name' : 'upload_frontend', 'enctype' :'multipart/form-data' }) }}
                    <span id="fileselector_frontend">
                        <label class="btn btn-outline-secondary col-8" for="upload_image_frontend">
                            <input class="d-none" id="upload_image_frontend" name="upload_image_frontend" type="file">
                            <i class="ri-upload-fill ls-space margin right-10"></i>
                            {{ gT("Upload") }}
                        </label>
                    </span>

                        <input type='hidden' name='templatename' value='{{ templateConfiguration.template_name }}' />
                        <input type='hidden' name='templateconfig' value='{{ templateConfiguration.id }}' />
                        <input type='hidden' name='action' value='templateuploadimagefile' />
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="progress">
                    <div id="upload_progress_frontend" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                        <span class="visually-hidden">0%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="lightbox-modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title selector__title"> </h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <img class="selector__image img-fluid" src="" alt="title"  />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
