{#
    LimeSurvey
    Copyright (C) 2017-2019 The LimeSurvey Project Team / Denis Chenu
    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.

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

#}
<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="fa fa-spinner fa-pulse fa-3x fa-fw"></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 #}
            {# CSS variation : #}
            {% if oParentOptions.availablevariations is null %}
                {% set sAvailableVariations = '{"contrast":{"name":"Contrast","base":"true","button":"true","awesome":"true","button_awesome":"true"},"bootstrap":{"name":"Bootstrap","base":"true","button":"true","awesome":"true","button_awesome":"true"},"cerulean":{"name":"Cerulean","base":"true","button":"true","awesome":"true","button_awesome":"true"},"cosmo":{"name":"Cosmo","base":"true","button":"true","awesome":"true","button_awesome":"true"},"cyborg":{"name":"Cyborg","base":"true","button":"true","awesome":"true","button_awesome":"true"},"darkly":{"name":"Darkly","base":"true","button":"true","awesome":"true","button_awesome":"true"},"flatly":{"name":"Flatly","base":"true","button":"true","awesome":"true","button_awesome":"true"},"journal":{"name":"Journal","base":"true","button":"true","awesome":"true","button_awesome":"true"},"lumen":{"name":"Lumen","base":"true","button":"true","awesome":"true","button_awesome":"true"},"paper":{"name":"Paper","base":"true","button":"true","awesome":"true","button_awesome":"true"},"readable":{"name":"Readable","base":"true","button":"true","awesome":"true","button_awesome":"true"},"sandstone":{"name":"Sandstone","base":"true","button":"true","awesome":"true","button_awesome":"true"},"simplex":{"name":"Simplex","base":"true","button":"true","awesome":"true","button_awesome":"true"},"slate":{"name":"Slate","base":"true","button":"true","awesome":"true","button_awesome":"true"},"spacelab":{"name":"Spacelab","base":"true","button":"true","awesome":"true","button_awesome":"true"},"superhero":{"name":"Superhero","base":"true","button":"true","awesome":"true","button_awesome":"true"},"united":{"name":"United","base":"true","button":"true","awesome":"true","button_awesome":"true"},"yeti":{"name":"Yeti","base":"true","button":"true","awesome":"true","button_awesome":"true"}}' %}
            {% else %}
                {% set sAvailableVariations = oParentOptions.availablevariations %}
            {% endif %}
            {# Functionnal #}
            <div class='row'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ sprintf( gT("%s variations"), templateConfiguration.template_name) }} </div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_cssframework_css' class='control-label'>{{ gT("Select variation:") }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_cssframework_css' id='simple_edit_cssframework_css' name='cssframework'>
                                        <option value="css/lsbootstrap.css">{{ gT('None') }} - {{ gT('bootstrap.css updatable via theme editor') }}</option>
                                        {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                            <option value="inherit"> {{ gT('Inherit') }}</option>
                                        {% endif %}
                                        {% for variation,oVariation in json_decode(sAvailableVariations) %}
                                            {% set aVariation = json_decode(json_encode(oVariation)) %}
                                            {% if not aVariation.disable %}
                                                <optgroup label="{{ aVariation.name }}">
                                                    {% if aVariation.base %}
                                                        <option value="css/variations/{{ variation }}-base.min.css"> {{ aVariation.name }} - Base</option>
                                                    {% endif %}
                                                    {% if aVariation.button %}
                                                        <option value="css/variations/{{ variation }}-button.min.css">{{ aVariation.name }} - Button for radio and checkbox</option>
                                                    {% endif %}
                                                    {% if aVariation.awesome %}
                                                        <option value="css/variations/{{ variation }}-awesome.min.css">{{ aVariation.name }} - Awesome checkbox and radio</option>
                                                    {% endif %}
                                                    {% if aVariation.button_awesome %}
                                                        <option value="css/variations/{{ variation }}-button_awesome.min.css">{{ aVariation.name }} -  Button &amp; awesome checkbox and radio</option>
                                                    {% endif %}
                                                </optgroup>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                    <p class="help-block">Except contrast, all this variations come from <a href="https://bootswatch.com/3/">bootswatch</a>, Copyright (c) 2013 Thomas Park.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row'>
                <hr/>
            </div>
            {# First settings row #}
            <div class='row'>
                {# hideprivacyinfo #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_hideprivacyinfo' class='control-label col-xs-4'>{{ gT("Hide privacy info") }}</label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <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-default">
                                    <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-default">
                                        <input type='radio' name='hideprivacyinfo' value='inherit' class='selector_option_radio_field simple_edit_options_hideprivacyinfo ' data-id='hideprivacyinfo'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {# Show popups #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_showpopups' class='control-label col-xs-4' {{ showpopups_disabled_qtip }}>{{ gT("Show popups") }}</label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default 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-default" {{ 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-default" {{ showpopups_disabled }}>
                                        <input type='radio' name='showpopups' value='-1' {{ showpopups_disabled }} class='selector_option_radio_field simple_edit_options_showpopups ' data-id='showpopups'/>
                                        {{ gT("Off") }}
                                    </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-default" {{ showpopups_disabled }}>
                                            <input type='radio' name='showpopups' value='inherit' class='selector_option_radio_field simple_edit_options_showpopups ' data-id='showpopups'/>
                                            {{ gT("Inherit") }}
                                        </label>
                                    {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                {# Tag for question #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_questionhtag' class='control-label col-xs-4'> {{ gT("h2 or h3 title for question") }} </label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='questionhtag' value='on' class='selector_option_radio_field simple_edit_options_questionhtag ' data-id='questionhtag'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='questionhtag' value='off' class='selector_option_radio_field simple_edit_options_questionhtag ' data-id='questionhtag'/>
                                    {{ 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-default">
                                        <input type='radio' name='questionhtag' value='inherit' class='selector_option_radio_field simple_edit_options_questionhtag ' data-id='questionhtag'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                            <p class="help-block">{{ gT("Be sure to use only one line text without complex HTML.") }}</p>
                        </div>
                    </div>
                </div>
                {# Fix num auto (and real num value) #}
                <div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_fixnumauto' class='control-label col-xs-4'>{{ gT("Fix automatically numeric value") }}</label>
                        <div class='col-xs-8'>
                            <select class='form-control selector_option_value_field' id='simple_edit_options_fixnumauto' name='fixnumauto'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit"> {{ gT('Inherit') }}</option>
                                {% else %}
                                    <option value="off"> {{ gT('Default') }}</option>
                                {% endif %}
                                <option value="enable">{{ gT("Yes") }}</option>
                                <option value="partial">{{ gT("For expression") }}</option>
                                <option value="disable">{{ gT("No") }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row'>
                <hr/>
            </div>

            {# Decoration #}
            <div class='row'>
                {# Container #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_container' class='control-label col-xs-4'> {{ gT("Survey container") }} </label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='container' value='on' class='selector_option_radio_field simple_edit_options_container ' data-id='container'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='container' value='off' class='selector_option_radio_field simple_edit_options_container ' data-id='container'/>
                                    {{ 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-default">
                                        <input type='radio' name='container' value='inherit' class='selector_option_radio_field simple_edit_options_container ' data-id='container'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {# Question size #}
                <div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_questionsize' class='control-label col-xs-4'> {{ gT("Question size") }} </label>
                        <div class='col-xs-8'>
                            <select class='form-control selector_option_value_field' id='simple_edit_options_questionsize' name='questionsize'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit"> {{ gT('Inherit') }}</option>
                                {% endif %}
                                <option value="body-copy">{{ gT('Body copy') }}</option>
                                <option value="h5">h5</option>
                                <option value="h4">h4</option>
                                <option value="h3">h3</option>
                                <option value="h2">h2</option>
                                <option value="lead">lead</option>
                            </select>
                        </div>
                        <p class="help-block col-xs-12">{{ gT("Size are from your bootsrap theme.") }}</p>
                    </div>
                </div>
                {# Question color #}
                <div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_questioncolor' class='control-label col-xs-4'> {{ gT("Question color") }} </label>
                        <div class='col-xs-8'>
                            <select class='form-control selector_option_value_field' id='simple_edit_options_questioncolor' name='questioncolor'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit"> {{ gT('Inherit') }}</option>
                                {% endif %}
                                <option value="none">{{ gT("Body color (no color)") }}</option>
                                <option value="primary">{{ gT("Primary color") }}</option>
                                <option value="info">{{ gT("Info color") }}</option>
                                <option value="success">{{ gT("Success color") }}</option>
                                <option value="warning">{{ gT("Warning color") }}</option>
                            </select>
                        </div>
                        <p class="help-block col-xs-12">{{ gT("Color are from your bootsrap theme. With panel : it's the panel color.") }}</p>
                    </div>
                </div>
                {# Question wrapper #}
                <div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_questionwrap' class='control-label col-xs-4'> {{ gT("Question wrapper") }} </label>
                        <div class='col-xs-8'>
                            <select class='form-control selector_option_value_field' id='simple_edit_options_questionwrap' name='questionwrap'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit"> {{ gT('Inherit') }}</option>
                                {% endif %}
                                <option value="none">{{ gT("No wrapper") }}</option>
                                <option value="well">{{ gT("Wells wrapper") }}</option>
                                <option value="panel">{{ gT("Panel wrapper") }}</option>
                            </select>
                        </div>
                        <p class="help-block col-xs-12">{{ gT("Simple usage of well or panel from bootrap, for panel : color is for background.") }}</p>
                    </div>
                </div>
            </div>
            <div class='row'>
                <hr/>
            </div>
            <div class='row'>
                {# Fixed header #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_fixedheader' class='control-label col-xs-4'> {{ gT("Fixed header") }} </label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='fixedheader' value='on' class='selector_option_radio_field simple_edit_options_fixedheader ' data-id='fixedheader'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='fixedheader' value='off' class='selector_option_radio_field simple_edit_options_fixedheader ' data-id='fixedheader'/>
                                    {{ 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-default">
                                        <input type='radio' name='fixedheader' value='inherit' class='selector_option_radio_field simple_edit_options_fixedheader ' data-id='fixedheader'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {# Help color #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_helpcolor' class='control-label col-xs-4'> {{ gT("Help color") }} </label>
                        <div class='col-xs-8'>
                            <select class='form-control selector_option_value_field' id='simple_edit_options_helpcolor' name='helpcolor'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit"> {{ gT('Inherit') }}</option>
                                {% endif %}
                                <option value="body-color">{{ gT("Body color") }}</option>
                                <option value="text-muted">{{ gT("Text muted") }}</option>
                                <option value="text-primary">{{ gT("Text primary") }}</option>
                                <option value="text-info">{{ gT("Text info") }}</option>
                                <option value="text-success">{{ gT("Text success") }}</option>
                                <option value="text-warning">{{ gT("Text warning") }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                {# Help color #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_validitycolor' class='control-label col-xs-4'> {{ gT("Dynamic help color (Validity)") }} </label>
                        <div class='col-xs-8'>
                            <select class='form-control selector_option_value_field' id='simple_edit_options_validitycolor' name='validitycolor'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit"> {{ gT('Inherit') }}</option>
                                {% endif %}
                                <option value="body-color">{{ gT("Body color") }}</option>
                                <option value="text-muted">{{ gT("Text muted") }}</option>
                                <option value="text-primary">{{ gT("Text primary") }}</option>
                                <option value="text-info">{{ gT("Text info") }}</option>
                                <option value="text-success">{{ gT("Text success") }}</option>
                                <option value="text-warning">{{ gT("Text warning") }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

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

            <div class='row'>

                {# Body loading loaded #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_bodyloaded' class='control-label col-xs-4'> {{ gT("Body loaded") }} </label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='bodyloaded' value='on' class='selector_option_radio_field simple_edit_options_bodyloaded ' data-id='bodyloaded'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='bodyloaded' value='off' class='selector_option_radio_field simple_edit_options_bodyloaded ' data-id='bodyloaded'/>
                                    {{ gT("No") }}
                                </label>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-default">
                                        <input type='radio' name='bodyloaded' value='inherit' class='selector_option_radio_field simple_edit_options_bodyloaded ' data-id='bodyloaded'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                        {% if(not oParentOptions.bodyloaded) %}
                            <p class="col-xs-12 text-warning">{{ gT("You need to reset template to use this option.") }}</p>
                        {% else %}
                            <p class="help-block col-xs-12">{{ gT("Hide content before loaded.") }}</p>
                        {% endif %}
                    </div>
                </div>

                {# Set hash to disable previous navigator#}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_removeback' class='control-label col-xs-4'> {{ gT("Remove back") }} </label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='removeback' value='on' class='selector_option_radio_field simple_edit_options_removeback ' data-id='removeback'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='removeback' value='off' class='selector_option_radio_field simple_edit_options_removeback ' data-id='removeback'/>
                                    {{ gT("No") }}
                                </label>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-default">
                                        <input type='radio' name='removeback' value='inherit' class='selector_option_radio_field simple_edit_options_removeback ' data-id='removeback'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                        {% if(not oParentOptions.removeback) %}
                            <p class="col-xs-12 text-warning">{{ gT("You need to reset template to use this option.") }}</p>
                        {% else %}
                            <p class="col-xs-12 help-block">{{ gT("Add a javascript system to disable previous button of web navigator.") }}</p>
                        {% endif %}
                    </div>
                </div>

                {# Dynamic validity #}
                <div class='col-sm-12 col-md-6 col-lg-3'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_dynamicvalidity' class='control-label col-xs-4'> {{ gT("Dynamic validity") }} </label>
                        <div class='col-xs-8'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='dynamicvalidity' value='on' class='selector_option_radio_field simple_edit_options_dynamicvalidity ' data-id='dynamicvalidity'/>
                                    {{ gT("Yes") }}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='dynamicvalidity' value='off' class='selector_option_radio_field simple_edit_options_dynamicvalidity ' data-id='dynamicvalidity'/>
                                    {{ gT("No") }}
                                </label>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <label class="btn btn-default">
                                        <input type='radio' name='dynamicvalidity' value='inherit' class='selector_option_radio_field simple_edit_options_dynamicvalidity ' data-id='dynamicvalidity'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                        {% if(not oParentOptions.dynamicvalidity) %}
                            <p class="col-xs-12 text-warning">{{ gT("You need to reset template to use this option.") }}</p>
                        {% else %}
                            <p class="col-xs-12 help-block">{{ gT("Use required and input validity according to survey. Using javascript only.") }}</p>
                            <p class="col-xs-12 help-block small">{{ gT("Thsi is a work in progress feature, currently : only usage of required.") }}</p>
                        {% endif %}
                    </div>
                </div>

            </div>

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

            <!-- Brand Logo -->
            <div class='row'>
                <div class='col-sm-12 col-md-4'>
                    {# Brandlogo #}
                    <div class='form-group row'>
                        <label for='simple_edit_options_brandlogo' class='control-label'>Brandlogo</label>
                        <div class='col-sm-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <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-default">
                                    <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-default">
                                        <input type='radio' name='brandlogo' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_brandlogo'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-sm-8 col-md-6'>
                    {#  Brandlogo file selector #}
                    <div class='form-group row'>
                        <label for='simple_edit_options_brandlogofile' class='control-label'>Brandlogo file</label>
                        <div class='col-sm-12'>
                            <select class='form-control selector_option_value_field selector_radio_childfield selector_image_selector' data-parent="brandlogo" id='simple_edit_options_brandlogofile' name='brandlogofile'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT('Inherit') }}</option>
                                {% else %}
                                    <option data-lightbox-src="{{ imageSrc('./files/logo.png') }}" value="./files/logo.png">{{ gT('Default') }}</option>
                                {% endif %}
                                {% set optgroup = '' %}
                                {% for image in templateConfiguration.imageFileList %}
                                {% if image.group != optgroup %}
                                {% if optgroup != '' %}
                                    </optgroup>
                                {% endif %}
                                    <optgroup label="{{image.group}}">
                                {% set optgroup = image.group %}
                                {% endif %}
                                        <option data-lightbox-src="{{image.preview}}" value="{{image.filepath}}">{{image.filename}}</option>
                                {% endfor %}
                                    </optgroup>
                            </select>
                            <!-- an hidden element to get variations -->
                        </div>
                    </div>
                </div>
                <div class='col-sm-4 col-md-2'>
                    <br/>
                    <button class="btn btn-default selector__open_lightbox" data-target="#simple_edit_options_brandlogofile"> {{ gT('Preview image')}}</button>
                </div>
            </div>

            <!-- Survey list Logo -->
            <div class='row'>
                <div class='col-sm-12 col-md-4'>
                    {# Survey list #}
                    <div class='form-group row'>
                        <label for='simple_edit_options_surveylistlogo' class='control-label'>Survey list logo</label>
                        <div class='col-sm-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='surveylistlogo' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveylistlogo'/>
                                    {{gT("Yes" )}}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='surveylistlogo' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveylistlogo'/>
                                    {{ 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-default">
                                        <input type='radio' name='surveylistlogo' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_surveylistlogo'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-sm-8 col-md-6'>
                    {#  surveylistlogo file selector #}
                    <div class='form-group row'>
                        <label for='simple_edit_options_surveylistlogofile' class='control-label'>surveylistlogo file</label>
                        <div class='col-sm-12'>
                            <select class='form-control selector_option_value_field selector_radio_childfield selector_image_selector' data-parent="surveylistlogo" id='simple_edit_options_surveylistlogofile' name='surveylistlogofile'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT('Inherit') }}</option>
                                {% else %}
                                    <option data-lightbox-src="{{ imageSrc('./files/survey_list_header.png') }}" value="./files/survey_list_header.png">{{ gT('Default') }}</option>
                                {% endif %}
                                {% set optgroup = '' %}
                                {% for image in templateConfiguration.imageFileList %}
                                {% if image.group != optgroup %}
                                {% if optgroup != '' %}
                                    </optgroup>
                                {% endif %}
                                    <optgroup label="{{image.group}}">
                                {% set optgroup = image.group %}
                                {% endif %}
                                        <option data-lightbox-src="{{image.preview}}" value="{{image.filepath}}">{{image.filename}}</option>
                                {% endfor %}
                                    </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
                <div class='col-sm-4 col-md-2'>
                    <br/>
                    <button class="btn btn-default selector__open_lightbox" data-target="#simple_edit_options_surveylistlogofile"> {{ gT('Preview image')}}</button>
                </div>
            </div>

            <!-- Powered Logo -->
            <div class='row'>
                <div class='col-sm-12 col-md-4'>
                    {# Survey list #}
                    <div class='form-group row'>
                        <label for='simple_edit_options_poweredlogo' class='control-label'>Powered link</label>
                        <div class='col-sm-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type='radio' name='poweredlogo' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_poweredlogo'/>
                                    {{gT("Yes" )}}
                                </label>
                                <label class="btn btn-default">
                                    <input type='radio' name='poweredlogo' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_poweredlogo'/>
                                    {{ 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-default">
                                        <input type='radio' name='poweredlogo' value='inherit' class='selector_option_radio_field ' data-id='simple_edit_options_poweredlogo'/>
                                        {{ gT("Inherit") }}
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class='col-sm-8 col-md-6'>
                    {# poweredlogo file selector #}
                    <div class='form-group row'>
                        <label for='simple_edit_options_poweredlogofile' class='control-label'>poweredlogo file</label>
                        <div class='col-sm-12'>
                            <select class='form-control selector_option_value_field selector_radio_childfield selector_image_selector' data-parent="poweredlogo" id='simple_edit_options_poweredlogofile' name='poweredlogofile'>
                                {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
                                    <option value="inherit">{{ gT('Inherit') }}</option>
                                {% else %}
                                    <option data-lightbox-src="{{ imageSrc('./files/poweredby.png') }}" value="./files/poweredby.png">{{ gT('Default') }}</option>
                                {% endif %}
                                {% set optgroup = '' %}
                                {% for image in templateConfiguration.imageFileList %}
                                {% if image.group != optgroup %}
                                {% if optgroup != '' %}
                                    </optgroup>
                                {% endif %}
                                    <optgroup label="{{image.group}}">
                                {% set optgroup = image.group %}
                                {% endif %}
                                        <option data-lightbox-src="{{image.preview}}" value="{{image.filepath}}">{{image.filename}}</option>
                                {% endfor %}
                                    </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
               <div class='col-sm-4 col-md-2'>
                    <br/>
                    <button class="btn btn-default selector__open_lightbox" data-target="#simple_edit_options_poweredlogofile"> {{ gT('Preview image')}}</button>
                </div>
            </div>
            <!-- Powered link , leave it for allowing usage in footer for example -->
            <div class='row'>
                <div class='col-xs-12 col-sm-6'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_poweredlink' class='control-label col-xs-6'>Powered link</label>
                        <div class='col-xs-6'>
                                <input type='text' id="simple_edit_options_poweredlink" class="form-control text_option_string_field" name="poweredlink"
                                {% if (templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty) %}
                                    placeholder="{{ gT('Inherit') }}"
                                {% endif %}
                                >
                        </div>
                    </div>
                </div>
                <div class='col-xs-12 col-sm-6'>
                    <div class='form-group row'>
                        <label for='simple_edit_options_poweredtext' class='control-label col-xs-6'>Powered text</label>
                        <div class='col-xs-6'>
                                <input type='text' id="simple_edit_options_poweredtext" class="form-control text_option_string_field" name="poweredtext"
                                {% if (templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty) %}
                                    placeholder="{{ gT('Inherit') }}"
                                {% endif %}
                                >
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class='row'>
        <hr/>
    </div>
    <div class='row'>
        {# Upload an image #}
        <div class="container-fluid ls-space margin bottom-15">
            <div class="row ls-space margin bottom-15">
                <div class="col-sm-6">
                    {{ sprintf( gT("Upload an image (maximum size: %d MB):"), (templateConfiguration.maxFileSize/1024/1024) ) }}
                </div>
                <div class="col-sm-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-default col-xs-8" for="upload_image_frontend">
                            <input class="hidden" id="upload_image_frontend" name="upload_image_frontend" type="file">
                            <i class="fa fa-upload 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="sr-only">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="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title selector__title"> </h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12">
                            <img class="selector__image img-responsive" src="" alt="title"  />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
