{% extends "base.html" %}

{% block htmltitle %}
<title>Color Schemes - {{ config.site_name }}</title>
{% endblock %}

{% block content %}
<div style="padding-top: 2em;">
    <h1>Color Schemes</h1>
    <p>Browse all available color schemes. Click "Apply" to switch.</p>

    <div id="gallery-grid"></div>
</div>

<script>
(function() {
    var REGISTRY_URL = '{{ "css/schemes/registry.json"|url }}';

    function createSwatch(colors) {
        var swatch = document.createElement('div');
        swatch.className = 'scheme-swatch';
        for (var i = 0; i < colors.length; i++) {
            var strip = document.createElement('span');
            strip.className = 'swatch-strip';
            strip.style.background = colors[i];
            swatch.appendChild(strip);
        }
        return swatch;
    }

    function createPreviewCard(scheme) {
        var card = document.createElement('div');
        card.className = 'gallery-card';

        var title = document.createElement('h3');
        title.textContent = scheme.name;
        title.style.marginBottom = '0.5em';
        card.appendChild(title);

        var category = document.createElement('span');
        category.className = 'gallery-category';
        category.textContent = scheme.category;
        card.appendChild(category);

        var lightLabel = document.createElement('div');
        lightLabel.textContent = 'Light';
        lightLabel.style.fontSize = '0.8em';
        lightLabel.style.marginTop = '0.5em';
        card.appendChild(lightLabel);
        card.appendChild(createSwatch(scheme.preview.light));

        var darkLabel = document.createElement('div');
        darkLabel.textContent = 'Dark';
        darkLabel.style.fontSize = '0.8em';
        darkLabel.style.marginTop = '0.3em';
        card.appendChild(darkLabel);
        card.appendChild(createSwatch(scheme.preview.dark));

        var btn = document.createElement('button');
        btn.className = 'btn btn-sm btn-primary';
        btn.textContent = 'Apply';
        btn.style.marginTop = '0.5em';
        btn.addEventListener('click', function() {
            window.zkTheme.setScheme(scheme.id);
            window.location.href = '{{ nav.homepage.url|url }}';
        });
        card.appendChild(btn);

        return card;
    }

    function init() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', REGISTRY_URL);
        xhr.onload = function() {
            if (xhr.status !== 200) return;
            var schemes = JSON.parse(xhr.responseText);
            var grid = document.getElementById('gallery-grid');

            var categories = {};
            schemes.forEach(function(s) {
                if (!categories[s.category]) categories[s.category] = [];
                categories[s.category].push(s);
            });

            var order = ['classic', 'nature', 'modern', 'accessibility', 'aesthetic'];
            var labels = {
                classic: 'Classic',
                nature: 'Nature & Earth',
                modern: 'Modern Standards',
                accessibility: 'High Accessibility',
                aesthetic: 'Aesthetic & Vibrant'
            };

            order.forEach(function(cat) {
                if (!categories[cat]) return;
                var heading = document.createElement('h2');
                heading.textContent = labels[cat] || cat;
                heading.style.marginTop = '1.5em';
                grid.appendChild(heading);

                var section = document.createElement('div');
                section.className = 'gallery-section';
                categories[cat].forEach(function(scheme) {
                    section.appendChild(createPreviewCard(scheme));
                });
                grid.appendChild(section);
            });
        };
        xhr.send();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>
{% endblock %}