{% extends 'LayoutMain.html' %}
{% load static %}
{% block title %}Dashboard - My Django Project{% endblock %}
{% block content %}
<!-- ======= Header ======= -->
<div>


    <!-- ======= Sidebar ======= -->
    <!-- End Sidebar-->

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

        <div class="pagetitle">
            <nav>
                <ol class="breadcrumb"></ol>
                <a href="http://"><i class="far fa-comments">|</i></a>
                <span><b>Pages</b></span>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section profile">

            <div class="con content">

                <div class="usergroup card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between">
                        <span>Pages List</span>

                        <a href="{% url 'add_page' %}" class="btn btn-light btn-sm">
                            Add New
                        </a>
                    </div>
                    <div class="ca card-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Sl.no</th>
                                    <th>Page Name</th>
                                    <th>Title</th>
                                    <th>URL Slug</th>
                                    <th>Position</th>
                                    <th>Show in Menu</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for page in pages %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ page.page_name }}</td>
                                    <td>{{ page.title }}</td>
                                    <td>{{ page.slug }}</td>
                                    <td>{{ page.get_position_display }}</td>
                                    <td>
                                        <a href="{% url 'toggle_page_status' page.id %}" title="{% if page.show_in_menu %}Click to deactivate{% else %}Click to activate{% endif %}">

                                        {% if page.show_in_menu %}
                                            <i class="fas fa-check text-success" style="font-size: 1.2rem;"></i>
                                        {% else %}
                                             <i class="fas fa-times text-danger" style="font-size: 1.2rem;"></i>
                                        {% endif %}
                                         </a>
                                    </td>
                                    <td><a href="{% url 'edit_page' page.id %}" class="text-primary" title="Edit"><i class="fas fa-edit"></i></a></td>
                                    <td>
                                        <a href="{% url 'delete_page' page.id %}" class="text-danger" title="Delete"
                                           onclick="return confirmDelete(this.href, '{{ page.title|escapejs }}');">🗑</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="8" class="text-center text-muted">No pages added yet. Click "Add New" to create one.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </section>

    </main><!-- End #main -->

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header bg-danger text-white">
            <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="$(this).closest('.modal').modal('hide');"></button>
          </div>
          <div class="modal-body">
            Are you sure you want to delete page: <strong id="deletePageTitle"></strong>?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="$(this).closest('.modal').modal('hide');">Cancel</button>
            <a id="confirmDeleteBtn" href="#" class="btn btn-danger" onclick="window.location.href=this.href; return false;">Yes, Delete</a>
          </div>
        </div>
      </div>
    </div>

    <script>
    function confirmDelete(url, title) {
        document.getElementById('deletePageTitle').textContent = title;
        document.getElementById('confirmDeleteBtn').setAttribute('href', url);
        $('#deleteModal').modal('show');
        return false; // prevent link from navigating immediately
    }
    </script>

    <!-- ======= Footer ======= -->

    {% endblock %}