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

{% block gantry %}
{% if configuration == 'default' and gantry.platform.no_base_layout %}

<h2 class="page-title">{{ 'GANTRY5_PLATFORM_LAYOUT'|trans }}</h2>
<p>{{ 'GANTRY5_PLATFORM_BASE_LAYOUT_DESC'|trans }}</p>

{% else %}

<div class="g-grid" data-lm-container="">
    <div class="g-block sidebar-block particles-sidebar-block">
        <h2 class="page-title">
            <span class="title">{{ 'GANTRY5_PLATFORM_PARTICLES'|trans }}</span>
        </h2>
        <div class="g5-lm-particles-picker">
            <div class="search settings-block">
                <input type="text" placeholder="{{ 'GANTRY5_PLATFORM_FILTER_ELI'|trans }}" aria-label="{{ 'GANTRY5_PLATFORM_FILTER_ELI'|trans }}" role="search"/>
                <i class="fa fa-fw fa-search" aria-hidden="true"></i>
            </div>
            <div class="particles-container">
                {% for key, list in particles %}
                    {{ key|capitalize }}
                    <ul>
                    {% for type, particle in list %}
                        {% for item_key, item in particle %}
                            {% set isDisabled = not gantry.config.get('particles.' ~ item_key ~ '.enabled', true) %}
                            <li class="g5-lm-particle-{{ type }}"
                                data-lm-blocktype="{{ type }}"
                                data-lm-subtype="{{ item_key }}"
                                data-lm-icon="{{ item.icon|default('fa-cube') }}"
                                {% if isDisabled %}
                                data-lm-disabled=""
                                data-lm-nodrag=""
                                title="{{ 'GANTRY5_PLATFORM_PARTICLE_DISABLED'|trans }}"
                                {% endif %}
                            >
                                <span class="particle-icon" {{ isDisabled ? 'data-lm-disabled data-lm-nodrag' : '' }}>
                                    <i class="fa fa-fw {{ item.icon|default('fa-cube') }}" aria-hidden="true" {{ isDisabled ? 'data-lm-disabled data-lm-nodrag' : '' }}></i>
                                </span>
                                <span class="particle-title" {{ isDisabled ? 'data-lm-disabled data-lm-nodrag' : '' }}>{{ item.name }}</span>
                            </li>
                        {%  endfor %}
                    {% endfor %}
                    </ul>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="g-block main-block">
        <span class="float-right">
            {#<a href="#" class="button"><i class="fa fa-fw fa-sign-in" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_IMPORT'|trans }}</span></a>
            <a href="#" class="button"><i class="fa fa-fw fa-sign-out" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_EXPORT'|trans }}</span></a>#}
            <button href="#"
                    class="button"
                    role="button"
                    data-lm-switcher="{{ gantry.route(switcher_url) }}"
                    aria-label="{{ 'GANTRY5_PLATFORM_LM_LOAD_PRESET'|trans }}">
                <i class="fa fa-fw fa-code-branch" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_LOAD'|trans }}</span>
            </button>
            <div class="button" data-g-popover aria-haspopup="true" aria-expanded="false" role="presentation">
                <span><i class="far fa-fw fa-trash-alt" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_CLEAR'|trans }} <i class="font-small fa fa-fw fa-chevron-down" aria-hidden="true"></i></span>
                <ul data-popover-content class="hidden" tabindex="0">
                    <li data-g-popover-follow>
                        <a tabindex="0"
                           href="#"
                           data-lm-clear="full"
                           aria-label="{{ 'GANTRY5_PLATFORM_LM_CLEAR_LAYOUT'|trans }}"
                        ><i class="fa fa-fw fa-trash" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_LM_CLEAR_FULL'|trans }}
                        </a>
                    </li>
                    <li data-g-popover-follow>
                        <a tabindex="0"
                           href="#"
                           data-lm-clear="keep-inheritance"
                           aria-label="{{ 'GANTRY5_PLATFORM_LM_CLEAR_LAYOUT'|trans }}"
                        ><i class="far fa-fw fa-trash-alt" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_LM_CLEAR_KEEP_INHERITANCE'|trans }}
                        </a>
                    </li>
                </ul>
            </div>
            <button href="#"
                    class="button button-primary button-save"
                    role="button"
                    data-save="Layout"
                    aria-label="{{ 'GANTRY5_PLATFORM_SAVE_LAYOUT'|trans }}"
            >
                <i class="fa fa-fw fa-check" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_SAVE_LAYOUT'|trans }}</span>
            </button>
        </span>
        <h2 class="page-title layout-title">
            <span class="title">{{ 'GANTRY5_PLATFORM_LAYOUT'|trans }} <small>({{ preset_title|default('GANTRY5_PLATFORM_LM_PRESET_UNKNOWN'|trans) }})</small></span>
        </h2>

        <div class="lm-newblocks clearfix" data-lm-blocktypes="">
            {#<a class="button" href="{{ gantry.route('picker/particles')|e }}" data-lm-addparticle=""><i class="fa fa-plus" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_NEW_PARTICLE'|trans }}</span></a>#}
            <span class="float-right">
                <button data-lm-back="" href="#" class="button disabled"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_UNDO'|trans }}</button>
                {#<a href="#" class="button"><i class="fa fa-fw fa-history" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_HISTORY'|trans }}</span></a>#}
                <button data-lm-forward="" href="#" class="button disabled">{{ 'GANTRY5_PLATFORM_REDO'|trans }} <i class="fa fa-fw fa-arrow-right" aria-hidden="true"></i></button>
            </span>
        </div>
        <div id="page">
            <div class="lm-blocks"
                 data-lm-page="{{ page_id }}"
                 data-lm-preset="{{ preset|json_encode|e('html_attr') }}"
                 data-lm-root="{{ layout|json_encode|e('html_attr') }}"
            >
            </div>
            {% if layout is empty %}
            <div id="lm-no-layout">
                <div class="card full-width">
                    <h4>{{ 'GANTRY5_PLATFORM_NO_LAYOUT'|trans }}</h4>
                    <div class="inner-params">
                        {{ 'GANTRY5_PLATFORM_NO_LAYOUT_DESC'|trans|raw }}
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="g-footer-actions">
            <span class="float-right">
                <a href="#" class="button" data-lm-switcher="{{ gantry.route(switcher_url) }}">
                    <i class="fa fa-fw fa-code-branch" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_LOAD'|trans }}</span>
                </a>
                <div data-g-popover class="button" aria-haspopup="true" aria-expanded="false" role="presentation">
                <span><i class="far fa-fw fa-trash-alt" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_CLEAR'|trans }} <i class="fa fa-fw fa-chevron-down font-small" aria-hidden="true"></i></span>
                <ul data-popover-content class="hidden" tabindex="0">
                    <li data-g-popover-follow>
                        <a tabindex="0"
                           href="#"
                           data-lm-clear="full"
                           aria-label="{{ 'GANTRY5_PLATFORM_LM_CLEAR_LAYOUT'|trans }}"
                        ><i class="fa fa-fw fa-trash" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_LM_CLEAR_FULL'|trans }}
                        </a>
                    </li>
                    <li data-g-popover-follow>
                        <a tabindex="0"
                           href="#"
                           data-lm-clear="keep-inheritance"
                           aria-label="{{ 'GANTRY5_PLATFORM_LM_CLEAR_LAYOUT'|trans }}"
                        ><i class="far fa-fw fa-trash-alt" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_LM_CLEAR_KEEP_INHERITANCE'|trans }}
                        </a>
                    </li>
                </ul>
            </div>
                <a href="#" class="button button-primary button-save" data-save="Layout">
                    <i class="fa fa-fw fa-check" aria-hidden="true"></i> <span>{{ 'GANTRY5_PLATFORM_SAVE_LAYOUT'|trans }}</span>
                </a>
            </span>
            </div>
        </div>
    </div>

    <div id="trash" data-lm-eraseblock=""><div class="trash-zone">&times;</div><span>{{ 'GANTRY5_PLATFORM_DROP_DELETE'|trans }}</span></div>
</div>
{% endif %}
{% endblock %}