{% extends "admin/change_form.html" %}
{% load i18n static dash_tags %}

{% block extrahead %}
{{ block.super }}
<style>
    .color-group { margin-bottom: 1.75rem; }
    .color-group-title {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-base-content);
        opacity: 0.45;
        margin-bottom: 0.625rem;
        padding-bottom: 0.375rem;
        border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    }
    .color-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.4rem 0.75rem;
        border-radius: 0.5rem;
        transition: background 0.15s ease;
    }
    .color-row:hover {
        background: color-mix(in oklab, var(--color-base-200) 25%, transparent);
    }
    .color-swatch {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
        flex-shrink: 0;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.15s ease;
    }
    .color-swatch:hover { transform: scale(1.12); }
    .color-swatch input[type="color"] {
        width: 100%; height: 100%;
        border: none; padding: 0; cursor: pointer;
        background: none; display: block;
    }
    .color-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    .color-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 0.5rem; }
    .color-label {
        font-size: 0.8125rem;
        font-weight: 500;
        min-width: 9rem;
        color: var(--color-base-content);
    }
    .color-help {
        font-size: 0.6875rem;
        color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
        display: block;
        margin-top: 0.125rem;
        font-weight: 400;
    }
    .color-input-wrap { flex: 1; max-width: 14rem; }
    .color-input-wrap input[type="text"] {
        width: 100%;
        padding: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
        background: color-mix(in oklab, var(--color-base-100) 75%, transparent);
        color: var(--color-base-content);
        font-size: 0.8125rem;
        font-family: "SF Mono", "Fira Code", "Consolas", monospace;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        outline: none;
    }
    .color-input-wrap input[type="text"]:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 15%, transparent) !important;
    }
    .theme-card {
        padding: 1.25rem;
        border-radius: 0.75rem;
        background: color-mix(in oklab, var(--color-base-200) 25%, transparent);
        border: 1px solid color-mix(in oklab, var(--color-base-content) 6%, transparent);
        margin-bottom: 1.5rem;
    }
    .theme-card h2 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.25rem;
        color: var(--color-base-content);
    }
    .theme-card p {
        font-size: 0.8125rem;
        margin: 0;
        color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
    }
    .reset-btn {
        padding: 0.375rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid color-mix(in oklab, var(--color-error) 30%, transparent);
        background: transparent;
        color: var(--color-error);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .reset-btn:hover {
        background: color-mix(in oklab, var(--color-error) 10%, transparent);
        border-color: var(--color-error);
    }
    .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
</style>
{% endblock %}

{% block after_field_sets %}
<div class="color-picker-section">
    <div class="theme-card">
        <h2>{% trans "Custom Theme Colors" %}</h2>
        <p>{% trans "Override any color to match your brand identity. Colors you don't set will use the active theme's defaults." %}</p>
    </div>

    {% for group_name, group_keys in color_groups %}
    <div class="color-group">
        <div class="color-group-title">{{ group_name }}</div>
        {% for key in group_keys %}
            {% with val=color_initial|get_item:key %}
            <div class="color-row">
                <div class="color-swatch">
                    <input type="color" class="color-picker"
                           data-target="{{ key }}"
                           value="{{ val|default:'#808080' }}">
                </div>
                <div class="color-label">
                    {% for ck, cl, ch in color_fields %}
                        {% if ck == key %}{{ cl }}{% endif %}
                    {% endfor %}
                    <span class="color-help">
                    {% for ck, cl, ch in color_fields %}
                        {% if ck == key %}{{ ch }}{% endif %}
                    {% endfor %}
                    </span>
                </div>
                <div class="color-input-wrap">
                    <input type="text" name="{{ key }}" id="color-{{ key|slugify }}"
                           class="color-text-input" value="{{ val }}" placeholder="#000000">
                </div>
            </div>
            {% endwith %}
        {% endfor %}
    </div>
    {% endfor %}

    <div class="theme-card">
        <div class="flex-between">
            <div>
                <h2>{% trans "Tip" %}</h2>
                <p>{% trans "For best results, set at least primary, secondary, base-100, and base-content." %}</p>
            </div>
            <button type="submit" name="_reset" class="reset-btn"
                    onclick="return confirm('{% trans "Reset all custom colors?" %}')">
                {% trans "Reset to Default" %}
            </button>
        </div>
    </div>
</div>

<script>
(function () {
    var pickers = document.querySelectorAll('.color-picker');
    pickers.forEach(function (picker) {
        var targetId = picker.getAttribute('data-target');
        var textInput = document.getElementById('color-' + targetId);
        if (textInput) {
            picker.addEventListener('input', function () {
                textInput.value = this.value;
            });
        }
    });
    var textInputs = document.querySelectorAll('.color-text-input');
    textInputs.forEach(function (input) {
        var id = input.getAttribute('id');
        var key = id ? id.replace('color-', '') : '';
        var picker = document.querySelector('.color-picker[data-target="' + key + '"]');
        if (picker) {
            input.addEventListener('input', function () {
                if (/^#[0-9a-fA-F]{6}$/.test(this.value)) {
                    picker.value = this.value;
                }
            });
            if (/^#[0-9a-fA-F]{6}$/.test(input.value)) {
                picker.value = input.value;
            }
        }
    });
})();
</script>
{% endblock %}