{% extends 'ndr_core/admin_views/base.html' %}
{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}

{% block extra_css %}
    {% if background_form %}
        {% include 'ndr_core/admin_views/includes/image_picker_init_css.html' %}
    {% endif %}
{% endblock %}

{% block page_js %}
    {% if background_form %}
        {% include 'ndr_core/admin_views/includes/image_picker_init_js.html' %}
    {% endif %}
{% endblock %}

{% block content %}
    <h2><i class="fa-regular fa-file"></i> Manage Pages</h2>

    <!-- Options Bar -->
    <div class="d-flex flex-wrap align-items-center bg-light border rounded p-2 mb-3">
        <div class="me-auto">
            <a href="{% url 'ndr_core:configure_pages' %}" class="btn btn-sm btn-primary m-1{% if not footer_form and not not_found_form %} active{% endif %}">
                <i class="fa-regular fa-list"></i> Manage Pages
            </a>
            <a href="{% url 'ndr_core:create_page' %}" class="btn btn-sm btn-secondary m-1">
                <i class="fa-regular fa-file"></i> Create Page
            </a>
            <a href="{% url 'ndr_core:bulk_create_pages' %}" class="btn btn-sm btn-secondary m-1">
                <i class="fa-regular fa-copy"></i> Bulk Create
            </a>
            <a href="{% url 'ndr_core:page_footer' %}" class="btn btn-sm btn-primary m-1{% if footer_form %} active{% endif %}">
                <i class="fa-regular fa-window-minimize"></i> Manage Footer
            </a>
            <a href="{% url 'ndr_core:page_background' %}" class="btn btn-sm btn-primary m-1{% if background_form %} active{% endif %}">
                <i class="fa-regular fa-image"></i> Manage Background
            </a>
        </div>
        <div>
            <a href="{% url 'ndr_core:help_chapter' 'pages' %}" class="btn btn-sm btn-outline-secondary m-1">
                <i class="fa-regular fa-circle-info"></i> Help
            </a>
        </div>
    </div>

    {% if not footer_form and not not_found_form and not background_form %}
        <div class="card bg-light mb-3">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 25%;">Page Name</th>
                                <th style="width: 20%;">Navigation Label</th>
                                <th style="width: 15%;">Type</th>
                                <th style="width: 20%;">URL</th>
                                <th style="width: 20%;" class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for page in pages %}
                                <tr>
                                    <td>
                                        <i class="fa-regular fa-file"></i>
                                        <strong>{{ page.name }}</strong>
                                    </td>
                                    <td>{{ page.label }}</td>
                                    <td><span class="badge badge-secondary">{{ page.get_page_type_display }}</span></td>
                                    <td><small><code>{{ page.url }}</code></small></td>
                                    <td class="text-right">
                                        <div style="white-space: nowrap;">
                                            {% if not forloop.first %}
                                                <a href="{% url 'ndr_core:move_page_up' page.pk %}" class="btn btn-sm btn-secondary" title="Move Up">
                                                    <i class="fa-regular fa-arrow-up"></i>
                                                </a>
                                            {% endif %}
                                            <a href="{% url 'ndr_core:edit_page' page.pk %}" class="btn btn-sm btn-secondary" title="Edit">
                                                <i class="fa-regular fa-pen-to-square"></i>
                                            </a>
                                            {% if not page.view_name == 'index' %}
                                                <a href="{% url 'ndr_core:delete_page' page.pk %}" class="btn btn-sm btn-danger" title="Delete">
                                                    <i class="fa-regular fa-delete-left"></i>
                                                </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% for sub_page in page.ndrcorepage_set.all|dictsort:"index" %}
                                    <tr class="table-active">
                                        <td class="ps-5">
                                            <i class="fa-regular fa-level-down-alt"></i>
                                            {{ sub_page.name }}
                                        </td>
                                        <td>{{ page.label }} → {{ sub_page.label }}</td>
                                        <td><span class="badge badge-light">{{ sub_page.get_page_type_display }}</span></td>
                                        <td><small><code>{{ sub_page.url }}</code></small></td>
                                        <td class="text-right">
                                            <div style="white-space: nowrap;">
                                                {% if not forloop.first %}
                                                    <a href="{% url 'ndr_core:move_page_up' sub_page.pk %}" class="btn btn-sm btn-secondary" title="Move Up">
                                                        <i class="fa-regular fa-arrow-up"></i>
                                                    </a>
                                                {% endif %}
                                                <a href="{% url 'ndr_core:edit_page' sub_page.pk %}" class="btn btn-sm btn-secondary" title="Edit">
                                                    <i class="fa-regular fa-pen-to-square"></i>
                                                </a>
                                                {% if not sub_page.view_name == 'index' %}
                                                    <a href="{% url 'ndr_core:delete_page' sub_page.pk %}" class="btn btn-sm btn-danger" title="Delete">
                                                        <i class="fa-regular fa-delete-left"></i>
                                                    </a>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}

    {% if footer_form %}
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Manage Page Footer</h5>
                {% crispy footer_form %}
            </div>
        </div>
    {% endif %}

    {% if background_form %}
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Manage Default Background</h5>
                {% crispy background_form %}
            </div>
        </div>
    {% endif %}

    {% if not_found_form %}
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Manage 404 Page</h5>
                {% crispy not_found_form %}
            </div>
        </div>
    {% endif %}

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
        Your NDR Website consists of multiple pages with a type. You can configure them here.
    </div>
{% endblock %}