{% set designModule = environment.getModule('tables') %}
{% set designFields = designModule.getClassicDesignFields() %}
{% set designPresets = designModule.getClassicDesignPaletteLibrary() %}
{% set designFreeCount = 0 %}
{% set designCollections = [] %}
{% for preset in designPresets %}
    {% if not preset.pro %}{% set designFreeCount = designFreeCount + 1 %}{% endif %}
    {% if preset.collection not in designCollections %}{% set designCollections = designCollections|merge([preset.collection]) %}{% endif %}
{% endfor %}
{% set designProCount = (designPresets|length) - designFreeCount %}
<div id="stb-classic-design-panel" class="stb-design-panel" data-presets="{{ designPresets|json_encode|e('html_attr') }}" data-fields="{{ designFields|json_encode|e('html_attr') }}">
    <div class="stb-design-heading">
        <div><h4>{{ environment.translate('Style palettes') }}</h4></div>
    </div>
    <p class="stb-design-intro">{{ environment.translate('One click for your table, filters and buttons. Every color stays editable.') }}</p>
    <details class="stb-design-palette-list" open><summary>{{ environment.translate('Browse palettes') }} <small>{{ designFreeCount }} FREE · {{ designProCount }} PRO</small></summary>
    <div class="stb-palette-tools" role="search" aria-label="{{ environment.translate('Palette library') }}">
        <div class="stb-palette-tiers" role="group" aria-label="{{ environment.translate('Palette availability') }}" hidden>
            <button type="button" data-palette-tier="all" aria-pressed="true">{{ environment.translate('All') }}</button>
            <button type="button" data-palette-tier="free" aria-pressed="false">FREE</button>
            <button type="button" data-palette-tier="pro" aria-pressed="false">PRO</button>
        </div>
        <input type="search" id="stb-palette-search" placeholder="{{ environment.translate('Find a palette…') }}" aria-label="{{ environment.translate('Find a palette by name, collection, light or dark') }}" autocomplete="off" />
        <select id="stb-palette-collection" aria-label="{{ environment.translate('Palette collection or mood') }}">
            <option value="">{{ environment.translate('All collections') }}</option>
            <optgroup label="{{ environment.translate('Mood') }}"><option value="tone:light">{{ environment.translate('Light palettes') }}</option><option value="tone:dark">{{ environment.translate('Dark palettes') }}</option></optgroup>
            <optgroup label="{{ environment.translate('Collection') }}">{% for collection in designCollections %}<option value="{{ collection }}">{{ environment.translate(collection) }}</option>{% endfor %}</optgroup>
        </select>
        <div class="stb-palette-result-bar"><span id="stb-palette-results" role="status" aria-live="polite" data-label="{{ environment.translate('palettes') }}"></span><button type="button" id="stb-palette-clear" hidden>{{ environment.translate('Clear filters') }}</button></div>
    </div>
    <div class="stb-design-gallery" role="group" aria-label="{{ environment.translate('Classic table style presets') }}">
        {% for key, preset in designPresets %}
            <button type="button" class="stb-design-card{{ preset.pro and not environment.isPro ? ' stb-design-locked' : '' }}" data-locked="{{ preset.pro and not environment.isPro ? '1' : '0' }}" data-preset="{{ key }}" data-tier="{{ preset.pro ? 'pro' : 'free' }}" data-collection="{{ preset.collection }}" data-tone="{{ preset.tone }}" aria-pressed="false" title="{{ environment.translate(preset.description) }}{{ preset.pro and not environment.isPro ? ' · ' ~ environment.translate('Activate PRO to apply this palette') : '' }}" style="--card-head:{{ preset.styles.headerBackgroundColor }};--card-head-text:{{ preset.styles.headerFontColor }};--card-body:{{ preset.styles.cellBackgroundColor }};--card-text:{{ preset.styles.cellFontColor }};--card-stripe:{{ preset.values.stripeBg }};--card-accent:{{ preset.values.buttonBg }};--card-radius:{{ preset.values.radius }}px;--card-control-radius:{{ preset.values.controlRadius }}px;">
                <span class="stb-design-mini" aria-hidden="true"><span class="stb-mini-tools"><i></i><b></b></span><span class="stb-mini-head"><i></i><i></i><i></i></span><span class="stb-mini-row"><i></i><i></i><i></i></span><span class="stb-mini-row"><i></i><i></i><i></i></span><span class="stb-mini-row"><i></i><i></i><i></i></span><span class="stb-mini-pages"><i></i><b></b><i></i></span></span>
                <span class="stb-design-card-label">{{ environment.translate(preset.name) }}<small>{{ preset.pro ? 'PRO' : 'FREE' }}</small></span>
                <span class="stb-design-card-collection">{{ environment.translate(preset.collection) }}</span>
            </button>
        {% endfor %}
    </div>
    <p class="stb-palette-empty" hidden>{{ environment.translate('No palettes found. Try another name or collection.') }}</p>
    </details>
    <div class="stb-design-actions"><span id="stb-design-status" role="status" aria-live="polite" data-current="{{ environment.translate('Current appearance') }}" data-custom="{{ environment.translate('Custom appearance') }}" data-applied="{{ environment.translate('Applied') }}" data-restored="{{ environment.translate('Previous appearance restored') }}" data-locked="{{ environment.translate('Activate PRO to apply this palette') }}">{{ environment.translate('Current appearance') }}</span><button type="button" class="button" id="stb-design-undo" disabled>{{ environment.translate('Undo preset') }}</button></div>
    <input type="hidden" name="classicDesign[preset]" value="{{ table.settings.classicDesign.preset|default('') }}" data-preview-not-redraw="1" />
    {% include '@tables/partials/classicLegacyStyles.twig' %}
    <label class="stb-design-enable" for="stb-classic-design-enabled"><input type="checkbox" id="stb-classic-design-enabled" name="classicDesign[enabled]" value="on" data-preview-not-redraw="1" {% if table.settings.classicDesign.enabled|default('') == 'on' %}checked{% endif %} />{{ environment.translate('Enable extended styling') }}</label>
    <p class="stb-design-hint">{{ environment.translate('Styles stay as saved until you apply a palette. Blank basic fields inherit your theme. Cell formatting and conditional rules keep priority.') }}</p>
    <div class="stb-design-fields" {% if table.settings.classicDesign.enabled|default('') != 'on' %}hidden{% endif %}>
        {% set lastGroup = '' %}
        {% for key, field in designFields %}
            {% if field.group != lastGroup %}
                {% if lastGroup != '' %}</div></details>{% endif %}
                <details class="stb-design-group"><summary>{{ environment.translate(field.group) }}</summary><div class="stb-design-field-grid">
                {% set lastGroup = field.group %}
            {% endif %}
            <div class="stb-design-field">
                <label for="stb-design-{{ key }}">{{ environment.translate(field.label) }}</label>
                {% set value = attribute(table.settings.classicDesign, key)|default(field.default) %}
                {% if field.type == 'color' %}
                    <div class="color-settings-wrapper"><div class="color-picker-wrapper"><div class="color-picker-preview" style="background-color:{{ value }}"></div></div><input id="stb-design-{{ key }}" type="text" class="color-input" name="classicDesign[{{ key }}]" value="{{ value }}" data-preview-not-redraw="1" /></div>
                {% elseif field.type == 'weight' %}
                    <select id="stb-design-{{ key }}" name="classicDesign[{{ key }}]" data-preview-not-redraw="1">{% for weight in ['400', '500', '600', '700'] %}<option value="{{ weight }}" {% if value == weight %}selected{% endif %}>{{ weight }}</option>{% endfor %}</select>
                {% else %}
                    <div><input id="stb-design-{{ key }}" type="number" name="classicDesign[{{ key }}]" value="{{ value }}" min="{{ field.min }}" max="{{ field.max }}" step="{{ key == 'lineHeight' ? '0.1' : '1' }}" data-preview-not-redraw="1" />{% if key != 'lineHeight' %}<span class="stb-design-unit">px</span>{% endif %}</div>
                {% endif %}
            </div>
        {% endfor %}
        </div></details>
    </div>
</div>