<div class="g-tabs" role="tablist">
    <ul>
        <li class="active">
            <a href="#" id="g-switcher-platforms-tab" role="presentation" aria-controls="g-switcher-platforms" role="tab" aria-expanded="true">
                {{ 'GANTRY5_PLATFORM_PRESETS'|trans }}
            </a>
        </li>
        <li>
            <a href="#" id="g-switcher-platforms-outlines" role="presentation" aria-controls="g-switcher-outlines" role="tab" aria-expanded="false">
                {{ 'GANTRY5_PLATFORM_OUTLINES'|trans }}
            </a>
        </li>
    </ul>
</div>

<div class="g-panes">
    <div class="g-pane clearfix active" role="tabpanel" id="g-switcher-platforms" aria-labelledby="g-switcher-platforms-tab" aria-expanded="true">
        <div class="g-preserve-particles">
            <label>
                <input data-g-preserve="preset" type="checkbox" checked="checked" />
                {{ 'GANTRY5_PLATFORM_SWITCH_PRESET_DESC'|trans }}
            </label>
        </div>

        {% for name, group in presets %}
        <ul class="g-switch-presets{% if name == 'user' %} float-left{% else %} float-right{% endif %}" role="tablist">
            <li tabindex="0" class="g-switch-title" role="presentation">
                {{ name == 'user' ? 'GANTRY5_PLATFORM_LM_SWITCHER_USER'|trans : 'GANTRY5_PLATFORM_LM_SWITCHER_PLATFORM'|trans }}
            </li>
            {% for key, current in group %}
            <li tabindex="0" aria-label="{{ 'GANTRY5_PLATFORM_X_PRESET'|trans(current) }}" role="button"
                data-switch="{{ gantry.route('configurations/' ~ configuration ~ '/layout/preset/' ~ key) }}"
                class="g-switch-preset"
            >
                {{ current }}
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    </div>

    <div class="g-pane clearfix" role="tabpanel" id="g-switcher-outlines" aria-labelledby="g-switcher-outlines-tab" aria-expanded="false">
        {% set user_conf = gantry.outlines.copy.user %}
        {% set system_conf = gantry.outlines.system %}

        <div class="g-preserve-particles">
            <label>
                <input data-g-preserve="outline" type="checkbox" />
                {{ 'GANTRY5_PLATFORM_SWITCH_OUTLINE_DESC'|trans }}
            </label>
            {% if configuration != 'default' %}
            <label>
                <input data-g-inherit="outline" type="checkbox" checked="checked" />
                {{ 'GANTRY5_PLATFORM_SWITCH_OUTLINE_INHERIT_DESC'|trans }}
            </label>
            {% endif %}
        </div>
        <ul class="g-switch-conf-user{% if system_conf.count %} float-left{% endif %}" role="tablist">
            <li tabindex="0" class="g-switch-title" role="presentation">{{ 'GANTRY5_PLATFORM_LM_SWITCHER_USER'|trans }}</li>
            <li tabindex="0"
                aria-label="{{ 'GANTRY5_PLATFORM_X_OUTLINE'|trans('GANTRY5_PLATFORM_BASE_OUTLINE'|trans) }}"
                role="button"
                data-switch="{{ gantry.route('configurations/' ~ configuration ~ '/layout/switch/default') }}"
                class="g-switch-configuration"
            >
                {{ 'GANTRY5_PLATFORM_BASE_OUTLINE'|trans }}
            </li>
            {% for key,current in user_conf %}
                {% if key != configuration %}
                    {% set label=current|replace({'_': ' '})|trim|title %}
                    <li tabindex="0"
                        aria-label="{{ 'GANTRY5_PLATFORM_X_OUTLINE'|trans(label) }}"
                        role="button"
                        data-switch="{{ gantry.route('configurations/' ~ configuration ~ '/layout/switch/' ~ key) }}"
                        class="g-switch-configuration"
                    >
                        {{ label }}
                    </li>
                {% endif %}
            {% endfor %}
        </ul>

        {% if system_conf.count %}
            <ul class="g-switch-conf-systems float-right">
                <li tabindex="0" class="g-switch-title" role="presentation">{{ 'GANTRY5_PLATFORM_LM_SWITCHER_SYSTEM'|trans }}</li>
                {% for key,current in system_conf %}
                    {% set label=current|replace({'_': ' '})|trim|capitalize|e %}
                    <li tabindex="0"
                        aria-label="{{ 'GANTRY5_PLATFORM_X_OUTLINE'|trans(label) }}"
                        role="button"
                        data-switch="{{ gantry.route('configurations/' ~ configuration ~ '/layout/switch/' ~ key) }}"
                        class="g-switch-configuration"
                    >
                        {{ label }}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>