{% extends 'dashboard/base_dashboard.html' %}

{% load static %}

{% load crispy_forms_tags %}
{% block script_css %}

{% endblock script_css %}

{% block main_container %}
    <div class="container">
    <div class="page-inner">
        <div class="page-header">
            <h3 class="fw-bold mb-3">DASHBOARD</h3>
            <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                    <a href="{% url 'dashboard' %}">
                        <i class="icon-home"></i>
                    </a>
                </li>

                {% for breadcrumb in breadcrumbs %}
                    <li class="separator">
                        <i class="icon-arrow-right"></i>
                    </li>
                    <li class="nav-item">
                        {% if breadcrumb.url != '#' %}
                            <a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
                        {% else %}
                            <span>{{ breadcrumb.title }}</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>

        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">{{ page_title }}</div>
                    </div>
                    <div class="card-body">
                         {% if form.errors %}
                           <div>
                               <p>Please correct the following errors:</p>
                               <ul>
                                   {% for field in form %}
                                       {% for error in field.errors %}
                                           <li>{{ field.label }}: {{ error }}</li>
                                       {% endfor %}
                                   {% endfor %}
                               </ul>
                           </div>
                         {% endif %}

                        <form method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ form|crispy }}

                            <div class="card-action">
                                <button type="submit" class="btn btn-success">Submit</button>
                            </div>
                            <script>
                                // Auto-generate slug on title change
                                document.getElementById("id_name").addEventListener("input", function() {
                                    const name = this.value.trim();
                                    const slug = name.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
                                    document.getElementById("id_slug").value = slug;
                                });
                            </script>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock main_container %}

{% block script_js %}

{% endblock script_js %}