eventify_backend/templates/events/event_list.html

{% extends 'base.html' %}
{% block content %}
    <div class="row mb-3">
        <div class="col-md-6">
            <h3>Events</h3>
        </div>
        <div class="col-md-4">
             <form method="get" action="." class="d-flex">
                <input class="form-control me-2" type="search" name="q" placeholder="Search events..." aria-label="Search" value="{{ request.GET.q }}">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
        <div class="col-md-2 text-end">
            <a class="btn btn-success" href="{% url 'events:event_add' %}">Add Event</a>
        </div>
    </div>
    
    <table class="table table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>Event ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Dates</th>
            <th>Place</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for e in events %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ e.id }}</td>
                <td>{{ e.name }}</td>
                <td>{{ e.event_type }}</td>
                {% if e.all_year_event %}
                    <td>All Year</td>
                {% else %}
                    <td>{{ e.start_date }} - {{ e.end_date }}</td>
                {% endif %}
                <td>{{ e.place }}</td>
                <td>
                    <a class="btn btn-sm btn-primary" href="{% url 'events:event_edit' e.pk %}">Edit</a>
                    <a class="btn btn-sm btn-danger" href="{% url 'events:event_delete' e.pk %}">Delete</a>
                    <a class="btn btn-sm btn-warning" href="{% url 'events:event_images' e.pk %}">
                        Images
                    </a>
                </td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="6">No events found.</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

      <!-- Pagination -->
    {% if is_paginated %}
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">&laquo; First</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">Previous</a>
                    </li>
                {% endif %}

                <li class="page-item disabled">
                    <span class="page-link">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                    </span>
                </li>

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">Next</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">Last &raquo;</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
{% endblock %}