{% extends "base.html" %}

{% block title %}Events{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Events</h1>
    <div>
        <a href="?filter=upcoming" class="btn btn-outline-primary me-2 {% if upcoming %}active{% endif %}">
            Upcoming
        </a>
        <a href="{% url 'event_calendar' %}" class="btn btn-outline-info">Calendar</a>
        <a href="{% url 'event_create' %}" class="btn btn-primary">Add Event</a>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Location</th>
                <th>Start Date</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for event in page_obj %}
            <tr class="{% if event.is_upcoming %}table-info{% endif %}">
                <td>{{ event.title }}</td>
                <td>
                    <span class="badge bg-primary">
                        {{ event.get_event_type_display }}
                    </span>
                </td>
                <td>{{ event.location }}</td>
                <td>{{ event.start_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>
                <td>
                    <a href="{% url 'event_detail' event.pk %}" class="btn btn-sm btn-outline-primary">View</a>
                    <a href="{% url 'event_update' event.pk %}" class="btn btn-sm btn-outline-secondary">Edit</a>
                    <a href="{% url 'event_delete' event.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center">No events found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if page_obj.has_other_pages %}
<nav>
    <ul class="pagination">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
            </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>
        {% endif %}
    </ul>
</nav>
{% endif %}

<a href="{% url 'dashboard' %}" class="btn btn-secondary my-3">Return to Dashboard</a>

{% endblock %}