{% extends "base.html" %}
{% load custom_filters %}

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

    <h1 class="mb-4">Event Report</h1>

    <div class="mb-3">
        <p><strong>Total Events:</strong> {{ total_events }}</p>
        <p><strong>Upcoming Events:</strong> {{ upcoming_events }}</p>
        <p><strong>Past Events:</strong> {{ past_events }}</p>
    </div>

    <h4>Events by Type</h4>
    <ul class="list-group mb-4">
        {% for et in event_type_counts %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
            {{ et.event_type|replace:"_,"|title }}
            <span class="badge bg-primary rounded-pill">{{ et.count }}</span>
        </li>
        {% endfor %}
    </ul>

    <h4>All Events</h4>
    <table class="table table-bordered table-striped">
        <thead class="table-dark">
            <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Location</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for event in page_obj %}
            <tr>
                <td>{{ event.title }}</td>
                <td>{{ event.get_event_type_display }}</td>
                <td>{{ event.location }}</td>
                <td>{{ event.start_date|date:"M d, Y H:i" }}</td>
                <td>{{ event.end_date|date:"M d, Y H:i" }}</td>
                <td>
                    {% if event.is_upcoming %}
                        <span class="badge bg-success">Upcoming</span>
                    {% else %}
                        <span class="badge bg-secondary">Past</span>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center">No events found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    {% if page_obj.has_other_pages %}
    <nav>
        <ul class="pagination justify-content-center">

            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">Previous</span>
                </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">{{ page_obj.number }}</span>
            </li>

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">Next</span>
                </li>
            {% endif %}

        </ul>
    </nav>
    {% endif %}

    <a href="{% url 'reports_list' %}" class="btn btn-secondary mt-3">
        Back to Reports
    </a>

</div>
{% endblock %}