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

{% block title %}{{ event.title }} | Roster{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-lg-8">
            <!-- Event Header -->
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                {% if event.cover_image %}
                <img src="{{ event.cover_image.url }}" class="w-100" style="max-height: 400px; object-fit: cover;">
                {% endif %}
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <span class="badge rounded-pill bg-dark extra-small mb-2">{{ event.get_visibility_display }}</span>
                            <h1 class="h2 fw-bold mb-1">{{ event.title }}</h1>
                            <p class="text-muted"><i class="bi bi-geo-alt me-1"></i> {{ event.location_name }}{% if event.city %}, {{ event.city }}{% endif %}</p>
                        </div>
                        {% if event.creator == user %}
                        <div class="dropdown">
                            <button class="btn btn-light rounded-circle" data-bs-toggle="dropdown">
                                <i class="bi bi-three-dots-vertical"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                                <li><a class="dropdown-item small" href="{% url 'event_edit' event.id %}"><i class="bi bi-pencil me-2"></i> Edit Session</a></li>
...
                    <div class="mb-4">
                        <h5 class="fw-bold h6 mb-3">About this session</h5>
                        <div class="small text-secondary" style="white-space: pre-line;">
                            {{ event.description }}
                        </div>
                    </div>

                    {% if event.is_online and event.online_url %}
                    <div class="alert alert-primary border-0 rounded-4 d-flex align-items-center gap-3">
                        <i class="bi bi-laptop h4 mb-0"></i>
                        <div>
                            <p class="small fw-bold mb-0">This is an online session</p>
                            <a href="{{ event.online_url }}" class="extra-small text-decoration-none" target="_blank">{{ event.online_url }}</a>
                        </div>
                    </div>
                    {% endif %}

                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-sm-6">
                            <div class="d-flex align-items-center gap-3 p-3 bg-light rounded-3">
                                <div class="bg-white rounded-3 p-2 shadow-sm text-center" style="min-width: 60px;">
                                    <span class="d-block extra-small text-uppercase fw-bold text-primary">{{ event.start_datetime|date:"M" }}</span>
                                    <span class="h4 fw-bold mb-0">{{ event.start_datetime|date:"d" }}</span>
                                </div>
                                <div>
                                    <p class="small fw-bold mb-0">{{ event.start_datetime|date:"l, P" }}</p>
                                    <p class="extra-small text-muted mb-0">{{ event.timezone }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="d-flex align-items-center gap-3 p-3 bg-light rounded-3 h-100">
                                <div class="bg-white rounded-3 p-2 shadow-sm d-flex align-items-center justify-content-center" style="min-width: 60px; height: 60px;">
                                    <i class="bi bi-people h4 mb-0 text-primary"></i>
                                </div>
                                <div>
                                    <p class="small fw-bold mb-0">{{ going_count }} Going</p>
                                    <p class="extra-small text-muted mb-0">{% if event.capacity %}{{ event.capacity }} capacity{% else %}Unlimited space{% endif %}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h5 class="fw-bold h6 mb-3">About this event</h5>
                        <div class="small text-secondary" style="white-space: pre-line;">
                            {{ event.description }}
                        </div>
                    </div>

                    {% if event.is_online and event.online_url %}
                    <div class="alert alert-primary border-0 rounded-4 d-flex align-items-center gap-3">
                        <i class="bi bi-laptop h4 mb-0"></i>
                        <div>
                            <p class="small fw-bold mb-0">This is an online event</p>
                            <a href="{{ event.online_url }}" class="extra-small text-decoration-none" target="_blank">{{ event.online_url }}</a>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- RSVP Widget -->
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold h6 mb-3">RSVP</h5>
                    {% if user_rsvp %}
                        <div class="alert alert-{% if user_rsvp.status == 'going' %}success{% elif user_rsvp.status == 'maybe' %}info{% else %}secondary{% endif %} border-0 small mb-3">
                            You are marked as: <strong>{{ user_rsvp.get_status_display }}</strong>
                        </div>
                    {% endif %}
                    
                    <form action="{% url 'event_rsvp' event.id %}" method="POST" class="d-grid gap-2">
                        {% csrf_token %}
                        <button type="submit" name="status" value="going" class="btn {% if user_rsvp.status == 'going' %}btn-primary-cg{% else %}btn-outline-primary-cg{% endif %} rounded-pill btn-sm">Going</button>
                        <button type="submit" name="status" value="maybe" class="btn {% if user_rsvp.status == 'maybe' %}btn-primary-cg{% else %}btn-outline-primary-cg{% endif %} rounded-pill btn-sm">Maybe</button>
                        <button type="submit" name="status" value="not_going" class="btn {% if user_rsvp.status == 'not_going' %}btn-primary-cg{% else %}btn-outline-primary-cg{% endif %} rounded-pill btn-sm">Not Going</button>
                        {% if user_rsvp %}
                        <button type="submit" name="status" value="cancel" class="btn btn-link text-muted extra-small text-decoration-none">Cancel RSVP</button>
                        {% endif %}
                    </form>
                </div>
            </div>

            <!-- Organizer Widget -->
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4 text-center">
                    <h5 class="fw-bold h6 mb-3 text-start">Organizer</h5>
                    <img src="{{ event.creator.profile.get_avatar_url }}" class="rounded-circle mb-2" width="64" height="64">
                    <h6 class="fw-bold mb-1">{{ event.creator.get_full_name|default:event.creator.username }}</h6>
                    <p class="extra-small text-muted mb-3">{{ event.creator.profile.professional_headline }}</p>
                    <a href="{% url 'profile_detail' event.creator.username %}" class="btn btn-outline-dark btn-sm rounded-pill w-100 extra-small">View Profile</a>
                </div>
            </div>

            <!-- Attendees Widget -->
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold h6 mb-3">Attendees ({{ going_count }})</h5>
                    <div class="d-flex flex-wrap gap-2">
                        {% for rsvp in rsvps %}
                            {% if rsvp.status == 'going' %}
                            <a href="{% url 'profile_detail' rsvp.user.username %}" title="{{ rsvp.user.username }}">
                                <img src="{{ rsvp.user.profile.get_avatar_url }}" class="rounded-circle" width="32" height="32" style="object-fit: cover;">
                            </a>
                            {% endif %}
                        {% empty %}
                            <p class="extra-small text-muted mb-0">No one yet. Be the first!</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
