{#
    Responsive Menu Jinja template file.
    NOT Safe to Copy

    Do Not Copy
#}

{% macro percentage_units(name, value) %}
    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick is-unit' name='menu[{{ name }}]'>
        <option value='%' selected='selected'>%</option>
        <option value='px' disabled data-subtext='[PRO]'>px -</option>
        <option value='em' disabled data-subtext='[PRO]'>em -</option>
        <option value='rem' disabled data-subtext='[PRO]'>rem -</option>
        <option value='vw' disabled data-subtext='[PRO]'>vw -</option>
        <option value='vh' disabled data-subtext='[PRO]'>vh -</option>
    </select>
{% endmacro %}

{% macro pixel_units(name, value) %}
    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' id='responsive-menu-{{ name|replace({'_': '-'}) }}'class='selectpicker show-tick is-unit' name='menu[{{ name }}]'>
        <option value='px' selected='selected'>px</option>
        <option value='%'  disabled data-subtext='[PRO]'>% -</option>
        <option value='em' disabled data-subtext='[PRO]'>em -</option>
        <option value='rem' disabled data-subtext='[PRO]'>rem -</option>
        <option value='vw' disabled data-subtext='[PRO]'>vw -</option>
        <option value='vh' disabled data-subtext='[PRO]'>vh -</option>
    </select>
{% endmacro %}

{% macro pixel_units_auto(name, value) %}
    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' id='responsive-menu-{{ name|replace({'_': '-'}) }}'class='selectpicker show-tick is-unit' name='menu[{{ name }}]'>
        <option value='auto' selected='selected'>auto</option>
        <option value='px' disabled data-subtext='[PRO]'>px</option>
        <option value='%'  disabled data-subtext='[PRO]'>% -</option>
        <option value='em' disabled data-subtext='[PRO]'>em -</option>
        <option value='rem' disabled data-subtext='[PRO]'>rem -</option>
        <option value='vw' disabled data-subtext='[PRO]'>vw -</option>
        <option value='vh' disabled data-subtext='[PRO]'>vh -</option>
    </select>
{% endmacro %}

{% macro animation_select(name, value) %}
    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'>
        <option value='slide'{% if value == 'slide' %} selected='selected'{% endif %}>Slide</option>
        <option value='push'{% if value == 'push' %} selected='selected'{% endif %}>Push</option>
        <option value='fade' disabled data-subtext='[PRO]'>Fade -</option>
    </select>
{% endmacro %}

{% macro select(name, value, choices, class='') %}
    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick {{ class }}' name='menu[{{ name }}]'>
        {% for key, display in choices %}
            <option value='{{ key }}' {% if key == value %}selected='selected'{% endif %}>
                {{ display }}
            </option>
        {% endfor %}
    </select>
{% endmacro %}

{% macro selectize(name, value, class='') %}
    <input type="text" value="{{ value }}" id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectize {{ class }}' name='menu[{{ name }}]' />
{% endmacro %}

{% macro font_icon(name, value, type) %}
    <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value|escape }}' class='form-control font-icon-input {{ class }}'>
    <select class='selectpicker show-tick font-icon-select' name='menu[{{ name }}_type]'>
        <option value='font-awesome' selected='selected'>FontAwesome</option>
        <option value='glyphicon'>GlyphIcon</option>
        <option value='custom'>Custom</option>
    </select>
{% endmacro %}

{% macro button_animation_select(name, value) %}
    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'>
        <option value='off'{% if value == 'off' %} selected='selected'{% endif %}>Off</option>
        <option value='boring'{% if value == 'boring' %} selected='selected'{% endif %}>Boring</option>
        <option value='3dx' disabled data-subtext='[PRO]'>3DX -</option>
        <option value='3dx-r' disabled data-subtext='[PRO]'>3DX Reverse -</option>
        <option value='3dy' disabled data-subtext='[PRO]'>3DY -</option>
        <option value='3dy-r' disabled data-subtext='[PRO]'>3DY Reverse -</option>
        <option value='arrow' disabled data-subtext='[PRO]'>Arrow -</option>
        <option value='arrow-r' disabled data-subtext='[PRO]'>Arrow Reverse -</option>
        <option value='arrowalt' disabled data-subtext='[PRO]'>Arrow Alt -</option>
        <option value='arrowalt-r' disabled data-subtext='[PRO]'>Arrow Alt Reverse -</option>
        <option value='collapse' disabled data-subtext='[PRO]'>Collapse -</option>
        <option value='collapse-r' disabled data-subtext='[PRO]'>Collapse Reverse -</option>
        <option value='elastic' disabled data-subtext='[PRO]'>Elastic -</option>
        <option value='elastic-r' disabled data-subtext='[PRO]'>Elastic Reverse -</option>
        <option value='emphatic' disabled data-subtext='[PRO]'>Emphatic -</option>
        <option value='emphatic-r' disabled data-subtext='[PRO]'>Emphatic Reverse -</option>
        <option value='minus' disabled data-subtext='[PRO]'>Minus -</option>
        <option value='slider' disabled data-subtext='[PRO]'>Slider -</option>
        <option value='slider-r' disabled data-subtext='[PRO]'>Slider Reverse -</option>
        <option value='spin' disabled data-subtext='[PRO]'>Spin -</option>
        <option value='spin-r' disabled data-subtext='[PRO]'>Spin Reverse -</option>
        <option value='spring' disabled data-subtext='[PRO]'>Spring -</option>
        <option value='spring-r' disabled data-subtext='[PRO]'>Spring Reverse -</option>
        <option value='stand' disabled data-subtext='[PRO]'>Stand -</option>
        <option value='stand-r' disabled data-subtext='[PRO]'>Stand Reverse -</option>
        <option value='squeeze' disabled data-subtext='[PRO]'>Squeeze -</option>
        <option value='vortex' disabled data-subtext='[PRO]'>Vortex -</option>
        <option value='vortex-r' disabled data-subtext='[PRO]'>Vortex Reverse -</option>
    </select>
{% endmacro %}

{% macro input(name, value, class='') %}
    <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value|escape }}' class='form-control {{ class }}'>
{% endmacro %}

{% macro colour(name, value) %}
    <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='form-control mini-colours' name='menu[{{ name }}]' value='{{ value }}' />
{% endmacro %}

{% macro label(for, title) %}
    <label for='responsive-menu-{{ for|replace({'_': '-'}) }}' class='control-label'>
        {{ title }}
    </label>
{% endmacro %}

{% macro checkbox(name, value) %}
    <input {% if value == 'on' %}checked='checked' {% endif %} id='responsive-menu-{{ name|replace({'_': '-'}) }}'
           name='menu[{{ name }}]' data-toggle='toggle' data-onstyle='success' data-offstyle='danger' type='checkbox' value='on' />
{% endmacro %}

{% macro image(name, value) %}
    <div class='input-group'>
        <input type='text' class='form-control' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value }}' />
        <span class='input-group-btn'>
            <button type='button' class='image_button btn btn-primary btn-rm' for='responsive-menu-{{ name|replace({'_': '-'}) }}'>Upload Image</button>
        </span>
    </div>
{% endmacro %}

{% macro textarea(name, value) %}
    <textarea class='form-control' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]'>{{ value }}</textarea>
{% endmacro %}

{% macro row(name, title, type, options, errors, class='', pro='', select_type='', unit_type='', sub_title='', unit='', choices=[], sub_sub_title='') %}
    {% import _self as macros %}
    <tr class="{% if errors[name] %} danger {% endif %} {% if pro == 'pro' %} pro-row {% endif %}" >
        <td class='col-left col-md-3'>
            {{ macros.label(name, title) }}
            {% if sub_title %}
                <div class='sub-text'>{{ sub_title|raw }}</div>
            {% endif %}
            {% if sub_sub_title %}
                <div class='sub_sub_title'><br />{{ sub_sub_title|raw }}</div>
            {% endif %}
        </td>
        <td class='col-right {% if pro %} {{ pro }}{% endif %}'>
            {% if pro == 'pro' %}
                <div class="responsive-menu-pro-overlay">
                    <a href="https://responsive.menu?utm_source=free-plugin&utm_medium=option&utm_campaign=free-plugin-option-upgrade#pricing"
                       target="_blank">Click to upgrade now to use</a>
                </div>
            {% endif %}
            {% if type == 'checkbox' %}
                {{ macros.checkbox(name, options[name]) }}
            {% elseif type == 'colour' %}
                {{ macros.colour(name, options[name]) }}
            {% elseif type == 'input' %}
                {{ macros.input(name, options[name], class) }}
                {% if class == 'has-unit' %}
                    {% if unit_type == 'pixel' %}
                        {{ macros.pixel_units(name ~ '_unit', options[name ~ '_unit']) }}
                    {% elseif unit_type == 'pixel_auto' %}
                        {{ macros.pixel_units_auto(name ~ '_unit', options[name ~ '_unit']) }}
                    {% elseif unit_type == 'percentage' %}
                        {{ macros.percentage_units(name ~ '_unit', options[name ~ '_unit']) }}
                    {% endif %}
                {% endif %}
            {% elseif type == 'textarea' %}
                {{ macros.textarea(name, options[name], class) }}
            {% elseif type == 'selectize' %}
                {{ macros.selectize(name, options[name], class) }}
            {% elseif type == 'select' %}
                {% if select_type == 'side' %}
                    {% set choices = {
                        'top': 'Top',
                        'left': 'Left',
                        'right': 'Right',
                        'bottom': 'Bottom'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'left_right' %}
                    {% set choices = {
                        'left': 'Left',
                        'right': 'Right'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'left_right_with_none' %}
                    {% set choices = {
                        '': 'None',
                        'left': 'Left',
                        'right': 'Right'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'left_right_centre_with_none' %}
                    {% set choices = {
                        '': 'None',
                        'left': 'Left',
                        'right': 'Right',
                        'centre': 'Centre'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'position' %}
                    <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'>
                        <option data-subtext='Will stay in position as you scroll down the page.' value='fixed' {% if options[name] == 'fixed' %}selected='selected'{% endif %}>Fixed</option>
                        <option data-subtext='Will disappear as you scroll down the page.' value='absolute' {% if options[name] == 'absolute' %}selected='selected'{% endif %}>Absolute</option>
                        <option data-subtext='Will stay in a specific position on your page.' value='relative' {% if options[name] == 'relative' %}selected='selected'{% endif %} >Relative</option>
                    </select>
                {% elseif select_type == 'animation' %}
                    {{ macros.animation_select(name, options[name]) }}
                {% elseif select_type == 'depth' %}
                    {% set choices = {
                        '1': '1',
                        '2': '2',
                        '3': '3',
                        '4': '4',
                        '5': '5'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'alignment' %}
                    {% set choices = {
                        'left': 'Left',
                        'right': 'Right',
                        'center': 'Centered',
                        'justify': 'Justified'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'link_locations' %}
                    {% set choices = {
                        '_blank': 'New Tab',
                        '_self': 'Same Page',
                        '_parent': 'Parent Page',
                        '_top': 'Full Window Body'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'theme' %}
                    {% set choices = {
                        'dark': 'Dark',
                        'light': 'Light'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'custom' %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'button_animation' %}
                    {{ macros.button_animation_select(name, options[name]) }}
                {% elseif select_type == 'menu_theme' %}
                    {% set themes = get_available_themes() %}
                    {% set choices = [] %}
                    {% for theme, config in themes %}
                        {% set choices = choices|merge({(theme): config.name ~ ' (' ~ theme ~ ')'}) %}
                    {% endfor %}
                    {{ macros.select(name, options[name], choices) }}
                {% endif %}
            {% elseif type == 'image' %}
                {{ macros.image(name, options[name]) }}
            {% elseif type == 'font-icon' %}
                {{ macros.font_icon(name, options[name], options[name ~ '_type']) }}
            {% endif %}
            {% if unit %}
                <span class='unit'>{{ unit }}</span>
            {% endif %}
        </td>
    </tr>
{% endmacro %}

{% macro header(title, section) %}
    <div class='panel-body'>
        {{ title }}
        <small>{{ section }}</small>
    </div>
{% endmacro %}