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

{% block gantry %}
    <div class="menu-header">
        <span class="float-right">
            <button class="button button-back-to-conf"><i class="fa fa-fw fa-fw fa-arrow-left"></i> <span>{{ 'GANTRY5_PLATFORM_BACK_SETUP'|trans }}</span></button>
        </span>
        <h2 class="page-title">
            {{ 'GANTRY5_PLATFORM_OUTLINES'|trans }}
            <button data-g-config="create" data-g-config-href="{{ gantry.route('configurations', name, 'create')|e }}" data-g-config-method="POST" class="button button-primary">
                <i class="fa fa-fw fa-plus"></i>
            </button>
            {# TODO: Adding a new outline should be a two step process: 1. you pick title and Layout, 2. creates it. #}
            {#<a data-g5-lm-add href="{{ gantry.route('picker/layouts')|e }}" class="button button-primary"><i class="fa fa-fw fa-plus"></i></a>#}
        </h2>
    </div>

    <div id="configurations">
        <ul class="g-grid">
            {# TODO: Need to inject the Base Outline at the top of the list #}
            {% for name, title in gantry.configurations.user %}
                {%  set preset = gantry.configurations.layoutPreset(name) %}
                <li class="card g-block size-1-4">
                    <div class="page">
                        <h4 class="g-tooltip" data-title="{{ title|e }}">
                            <span data-g-config-href="{{ gantry.route('configurations', name, 'rename')|e }}" data-g-config-method="post" data-title-editable="{{ title|e }}" class="title">{{ title|e }}</span> <i class="fa fa-fw fa-pencil font-small" data-title-edit=""></i>
                            <span class="float-right font-small">(id: {{ 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-title="{{ 'GANTRY5_PLATFORM_EDIT'|trans }}" 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')|e }}" class="button button-primary g-tooltip">
                                    <i class="fa fa-fw fa-pencil"></i>
                                </a>
                                <button data-title="{{ 'GANTRY5_PLATFORM_DUPLICATE'|trans }}" data-g-config="duplicate" data-g-config-href="{{ gantry.route('configurations', name, 'duplicate')|e }}" data-g-config-method="POST" class="button button-secondary g-tooltip">
                                    <i class="fa fa-fw fa-copy"></i>
                                </button>
                                {% if name != 'default' and gantry.configurations.canDelete(name) %}
                                <button data-title="{{ 'GANTRY5_PLATFORM_DELETE'|trans }}" data-g-config="delete" data-g-config-href="{{ gantry.route('configurations', name)|e }}" data-g-config-method="DELETE" class="button red g-tooltip">
                                    <i class="fa fa-fw fa-trash-o"></i>
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
            <li class="card g-block size-1-4 add-new">
                <div class="page">
                    <a data-g-config="create" data-g-config-href="{{ gantry.route('configurations', name, 'create')|e }}" data-g-config-method="POST" data-g5-lm-add>
                        <i class="fa fa-fw fa-plus"></i>
                    </a>
                    {#<a data-g5-lm-add href="{{ gantry.route('picker/layouts')|e }}"><i class="fa fa-fw fa-plus"></i></a>#}
                </div>
            </li>
        </ul>

        <h2>{{ 'GANTRY5_PLATFORM_SYSTEM_OUTLINES'|trans }}</h2>
        <ul class="g-grid">
            {% for name, title in gantry.configurations.system %}
                {%  set preset = gantry.configurations.layoutPreset(name) %}
                <li class="card g-block size-1-4">
                    <div class="page">
                        <h4>{{ title }} <span class="float-right font-small">(id: {{ name }})</span></h4>
                        <div class="inner-params">
                            <img src="{{ url(preset.image|default('gantry-admin://images/layouts/default.png')) }}" />
                        </div>
                        <div class="inner-params">
                            {#<span class="float-left">
                                <a href="{{ gantry.route('configurations', layout)|e }}" class="button">
                                    <i class="fa fa-fw fa-pencil-square-o"></i>

                                </a>
                            </span>
                            <span class="float-right">23 positions</span>#}
                            <div class="center">
                                <a data-title="{{ 'GANTRY5_PLATFORM_EDIT'|trans }}" 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')|e }}" class="button button-primary g-tooltip">
                                    <i class="fa fa-fw fa-pencil"></i>
                                </a>
                                <button data-title="{{ 'GANTRY5_PLATFORM_DUPLICATE'|trans }}" data-g-config="duplicate" data-g-config-href="{{ gantry.route('configurations', name, 'duplicate')|e }}" data-g-config-method="POST" class="button button-secondary g-tooltip">
                                    <i class="fa fa-fw fa-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}
