{% extends 'layout.html' %} {% block head %}
<style>
    body {
        margin: 20px;
        font-family: monospace;
        background: #1a1a1a;
        color: #e0e0e0;
    }

    .nav-bar {
        display: flex;
        gap: 20px;
    }

    .nav-bar a {
        text-decoration: none;
        color: #6b9bd1;
        font-size: 12pt;
        padding: 5px 10px;
        border-radius: 3px;
    }

    .nav-bar a:hover {
        background-color: #2a2a2a;
    }

    .nav-tabs {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        border-bottom: 2px solid #444;
        padding-bottom: 10px;
    }

    .nav-tabs a {
        text-decoration: none;
        color: #888;
        font-size: 16pt;
        padding: 5px 10px;
    }

    .nav-tabs a.active {
        color: #e0e0e0;
        font-weight: bold;
        border-bottom: 3px solid #6b9bd1;
    }

    .date-nav {
        margin: 20px 0;
        font-size: 14pt;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .date-nav a {
        text-decoration: none;
        color: #6b9bd1;
        font-size: 18pt;
    }

    .date-info {
        font-weight: bold;
        color: #e0e0e0;
    }

    .calendar-grid {
        display: flex;
        border: 1px solid #333;
        min-height: 600px;
        background: #1a1a1a;
    }

    .time-column {
        width: 60px;
        border-right: 1px solid #333;
        background: #222;
    }

    .time-slot {
        border-bottom: 1px solid #2a2a2a;
        padding: 5px;
        font-size: 10pt;
        color: #666;
        text-align: right;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        box-sizing: border-box;
    }

    .days-grid {
        flex: 1;
        display: flex;
    }

    .day-column {
        flex: 1;
        border-right: 1px solid #333;
        position: relative;
        background: #1a1a1a;
    }

    .day-column:last-child {
        border-right: none;
    }

    .day-header {
        height: 40px;
        border-bottom: 2px solid #444;
        background: #2a2a2a;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 11pt;
        color: #e0e0e0;
        box-sizing: border-box;
    }

    .day-grid {
        position: relative;
        height: 1440px; /* 24 hours * 60px */
    }

    .hour-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 60px;
        border-bottom: 1px solid #2a2a2a;
    }

    .task-block {
        position: absolute;
        border-radius: 4px;
        padding: 4px;
        font-size: 9pt;
        color: white;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.15s ease-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(0, 0, 0, 0.3);
    }

    .task-block:hover {
        z-index: 100 !important;
        overflow: visible;
        min-height: fit-content;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    }

    .task-block:hover .task-label,
    .task-block:hover .task-time {
        background: inherit;
        white-space: nowrap;
        display: inline-block;
    }

    .task-label {
        font-weight: bold;
        margin-bottom: 2px;
    }

    .task-time {
        font-size: 8pt;
        opacity: 0.9;
    }
</style>
{% endblock head %} {% block content %}

<div
    class="nav-bar"
    style="
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #444;
        font-size: 12pt;
    "
>
    <a href="/">Today</a>
    <a href="/calendar/daily">Calendar</a>
    <a
        href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}{% if tz_name %}?tz={{ tz_name }}{% endif %}"
        >Switches</a
    >
    <a href="/totals">All Time</a>
    <select
        id="tz-selector"
        style="
            margin-left: auto;
            background: #2a2a2a;
            color: #e0e0e0;
            border: 1px solid #444;
            padding: 5px 10px;
            border-radius: 3px;
            font-family: monospace;
            font-size: 12pt;
        "
        onchange="window.location.href = window.location.pathname + '?grid={{ grid }}&tz=' + this.value"
    >
        {% for tz_value, tz_label in timezones %}
        <option value="{{ tz_value }}" {% if tz_name == tz_value or (not tz_name and loop.first) %}selected{% endif %}>
            {{ tz_label }}
        </option>
        {% endfor %}
    </select>
</div>

<div class="nav-tabs">
    <a
        href="/calendar/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}{% if tz_name %}&tz={{ tz_name }}{% endif %}"
        class="{% if scope == 'daily' %}active{% endif %}"
        >Daily</a
    >
    <a
        href="/calendar/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}{% if tz_name %}&tz={{ tz_name }}{% endif %}"
        class="{% if scope == 'weekly' %}active{% endif %}"
        >Weekly</a
    >
    <a
        href="/calendar/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}{% if tz_name %}&tz={{ tz_name }}{% endif %}"
        class="{% if scope == 'monthly' %}active{% endif %}"
        >Monthly</a
    >
    <span
        style="margin-left: auto; display: flex; gap: 15px; align-items: center"
    >
        <span style="color: #999; font-size: 11pt">Grid:</span>
        <a
            href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=1{% if tz_name %}&tz={{ tz_name }}{% endif %}"
            class="{% if grid == 1 %}active{% endif %}"
            style="font-size: 11pt"
            >1h</a
        >
        <a
            href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=3{% if tz_name %}&tz={{ tz_name }}{% endif %}"
            class="{% if grid == 3 %}active{% endif %}"
            style="font-size: 11pt"
            >3h</a
        >
        <a
            href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=6{% if tz_name %}&tz={{ tz_name }}{% endif %}"
            class="{% if grid == 6 %}active{% endif %}"
            style="font-size: 11pt"
            >6h</a
        >
    </span>
</div>

<div class="date-nav">
    <a
        href="/calendar/{{ scope }}/{{ prev_date.year }}/{{ prev_date.month }}/{{ prev_date.day }}?grid={{ grid }}{% if tz_name %}&tz={{ tz_name }}{% endif %}"
        >←</a
    >
    {% if scope == 'daily' %}
    <span class="date-info">{{ base_date.strftime('%Y-%m-%d %A') }}</span>
    {% elif scope == 'weekly' %}
    <span class="date-info">Week of {{ start.strftime('%Y-%m-%d') }}</span>
    {% elif scope == 'monthly' %}
    <span class="date-info">{{ base_date.strftime('%B %Y') }}</span>
    {% endif %}
    <a
        href="/calendar/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}?grid={{ grid }}{% if tz_name %}&tz={{ tz_name }}{% endif %}"
        >→</a
    >
</div>

<div class="calendar-grid">
    <div class="time-column">
        <div class="day-header" style="height: 40px"></div>
        {% for hour in range(0, 24, grid) %}
        <div class="time-slot" style="height: {{ grid * 60 }}px;">
            {{ '%02d:00'|format(hour) }}
        </div>
        {% endfor %}
    </div>

    <div class="days-grid">
        {% for day in days %}
        <div class="day-column">
            <div class="day-header">
                {{ day.strftime('%a %d') if scope != 'daily' else
                day.strftime('%A') }}
            </div>
            <div class="day-grid">
                {% for hour in range(0, 24, grid) %}
                <div
                    class="hour-line"
                    style="top: {{ hour * 60 }}px; height: {{ grid * 60 }}px;"
                ></div>
                {% endfor %} {% set day_blocks = [] %} {% for block in blocks %}
                {% if block.start.date() == day.date() %} {% set _ =
                day_blocks.append(block) %} {% endif %} {% endfor %} {% set
                hour_groups = {} %} {% for block in day_blocks %} {% set
                hour_key = block.hour %} {% if hour_key not in hour_groups %} {%
                set _ = hour_groups.update({hour_key: []}) %} {% endif %} {% set
                _ = hour_groups[hour_key].append(block) %} {% endfor %} {% for
                hour_key, hour_blocks in hour_groups.items() %} {% for block in
                hour_blocks %} {% set idx = loop.index0 %} {% set base_top_px =
                block.hour * 60 %} {% set duration_hours = block.duration /
                3600.0 %} {% set height_px = duration_hours * 60 %} {% if
                height_px < 2 %}{% set height_px = 2 %}{% endif %} {% set
                task_hash = block.task_path|hash if block.task_path else 0 %} {%
                set base_color_hue = task_hash % 360 %} {% set active_color =
                'hsl(%d, 60%%, 45%%)'|format(base_color_hue) %} {% set
                offset_pct = idx * 8 %} {% set width_pct = 100 - (idx * 8) - 2
                %} {% set vertical_offset_px = idx * 4 %} {% set top_px =
                base_top_px + vertical_offset_px %}

                <div
                    class="task-block"
                    style="top: {{ top_px }}px; height: {{ height_px }}px; left: {{ offset_pct }}%; width: {{ width_pct }}%; background: {{ active_color }}; opacity: 0.9; z-index: {{ idx + 1 }};"
                >
                    <div class="task-label">{{ block.task_path }}</div>
                    <div class="task-time">
                        {{ (block.duration // 60)|int }}m
                    </div>
                </div>
                {% endfor %} {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock content %}