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

    Do Not Copy
#}

{% 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 input(name, value, class='') %}
    <input type='text' id='responsive-menu-{{ name|replace({'_': '-'}) }}' name='menu[{{ name }}]' value='{{ value|escape }}' class='form-control {{ ' ' ~ class }}'>
{% 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' {% if type == 'font-awesome' %}selected='selected'{% endif %}>FontAwesome Solid (fas)</option>
        <option value='font-awesome-brand' {% if type == 'font-awesome-brand' %}selected='selected'{% endif %}>FontAwesome Brand (fab)</option>
        <option value='glyphicon' {% if type == 'glyphicon' %}selected='selected'{% endif %}>GlyphIcon</option>
        <option value='custom' {% if type == 'custom' %}selected='selected'{% endif %}>Custom</option>
    </select>
{% 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{% if errors[name] %} class='danger'{% 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 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' %}
                        {% set choices = {
                            'px': 'px',
                            '%': '%',
                            'em': 'em',
                            'rem': 'rem',
                            'vw': 'vw',
                            'vh': 'vh'
                        } %}
                        {{ macros.select(name ~ '_unit', options[name ~ '_unit'], choices, 'is-unit') }}
                    {% elseif unit_type == 'pixel_auto' %}
                        {% set choices = {
                            'auto': 'auto',
                            'px': 'px',
                            '%': '%',
                            'em': 'em',
                            'rem': 'rem',
                            'vw': 'vw',
                            'vh': 'vh'
                        } %}
                        {{ macros.select(name ~ '_unit', options[name ~ '_unit'], choices, 'is-unit') }}
                    {% elseif unit_type == 'percentage' %}
                        {% set choices = {
                            '%': '%',
                            'px': 'px',
                            'em': 'em',
                            'rem': 'rem',
                            'vw': 'vw',
                            'vh': 'vh'
                        } %}
                        {{ macros.select(name ~ '_unit', options[name ~ '_unit'], choices, 'is-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 == 'mega_standard_menu_animation' %}
                      {% set choices = {
                        'none': 'None',
                        'fade': 'Fade',
                        'fadeUp': 'FadeUp',
                        'slideDown': 'SlideDown',
                        'slideUp': 'SlideUp'
                    } %}
                    {{ macros.select(name, options[name], choices, 'is-animation-input') }}
                     {% set choices = {
                        '100ms': '100ms',
                        '200ms': '200ms',
                        '300ms': '300ms',
                        '400ms': '400ms',
                        '500ms': '500ms',
                        '600ms': '600ms',
                        '700ms': '700ms',
                        '800ms': '800ms',
                        '900ms': '900ms',
                        '1000ms': '1000ms',
                    } %}
                    {{ macros.select(name ~ '_speed', options[name ~ '_speed'], choices, 'is-animation-input') }}

                {% 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' %}
                    {% set choices = {
                        'slide': 'Slide',
                        'push': 'Push',
                        'fade': 'Fade'
                    } %}
                    {{ macros.select(name, options[name], choices) }}
                {% 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 == 'custom' %}
                    {{ macros.select(name, options[name], choices) }}
                {% elseif select_type == 'button_animation' %}
                    {% set choices = {
                        'off': 'Off',
                        'boring': 'Boring',
                        '3dx': '3DX',
                        '3dx-r': '3DX Reverse',
                        '3dy': '3DY',
                        '3dy-r': '3DY Reverse',
                        'arrow': 'Arrow',
                        'arrow-r': 'Arrow Reverse',
                        'arrowalt': 'Arrow Alt',
                        'arrowalt-r': 'Arrow Alt Reverse',
                        'collapse': 'Collapse',
                        'collapse-r': 'Collapse Reverse',
                        'elastic': 'Elastic',
                        'elastic-r': 'Elastic Reverse',
                        'emphatic': 'Emphatic',
                        'emphatic-r': 'Emphatic Reverse',
                        'minus': 'Minus',
                        'slider': 'Slider',
                        'slider-r': 'Slider Reverse',
                        'spin': 'Spin',
                        'spin-r': 'Spin Reverse',
                        'spring': 'Spring',
                        'spring-r': 'Spring Reverse',
                        'stand': 'Stand',
                        'stand-r': 'Stand Reverse',
                        'squeeze': 'Squeeze',
                        'vortex': 'Vortex',
                        'vortex-r': 'Vortex Reverse'
                    } %}
                    {{ 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 == '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 %}