{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Calendar</h1>
    </div>
</div>

<!-- Month Navigation -->
<div class="cal-nav">
    <a href="/calendar?year={{ prev_year }}&month={{ prev_month }}" class="btn btn-secondary btn-sm">&larr; Prev</a>
    <span class="cal-month-label">{{ month_name }} {{ year }}</span>
    <a href="/calendar?year={{ next_year }}&month={{ next_month }}" class="btn btn-secondary btn-sm">Next &rarr;</a>
    {% if year != today.year or month != today.month %}
    <a href="/calendar" class="btn btn-ghost btn-sm">Today</a>
    {% endif %}
</div>

<!-- Legend -->
<div class="cal-legend">
    <span class="cal-legend-item"><span class="cal-dot cal-dot-appointment"></span> Appointment</span>
    <span class="cal-legend-item"><span class="cal-dot cal-dot-meeting"></span> Meeting</span>
    <span class="cal-legend-item"><span class="cal-dot cal-dot-task"></span> Task</span>
</div>

<!-- Calendar Grid -->
<div class="cal-grid">
    <div class="cal-header-row">
        <div class="cal-header-cell">Sun</div>
        <div class="cal-header-cell">Mon</div>
        <div class="cal-header-cell">Tue</div>
        <div class="cal-header-cell">Wed</div>
        <div class="cal-header-cell">Thu</div>
        <div class="cal-header-cell">Fri</div>
        <div class="cal-header-cell">Sat</div>
    </div>
    {% for week in weeks %}
    <div class="cal-week-row">
        {% for day in week %}
        <div class="cal-day-cell {{ 'cal-day-empty' if day == 0 }} {{ 'cal-day-today' if day > 0 and today.year == year and today.month == month and today.day == day }}">
            {% if day > 0 %}
            <div class="cal-day-num">{{ day }}</div>
            <div class="cal-events">
                {% for event in days_map.get(day, []) %}
                <a href="{{ event.url }}" class="cal-event cal-event-{{ event.type }}" title="{{ event.title }}">
                    {% if event.time %}<span class="cal-event-time">{{ event.time }}</span>{% endif %}
                    <span class="cal-event-title">{{ event.title }}</span>
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>
{% endblock %}