{% extends 'base.html' %}

{% block content %}
<div class="container-fluid">
    <h2 class="mb-4 text-dark">🏙️ Open Position</h2>

    <!-- Filter Form -->
    <form method="get" class="row mb-3">
        <!-- <div class="col-md-3">
            <input type="text" name="name" class="form-control" placeholder="Search by name" value="{{ request.GET.name }}">
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100 bg-gradient-custom">🔍 Search</button>
        </div> -->
    </form>

    <!-- City 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">📋 Open Position List</h5>
            <a href="{% url 'city:city_add' %}" class="btn btn-light btn-sm">➕ Add Position</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>Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for city in cities %}
                    <tr>
                        <td>{{ city.id }}</td>
                        <td>{{ city.name }}</td>
                        <td>
                            <div class="d-grid gap-1 d-md-flex justify-content-md-center">
                                <a href="{% url 'city:city_edit' city.pk %}" class="btn btn-sm btn-outline-primary">✏️ Edit</a>
                                <a href="{% url 'city:city_delete' city.pk %}" class="btn btn-sm btn-outline-danger">🗑️ Delete</a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="3">🚫 No cities found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if page_obj %}
        <div class="card-footer">
            <nav>
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link bg-gradient-custom" href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">« Previous</a>
                    </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                    <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                        <a class="page-link bg-gradient-custom" href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a>
                    </li>
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link bg-gradient-custom" href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">Next »</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}