{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">

            <div class="card">
                <div class="card-header">
                    <h1>{{ event.title }}</h1>
                    <span class="badge bg-primary">
                        {{ event.get_event_type_display }}
                    </span>
                </div>

                <div class="card-body">
                    <p><strong>Location:</strong> {{ event.location }}</p>

                    <p>
                        <strong>Date & Time:</strong>
                        {{ event.start_date|date:"M d, Y H:i" }} -
                        {{ event.end_date|date:"H:i" }}
                    </p>

                    {% if event.organizer %}
                        <p><strong>Organizer:</strong> {{ event.organizer }}</p>
                    {% endif %}

                    {% if event.department %}
                        <p><strong>Department:</strong> {{ event.department }}</p>
                    {% endif %}

                    <p>
                        <strong>Status:</strong>
                        {% if event.is_active %}
                            <span class="badge bg-success">Active</span>
                        {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                        {% endif %}
                    </p>

                    {% if event.description %}
                        <hr>
                        <h5>Description</h5>
                        <p>{{ event.description }}</p>
                    {% endif %}
                </div>
            </div>

        </div>
    </div>

    <div class="mt-4">
        <a href="{% url 'event_update' event.pk %}" class="btn btn-primary">Edit Event</a>
        <a href="{% url 'event_delete' event.pk %}" class="btn btn-danger">Delete Event</a>
        <a href="{% url 'event_list' %}" class="btn btn-secondary">Back to List</a>
    </div>
</div>
{% endblock %}