{% extends ajax-suffix ? "@gantry-admin/partials/ajax.html.twig" : "@gantry-admin/partials/base.html.twig" %}

{% block gantry %}
    <div id="configurations">
        <div class="menu-header">
        <span class="float-right">
            <button class="button button-back-to-conf" tabindex="0"
                    aria-label="{{ 'GANTRY5_PLATFORM_BACK_SETUP'|trans }}"><i class="fa fa-fw fa-fw fa-arrow-left" aria-hidden="true"></i>
                <span>{{ 'GANTRY5_PLATFORM_BACK_SETUP'|trans }}</span></button>
        </span>
            <h2 class="page-title">
                {{ 'GANTRY5_PLATFORM_OUTLINES'|trans }}
                {% if gantry.authorize('outline.create') %}
                <a href="{{ gantry.route('configurations', 'create') }}"
                   title="{{ 'GANTRY5_PLATFORM_ADD_NEW_OUTLINE'|trans }}"
                   aria-label="{{ 'GANTRY5_PLATFORM_ADD_NEW_OUTLINE'|trans }}"
                   data-g5-outline-create class="button button-primary">
                    <i class="fa fa-fw fa-plus" aria-hidden="true"></i>
                </a>
                {% endif %}
            </h2>
        </div>

        <ul class="g-grid">
            <li class="card g-block size-1-4">
                {% set name = 'default' %}
                {% include '@gantry-admin/layouts/outline.html.twig' %}
            </li>
            {% for name, title in gantry.outlines.user %}
                <li class="card g-block size-1-4{{ gantry.outlines.isDefault(name) ? ' outline-is-default' : '' }}">
                    {% include '@gantry-admin/layouts/outline.html.twig' %}
                </li>
            {% endfor %}
            {% if gantry.authorize('outline.create') %}
            <li class="card g-block size-1-4 add-new">
                <div class="page">
                    <a href="{{ gantry.route('configurations', 'create') }}"
                       title="{{ 'GANTRY5_PLATFORM_ADD_NEW_OUTLINE'|trans }}"
                       aria-label="{{ 'GANTRY5_PLATFORM_ADD_NEW_OUTLINE'|trans }}"
                       data-g5-outline-create tabindex="0">
                        <i class="fa fa-fw fa-plus" aria-hidden="true"></i>
                    </a>
                </div>
            </li>
            {% endif %}
        </ul>

        <h2>{{ 'GANTRY5_PLATFORM_SYSTEM_OUTLINES'|trans }}</h2>
        <ul class="g-grid">
            {% for name, title in gantry.outlines.system %}
                {% set preset = gantry.outlines.layoutPreset(name) %}
                <li class="card g-block size-1-4">
                    <div class="page">
                        <h4>{{ title }} <span class="float-right font-small">({{ 'GANTRY5_PLATFORM_ID_X'|trans(name) }})</span></h4>
                        <div class="inner-params">
                            <img src="{{ url(preset.image|default('gantry-admin://images/layouts/default.png')) }}" />
                        </div>
                        <div class="inner-params">
                            <div class="center">
                                <a data-tip="{{ 'GANTRY5_PLATFORM_EDIT'|trans }}"
                                   title="{{ 'GANTRY5_PLATFORM_EDIT_X'|trans(title) }}"
                                   aria-label="{{ 'GANTRY5_PLATFORM_EDIT_X'|trans(title) }}"
                                   data-g5-ajaxify=""
                                   data-g5-ajaxify-target="[data-g5-content-wrapper]"
                                   data-g5-ajaxify-params="{{ {"navbar": true}|json_encode|e('html_attr') }}"
                                   href="{{ gantry.route('configurations', name, 'styles') }}"
                                   class="button button-primary">
                                    <i class="fa fa-fw fa-pencil" aria-hidden="true"></i>
                                </a>
                                {% if gantry.authorize('outline.create') %}
                                <a href="{{ gantry.route('configurations', name, 'duplicate') }}"
                                   data-tip="{{ 'GANTRY5_PLATFORM_DUPLICATE'|trans }}"
                                   title="{{ 'GANTRY5_PLATFORM_DUPLICATE_X'|trans(title) }}"
                                   aria-label="{{ 'GANTRY5_PLATFORM_DUPLICATE_X'|trans(title) }}"
                                   data-g5-outline-duplicate class="button button-secondary">
                                    <i class="fa fa-fw fa-copy" aria-hidden="true"></i>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}