{% extends 'base.html' %}

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

    <h2 class="mb-4 text-dark">📦 Cruise Packages</h2>

    <!-- Filter Form -->
    <form method="get" class="row mb-3">
        <div class="col-md-3">
            <input type="text" name="title" class="form-control" placeholder="Search by title"
                value="{{ request.GET.title }}">
        </div>

        <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100 bg-gradient-custom">
                🔍 Search
            </button>
        </div>
        <div class="col-md-2">
            <a href="{% url 'master:package_list' %}" class="btn btn-outline-secondary w-100">
                🔄 Reset
            </a>
        </div>
    </form>


    <!-- Package Table -->
    <div class="card user-table-card">

        <div class="card-header d-flex justify-content-between align-items-center bg-gradient-custom">
            <h5 class="mb-0 text-white">📋 Package List</h5>

            <a href="{% url 'master:package_add' %}" class="btn btn-light btn-sm">
                ➕ Add Package
            </a>
        </div>


        <div class="table-responsive">

            <table class="table table-hover text-center table-bordered table-custom mb-0">

                <thead class="table-header-custom">
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>


                <tbody>

                    {% for pkg in packages %}

                    <tr>
                        <td>{{ pkg.id }}</td>
                        <td>{{ pkg.title }}</td>
                        <td>₹ {{ pkg.original_price }}</td>

                        <td>
                            {% if pkg.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-danger">Inactive</span>
                            {% endif %}
                        </td>

                        <td>
                            <div class="d-grid gap-1 d-md-flex justify-content-md-center">

                                <a href="{% url 'master:package_edit' pkg.pk %}" class="btn btn-sm btn-outline-primary">
                                    ✏️ Edit
                                </a>

                                <a href="{% url 'master:package_delete' pkg.pk %}"
                                    class="btn btn-sm btn-outline-danger">
                                    🗑️ Delete
                                </a>

                            </div>
                        </td>
                    </tr>

                    {% empty %}

                    <tr>
                        <td colspan="5">🚫 No packages found.</td>
                    </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>


        <!-- Pagination -->
        {% if page_obj %}

        <div class="card-footer">

            {% if page_obj %}
            <div class="card-footer">
                {% include "includes/_pagination.html" %}
            </div>
            {% endif %}

        </div>

        {% endif %}

    </div>

</div>
{% endblock %}