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

{% block title %}Sessions | Roster{% endblock %}

{% block content %}
<div class="container-fluid dashboard-container px-lg-5">
    <div class="row">
        <!-- LEFT SIDEBAR -->
        <div class="col-lg-2 d-none d-lg-block">
            <div class="sticky-sidebar">
                <nav class="sidebar-nav">
                    <a href="{% url 'home' %}" class="nav-link"><i class="bi bi-compass"></i> Teammates</a>
                    <a href="{% url 'matches' %}" class="nav-link"><i class="bi bi-people"></i> My Teammates</a>
                    <a href="{% url 'inbox' %}" class="nav-link"><i class="bi bi-chat-dots"></i> Messages</a>
                    <a href="{% url 'events' %}" class="nav-link active"><i class="bi bi-calendar-event"></i> Sessions</a>
                    <a href="{% url 'groups:hub' %}" class="nav-link"><i class="bi bi-grid"></i> Squads</a>
                    <a href="{% url 'my_posts' %}" class="nav-link"><i class="bi bi-journal-text"></i> My Posts</a>
                    <a href="{% url 'my_profile' %}" class="nav-link"><i class="bi bi-person"></i> Profile</a>
                </nav>
            </div>
        </div>

        <!-- MAIN CONTENT -->
        <div class="col-lg-10">
            <div class="d-flex justify-content-between align-items-end mb-5 pt-2">
                <div>
                    <h1 class="h2 mb-2">Sessions</h1>
                    <p class="text-muted mb-0">Coordinate and play with your teammates.</p>
                </div>
                <a href="{% url 'event_create' %}" class="btn btn-primary-cg">
                    <i class="bi bi-plus-lg me-2"></i> Create Session
                </a>
            </div>

            <!-- Tabs & Search -->
            <div class="card border-0 shadow-soft rounded-cg mb-5">
                <div class="card-body p-4">
                    <div class="row align-items-center g-4">
                        <div class="col-md-7">
                            <div class="d-flex gap-3 overflow-auto pb-1">
                                <a href="?tab=upcoming" class="btn btn-sm {% if tab == 'upcoming' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Upcoming</a>
                                <a href="?tab=calendar" class="btn btn-sm {% if tab == 'calendar' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Calendar</a>
                                <a href="?tab=attending" class="btn btn-sm {% if tab == 'attending' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Attending</a>
                                <a href="?tab=mine" class="btn btn-sm {% if tab == 'mine' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">My Sessions</a>
                                <a href="?tab=past" class="btn btn-sm {% if tab == 'past' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Past</a>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <form action="" method="GET" class="input-group">
                                <input type="hidden" name="tab" value="{{ tab }}">
                                <input type="text" name="q" class="form-control border-0 bg-secondary-section rounded-start-cg px-4" placeholder="Search sessions..." value="{{ query }}">
                                <button class="btn btn-outline-cg border-0 bg-secondary-section rounded-end-cg px-4" type="submit"><i class="bi bi-search text-muted"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Events Grid -->
            <div class="row g-5">
                {% if tab == 'calendar' %}
                    {% for date, day_events in calendar_events.items %}
                    <div class="col-12 mb-5">
                        <div class="d-flex align-items-center gap-4 mb-4">
                            <h4 class="mb-0 text-slate opacity-75" style="min-width: 140px;">{{ date|date:"D, M d" }}</h4>
                            <div class="flex-grow-1 border-top" style="border-color: var(--cg-divider) !important;"></div>
                        </div>
                        <div class="row g-5">
                            {% for event in day_events %}
                            <div class="col-md-6 col-xl-4">
                                {% include "core/includes/event_card.html" with event=event %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12">
                        <div class="text-center py-5 bg-white rounded-cg shadow-soft">
                            <i class="bi bi-calendar-x display-1 text-muted opacity-25 mb-4 d-block"></i>
                            <h4 class="fw-bold">No sessions scheduled</h4>
                            <p class="text-muted">Stay tuned for upcoming squad sessions.</p>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    {% for event in events %}
                    <div class="col-md-6 col-xl-4">
                        {% include "core/includes/event_card.html" with event=event %}
                    </div>
                    {% empty %}
                    <div class="col-12">
                        <div class="text-center py-5 bg-white rounded-cg shadow-soft">
                            <i class="bi bi-calendar-x display-1 text-muted opacity-25 mb-4 d-block"></i>
                            <h4 class="fw-bold">No sessions found</h4>
                            <p class="text-muted">Try adjusting your filters or search query.</p>
                            <a href="{% url 'event_create' %}" class="btn btn-primary-cg mt-4">Create a session!</a>
                        </div>
                    </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
