{% extends 'LayoutMain.html' %}
{% load static %}
{% load widget_tweaks %}

{% block title %}Add Page{% endblock %}

{% block content %}

<main id="main" class="main">

    <div class="pagetitle">
        <h1>Add Page</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
                <li class="breadcrumb-item active">Add Page</li>
            </ol>
        </nav>
    </div>

    <section class="section">
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Add Page</h5>
                        <a href="{% url 'page_view' %}" class="btn btn-light btn-sm">
                            <i class="bi bi-list"></i> List All
                        </a>
                    </div>

                    <div class="card-body pt-4">

                        <form method="post" enctype="multipart/form-data" action="{% url 'add_page' %}" novalidate>
                            {% csrf_token %}

                            {% if form.errors %}
                            <div class="alert alert-danger">
                                <strong>Please fix the following errors before submitting:</strong>
                                <ul class="mb-0 mt-1">
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <li><b>{{ field.label }}:</b> {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                                </ul>
                            </div>
                            {% endif %}

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Choose Position</label>
                                    {{ form.position|add_class:"form-select" }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Choose Parent</label>
                                    {{ form.parent|add_class:"form-select" }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Page Name</label>
                                    {{ form.page_name|add_class:"form-control" }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Title</label>
                                    {{ form.title|add_class:"form-control" }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">URL Slug</label>
                                    {{ form.slug|add_class:"form-control" }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Nav Priority <small class="text-muted">(lower = appears first)</small></label>
                                    {{ form.priority|add_class:"form-control" }}
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="form-check form-switch mt-2">
                                        {{ form.show_in_menu }}
                                        <label class="form-check-label" for="{{ form.show_in_menu.id_for_label }}">
                                            Show in Main Navigation Menu
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3 align-items-start">
                                <div class="col-md-12">
                                    <label class="form-label">Description</label>
                                    <div class="ckeditor-wrapper">
                                        {{ form.description }}
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <h5 class="text-center text-primary mb-3">
                                SEARCH ENGINE OPTIMIZATION
                            </h5>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Meta Title</label>
                                    {{ form.meta_title|add_class:"form-control" }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Meta Keywords</label>
                                    {{ form.meta_keywords|add_class:"form-control" }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Meta Description</label>
                                    {{ form.meta_description|add_class:"form-control" }}
                                </div>
                            </div>

                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary px-5">
                                    Submit
                                </button>
                            </div>

                         
                            {{ form.media }}

                        </form>

                    </div>
                </div>

            </div>
        </div>
    </section>

</main>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const titleInput = document.getElementById('id_title');
        const slugInput = document.getElementById('id_slug');
        
        if (titleInput && slugInput) {
            // Check if slug is already filled out (e.g. going back or editing)
            let slugModifiedByUser = slugInput.value.trim() !== '';

            slugInput.addEventListener('input', function() {
                slugModifiedByUser = true;
            });

            titleInput.addEventListener('input', function() {
                if (!slugModifiedByUser) {
                    let slug = titleInput.value.toLowerCase()
                        .replace(/[^\w\s-]/g, '') // Remove non-word chars
                        .replace(/[\s_-]+/g, '-') // Replace spaces with dashes
                        .replace(/^-+|-+$/g, ''); // Trim dashes
                    slugInput.value = slug;
                }
            });
        }
    });
</script>

{% endblock %}