<h2 class="page-title">
    <span class="title">{{ 'GANTRY5_PLATFORM_ATOMS'|trans }}</span>
</h2>

<div id="atoms"{{ overrideable ? ' class="atoms-override"' }}>
    <ul class="atoms-picker">
        {%- for atom, label in atoms -%}
        <li data-atom-type="{{ atom }}"
            data-atom-picked="{{ { 'title': label, 'type': atom, 'attributes': gantry.config.get('particles.' ~ atom) } |json_encode|e('html_attr')}}"
        >
            <i class="fa fa-fw fa-hand-stop-o drag-indicator"></i>
            <span class="atom-title">{{ label }}</span>
            <a href="{{ gantry.route('configurations', page_id, 'page', 'atoms', atom)|e }}" class="atom-settings config-cog">
                <i aria-label="{{ 'GANTRY5_PLATFORM_ATOMS_CONFIGURE_SETTINGS'|trans }}" class="fa fa-cog"></i>
            </a>
        </li>
        {%- endfor -%}
    </ul>

    <div class="card settings-block">
        {% set list = data.get('page.head.atoms') ?? defaults.get('page.head.atoms') %}
        {% if list %}
                <ul class="atoms-list">
                {%- for atom in list -%}
                    {% set classes = (atom.attributes.enabled ? '' : 'atom-disabled') ~ (atom.inherit.outline ? ' g-inheriting' : '') %}
                    {% set inheriting = atom.inherit.outline ? ' g-inheriting="" data-tip="'
                    ~ 'GANTRY5_PLATFORM_INHERITING_FROM_X'|trans('<strong>' ~ gantry.outlines.title(atom.inherit.outline) ~ '</strong>') ~'<br />ID: ' ~ atom.inherit.atom ~ '<br />Replace: ' ~ atom.inherit.include|join(', ') ~ '"' %}
                    {% set title = atom.attributes.enabled ? '' : ' title="' ~ 'GANTRY5_PLATFORM_ATOMS_DISABLED_DESC'|trans ~ '"' %}
                    <li data-atom-picked="{{ atom|json_encode|e('html_attr') }}"{{ (classes ? ' class="' ~ classes|trim ~ '"')|raw }}{{ inheriting|raw }}{{ title|raw }} data-atom-type="{{ atom.type }}">
                        <i class="fa fa-fw fa-hand-stop-o drag-indicator"></i>
                        <span class="atom-title">{{- atom.title -}}</span>
                        <a href="{{ gantry.route('configurations', page_id, 'page', 'atoms', atom.type) }}" class="atom-settings config-cog">
                            <i aria-label="Configure Atom Settings" class="fa fa-cog"></i>
                        </a>
                    </li>
                {%- endfor -%}
                </ul>
        {% else %}
            <ul class="atoms-list"></ul>
        {% endif %}

        {% if overrideable %}
            {% set prefix = 'page.head.' %}
            {% include 'forms/override.html.twig' with {'scope': prefix, 'name': 'atoms', 'has_value': data.get(prefix ~ 'atoms') is not null, 'field': {'label': 'Enabled of the field Atoms' }} %}
        {% endif %}
    </div>

    {# Deprecated Atoms from Layout (< 5.2.0) #}
    {% if atoms_deprecated is not null and atoms_deprecated|length and data.get('page.head.atoms') %}
        <p class="alert alert-notice">{{ 'GANTRY5_PLATFORM_ATOMS_DEPRECATED_MESSAGE'|trans }}</p>
    {% endif %}

    <div id="trash" data-atoms-erase=""><div class="trash-zone">&times;</div><span>{{ 'GANTRY5_PLATFORM_DROP_DELETE'|trans }}</span></div>
    {#{{ dump(atoms_deprecated|json_encode) }}#}
</div>