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

{% block extrahead %}
{{ block.super }}
<style>
/* ── Sticky save bar ── */
.sp-sticky-save {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -24px -24px 24px;
}

.sp-sticky-save .sp-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.sp-sticky-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sp-btn-primary {
    background: #6366f1;
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.sp-btn-primary:hover { background: #4f46e5; }

.sp-btn-secondary {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sp-btn-secondary:hover { background: #f1f5f9; color: #374151; text-decoration: none; }
</style>
{% endblock %}

{% block content_title %}
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
    {% if object_id %}
        <span>Edit: {{ original }}</span>
    {% else %}
        <span>{% if add %}Add {% endif %}{{ opts.verbose_name|capfirst }}</span>
    {% endif %}
</div>
{% endblock %}

{% block form_top %}
{{ block.super }}

{% if opts.model_name != "user" %}

<style>
    #jazzy-actions {
        display: none !important;
    }
</style>

{% endif %}
<div class="sp-sticky-save" id="sp-sticky-bar">
    <span class="sp-title">{{ original }}</span>
    <div class="sp-sticky-actions">
        <button type="submit" name="_continue" class="sp-btn-primary">
            Save &amp; continue
        </button>
        <button type="submit" name="_save" class="sp-btn-primary" style="background:#0f172a;">
            Save
        </button>
    </div>
</div>

{% endblock %}

{% block submit_buttons_bottom %}
{{ block.super }}

<script>

    (function() {
        // ── Character counters ──
        function makeCounter(inputId, max, warnAt) {
            const field = document.getElementById(inputId);
            if (!field) return;
            const counter = document.createElement('span');
            counter.className = 'seo-counter';
            field.parentNode.insertBefore(counter, field.nextSibling);

            function update() {
                const len = field.value.length;
                const remaining = max - len;
                counter.textContent = len + ' / ' + max + ' chars';
                counter.className = 'seo-counter';
                if (len > max) counter.className += ' danger';
                else if (len >= warnAt) counter.className += ' warning';
            }

            field.addEventListener('input', update);
            update();
        }

        makeCounter('id_meta_title', 60, 50);
        makeCounter('id_meta_description', 160, 130);

        // ── SERP preview ──
        const titleField = document.getElementById('id_meta_title');
        const descField = document.getElementById('id_meta_description');
        const previewContainer = document.getElementById('sp-seo-preview-container');
        const serpTitle = document.getElementById('serp-title-display');
        const serpDesc = document.getElementById('serp-desc-display');

        if (titleField && descField) {
            previewContainer.style.display = 'block';

            // Insert preview after the SEO fieldset
            const seoFieldset = titleField.closest('fieldset');
            if (seoFieldset) {
                seoFieldset.parentNode.insertBefore(previewContainer, seoFieldset.nextSibling);
                previewContainer.style.display = 'block';
            }

            function updatePreview() {
                const t = titleField.value.trim() || document.title.split('|')[0].trim() || 'Page title';
                const d = descField.value.trim() || 'No description set yet.';
                serpTitle.textContent = t.length > 60 ? t.slice(0, 60) + '…' : t;
                serpDesc.textContent = d.length > 160 ? d.slice(0, 160) + '…' : d;
            }

            titleField.addEventListener('input', updatePreview);
            descField.addEventListener('input', updatePreview);
            updatePreview();
        }

        // ── Sticky save bar: bind buttons to the actual form ──
        const form = document.querySelector('#content-main form');
        if (form) {
            document.querySelectorAll('#sp-sticky-bar button[type="submit"]').forEach(btn => {
                btn.addEventListener('click', function() {
                    const hidden = document.createElement('input');
                    hidden.type = 'hidden';
                    hidden.name = this.name;
                    hidden.value = this.value || '1';
                    form.appendChild(hidden);
                    form.submit();
                });
            });
        }
    })();
   
</script>

{% endblock %}