{% extends 'dashboard/base.html' %}
{% load static %}

{% block title %}Edit {{ page_title }} SEO Settings - CMS Dashboard{% endblock %}

{% block content %}
<div class="container-fluid p-0">

    <!-- Header Actions -->
    <div class="mb-5">
        <a href="{% url 'dashboard_seo_list' %}" class="text-decoration-none text-muted fw-semibold d-inline-flex align-items-center gap-2" style="font-size: 13.5px; transition: color 0.2s ease;">
            <i class="fa-solid fa-arrow-left" style="font-size: 11px;"></i> Back to SEO Pages
        </a>
        <h4 class="mt-3 mb-1" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--heading-color);">Edit {{ page_title }} Page SEO</h4>
        <p class="text-muted mb-0" style="font-size: 13.5px;">Configure search engine metadata, Open Graph sharing, canonical indexing, and page favicons.</p>
    </div>

    <!-- Form Container -->
    <div class="row">
        <div class="col-12 col-xl-10">
            <div class="card-custom">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                    <div class="alert alert-danger border-0 shadow-sm" style="border-radius: 12px;">
                        {{ form.non_field_errors }}
                    </div>
                    {% endif %}

                    <!-- General metadata settings card -->
                    <h5 class="mb-4 pb-2" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border-color);">General Search Metadata</h5>
                    
                    <div class="row mb-4">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <label for="{{ form.site_title.id_for_label }}" class="form-label fw-bold mb-1">
                                Site Title Prefix <span class="text-danger">*</span>
                            </label>
                            {{ form.site_title }}
                            <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Used as fallback site name. E.g. "AI Digital Ranker"</div>
                            {% if form.site_title.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.site_title.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label for="{{ form.meta_title.id_for_label }}" class="form-label fw-bold mb-1">
                                Meta Title Tag <span class="text-danger">*</span>
                            </label>
                            {{ form.meta_title }}
                            <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Page title shown in browser tab and search results.</div>
                            {% if form.meta_title.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.meta_title.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.meta_description.id_for_label }}" class="form-label fw-bold mb-1">
                            Meta Description <span class="text-danger">*</span>
                        </label>
                        {{ form.meta_description }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Compelling summary of the page (recommended: 150-160 characters).</div>
                        {% if form.meta_description.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.meta_description.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <label for="{{ form.meta_keywords.id_for_label }}" class="form-label fw-bold mb-1">
                                Meta Keywords
                            </label>
                            {{ form.meta_keywords }}
                            <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Comma-separated keywords. E.g. "AEO, SEO, visibility, search"</div>
                            {% if form.meta_keywords.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.meta_keywords.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label for="{{ form.robots_meta.id_for_label }}" class="form-label fw-bold mb-1">
                                Robots Meta Instructions
                            </label>
                            {{ form.robots_meta }}
                            <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Instructions for search engine crawlers (e.g. index/follow).</div>
                            {% if form.robots_meta.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.robots_meta.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-5">
                        <label for="{{ form.canonical_url.id_for_label }}" class="form-label fw-bold mb-1">
                            Canonical URL (Preferred URL)
                        </label>
                        {{ form.canonical_url }}
                        <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Optional canonical URL representing the primary source. E.g. "https://aidigitalranker.com/about/"</div>
                        {% if form.canonical_url.errors %}
                        <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.canonical_url.errors }}</div>
                        {% endif %}
                    </div>

                    <!-- Open Graph / Social Sharing Card -->
                    <h5 class="mb-4 pb-2" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border-color);">Social Media Settings (Open Graph)</h5>
                    
                    <div class="row mb-4">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <label for="{{ form.og_title.id_for_label }}" class="form-label fw-bold mb-1">
                                Open Graph Title
                            </label>
                            {{ form.og_title }}
                            <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Title shown on social cards. Falls back to meta title if empty.</div>
                            {% if form.og_title.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.og_title.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label for="{{ form.og_description.id_for_label }}" class="form-label fw-bold mb-1">
                                Open Graph Description
                            </label>
                            {{ form.og_description }}
                            <div class="form-text text-muted" style="font-size: 12px; margin-top: 6px;">Description shown on social cards. Falls back to meta description if empty.</div>
                            {% if form.og_description.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.og_description.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row mb-5 pt-3">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <label for="{{ form.og_image.id_for_label }}" class="form-label fw-bold mb-1">
                                Open Graph Image
                            </label>
                            {{ form.og_image }}
                            {% if seo_setting and seo_setting.og_image %}
                            <div class="mt-3">
                                <span class="text-muted d-block mb-2" style="font-size: 12px; font-weight: 600; text-transform: uppercase;">Current Image:</span>
                                <img src="{{ seo_setting.og_image.url }}" alt="" class="img-thumbnail bg-transparent" style="max-height: 140px; object-fit: cover; border-color: var(--border-color);">
                            </div>
                            {% endif %}
                            {% if form.og_image.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.og_image.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label for="{{ form.favicon.id_for_label }}" class="form-label fw-bold mb-1">
                                Favicon Shortcut Icon
                            </label>
                            {{ form.favicon }}
                            {% if seo_setting and seo_setting.favicon %}
                            <div class="mt-3">
                                <span class="text-muted d-block mb-2" style="font-size: 12px; font-weight: 600; text-transform: uppercase;">Current Favicon:</span>
                                <img src="{{ seo_setting.favicon.url }}" alt="" class="img-thumbnail bg-transparent" style="max-height: 50px; width: 50px; object-fit: contain; border-color: var(--border-color);">
                            </div>
                            {% endif %}
                            {% if form.favicon.errors %}
                            <div class="text-danger small mt-1.5"><i class="fa-solid fa-circle-exclamation me-1"></i> {{ form.favicon.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Form Controls Buttons -->
                    <div class="d-flex align-items-center justify-content-between mt-5 pt-4 border-top" style="border-color: var(--border-color) !important;">
                        <a href="{% url 'dashboard_seo_list' %}" class="btn btn-outline-secondary px-4 fw-semibold" style="border-radius: 10px;">Cancel</a>
                        <button type="submit" class="btn btn-primary px-5 fw-semibold py-2.5" style="border-radius: 10px;">
                            <i class="fa-solid fa-save me-2" style="font-size: 14px;"></i> Save SEO Settings
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>

</div>
{% endblock %}