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

{% block gantry %}
{% set labels = {collapse: 'GANTRY5_PLATFORM_COLLAPSE'|trans, expand: 'GANTRY5_PLATFORM_EXPAND'|trans} %}

<div id="styles">
    {% set stored_data = get_cookie('g5-collapsed')|default('{}')|json_decode %}
    <form method="post">
        <span class="float-right">
            <a href="{{ gantry.route('configurations', configuration, 'styles/compile') }}" class="button button-secondary" data-ajax-action><i class="fa fa-fw fa-tasks"></i> <span>{{ 'GANTRY5_PLATFORM_RECOMPILE_CSS'|trans }}</span></a>
            <button type="submit" class="button button-primary button-save" data-save="{{ 'GANTRY5_PLATFORM_STYLES'|trans }}"><i class="fa fa-fw fa-check"></i> <span>{{ 'GANTRY5_PLATFORM_SAVE_STYLES'|trans }}</span></button>
        </span>

        {% set presets = gantry.theme.presets %}
        {% if presets.count() %}
        {% set collapsed = attribute(stored_data, 'swatches') %}
        <h2 class="page-title{{ collapsed ? ' g-collapsed-main' : '' }}" data-g-collapse="{{ labels|merge({collapsed: collapsed ? true : false, id: 'swatches', target: '~ .swatches-container' })|json_encode|e('html_attr') }}" data-g-collapse-id="swatches">
            <span class="title">{{ 'GANTRY5_PLATFORM_STYLES'|trans }}</span>
            <span class="g-collapse g-tooltip" data-title="{{ collapsed ? labels.expand : labels.collapse }}"><i class="fa fa-fw  fa-caret-up"></i></span>
        </h2>

        <div class="swatches-container{{ collapsed ? ' g-collapsed' : '' }}">
            <div class="swatches-block">
                {% set presetKey = gantry.config.get('styles.preset') %}

                <ul class="g-grid">
                    {% for key, preset in presets %}
                        {% set presetKey = not presetKey ? key : presetKey %}
                        {% set counter = 0 %}
                        <li class="g-block{{ presetKey == key ? ' g-preset-match' }}">
                            <a href="#" class="swatch" data-g-styles="{{ presets.def(key ~ '.styles.preset', key).flatten(key ~ '.styles', '][', 'styles')|json_encode|escape('html_attr') }}">
                                <img src="{{ url(preset.image)|default(url('gantry-admin://images/placeholder.png'))|e }}" class="swatch-image" />
                                {% if preset.colors|length %}
                                    {% set stop = (100 / preset.colors|length)|number_format(3, '.') %}
                                    <span class="swatch-colors"
                                            {# required attribute structures #}
                                          style="background: linear-gradient(to right
                                          {% for color in preset.colors -%}
                                              ,{{- color }} {{ counter -}}%, {{- color }} {{ counter + stop -}}%
                                          {% set counter = counter + stop %}
                            {%- endfor %})">
                    </span>
                                {% endif %}
                                <span class="swatch-preview"><i class="fa fa-fw fa-eye"></i></span>
                                <span class="swatch-matched"><i class="fa fa-fw fa-star"></i></span>
                            </a>
                            <span class="swatch-description"><span class="swatch-title-matched"><i class="fa fa-fw fa-star"></i></span> {{ preset.description }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <input type="hidden" name="styles[preset]" value="{{ presetKey }}" />
        {% endif %}

        {% for group, list in blocks %}
        <h2>{{ group|capitalize }} {{ 'GANTRY5_PLATFORM_STYLES'|trans }}</h2>

        <div class="g-filter-actions">
            <div class="g-panel-filters" data-g-global-filter="">
                <div class="search settings-block">
                    <input type="text" data-g-collapse-filter placeholder="{{ 'GANTRY5_PLATFORM_FILTER'|trans }} {{ group|capitalize }}...">
                    <i class="fa fa-fw fa-search"></i>
                </div>
                <div class="button" data-g-collapse-all="true"><i class="fa fa-fw fa-toggle-up"></i> {{ 'GANTRY5_PLATFORM_COLLAPSE_ALL'|trans }}</div>
                <div class="button" data-g-collapse-all="false"><i class="fa fa-fw fa-toggle-down"></i> {{ 'GANTRY5_PLATFORM_EXPAND_ALL'|trans }}</div>
            </div>
        </div>

        <div id="styles" class="cards-wrapper g-grid">

            {% for id, block in list %}
                {% set prefix = 'styles.' ~ id ~ '.' %}
                {% set collapsed = block.form.collapsed or attribute(stored_data, prefix) %}
                <div class="card settings-block{{ collapsed ? ' g-collapsed' : '' }}">
                    <h4 data-g-collapse="{{ labels|merge({collapsed: collapsed ? true : false, id: prefix, target: '~ .inner-params' })|json_encode|e('html_attr') }}" data-g-collapse-id="{{ prefix }}">
                        <span class="g-collapse g-tooltip" data-title="{{ collapsed ? labels.expand : labels.collapse }}"><i class="fa fa-fw  fa-caret-up"></i></span>
                        <span class="g-title">{{ block.name }}</span>
                    </h4>
                    <div class="inner-params">
                        {% include 'forms/fields.html.twig' with {'overrideable': overrideable, 'blueprints': block.form, 'data': gantry.config} %}
                    </div>
                </div>
            {% endfor %}
        </div>
        {% endfor %}

        <div class="g-footer-actions">
            <span class="float-right">
                <a href="{{ gantry.route('configurations', configuration, 'styles/compile') }}" class="button button-secondary" data-ajax-action><i class="fa fa-fw fa-tasks"></i> <span>{{ 'GANTRY5_PLATFORM_RECOMPILE_CSS'|trans }}</span></a>
                <button type="submit" class="button button-primary button-save" data-save="{{ 'GANTRY5_PLATFORM_STYLES'|trans }}"><i class="fa fa-fw fa-check"></i> <span>{{ 'GANTRY5_PLATFORM_SAVE_STYLES'|trans }}</span></button>
            </span>
        </div>
    </form>
</div>
{% endblock %}
