{% extends "base.html" %}

{% block title %}Calendar{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1>Calendar</h1>
    
    <p>View Mode: {{ view_mode }}</p>
    <p>Current Date: {{ current_date }}</p>
    
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="btn-group">
            <a href="/calendar?view=day" class="btn btn-outline-primary">Day</a>
            <a href="/calendar?view=month" class="btn btn-outline-primary">Month</a>
            <a href="/calendar?view=year" class="btn btn-outline-primary">Year</a>
        </div>
        <a href="/calendar/new" class="btn btn-success">
            <i class="bi bi-plus-circle"></i> Create New Event
        </a>
    </div>
    
    {% if view_mode == "month" %}
        <h2>Month View: {{ month_name }} {{ current_year }}</h2>
        
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
            </thead>
            <tbody>
                {% for week in range(start=0, end=6) %}
                    <tr>
                        {% for day_idx in range(start=0, end=7) %}
                            <td>
                                {% set idx = week * 7 + day_idx %}
                                {% if idx < calendar_days|length %}
                                    {% set day = calendar_days[idx] %}
                                    {% if day.day > 0 %}
                                        {{ day.day }}
                                    {% endif %}
                                {% endif %}
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% elif view_mode == "year" %}
        <h2>Year View: {{ current_year }}</h2>
        
        <div class="row">
            {% for month in months %}
                <div class="col-md-4 mb-3">
                    <div class="card">
                        <div class="card-header">{{ month.name }}</div>
                        <div class="card-body">
                            <p>Events: {{ month.events|length }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% elif view_mode == "day" %}
        <h2>Day View: {{ current_date }}</h2>
        
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                All Day Events
            </div>
            <div class="card-body">
                {% if events is defined and events|length > 0 %}
                    {% for event in events %}
                        {% if event.all_day %}
                            <div class="alert" style="background-color: {{ event.color }}; color: white;">
                                <h5>{{ event.title }}</h5>
                                <p>{{ event.description }}</p>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <p class="text-muted">No all-day events</p>
                {% endif %}
            </div>
        </div>
        
        <div class="list-group">
            {% for hour in range(start=0, end=24) %}
                <div class="list-group-item">
                    <div class="d-flex">
                        <div class="pe-3" style="width: 60px; text-align: right;">
                            <strong>{{ "%02d"|format(value=hour) }}:00</strong>
                        </div>
                        <div class="flex-grow-1">
                            {% if events is defined and events|length > 0 %}
                                {% for event in events %}
                                    {% if not event.all_day %}
                                        {% set start_hour = event.start_time|date(format="%H") %}
                                        {% if start_hour == hour|string %}
                                            <div class="alert mb-2" style="background-color: {{ event.color }}; color: white;">
                                                <h5>{{ event.title }}</h5>
                                                <p>{{ event.start_time|date(format="%H:%M") }} - {{ event.end_time|date(format="%H:%M") }}</p>
                                                <p>{{ event.description }}</p>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
    
    <!-- Floating Action Button (FAB) for creating new events -->
    <a href="/calendar/new" class="position-fixed bottom-0 end-0 m-4 btn btn-primary rounded-circle shadow" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 24px;">
        <i class="bi bi-plus"></i>
    </a>
</div>

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
{% endblock %}
{% endblock %}