{% extends 'layout.html' %}

{% block head %}
<style>
    body {
        margin: 20px;
        font-family: monospace;
    }

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

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

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

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

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

    .date-info {
        font-weight: bold;
    }

    .switches-container {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .switch-row {
        display: flex;
        align-items: center;
        padding: 8px;
        border-left: 4px solid;
        font-size: 11pt;
    }

    .switch-time {
        width: 120px;
        color: #666;
        font-weight: bold;
    }

    .switch-workspace {
        width: 80px;
        font-weight: bold;
    }

    .switch-task {
        flex: 1;
        color: #333;
    }

    .switch-duration {
        width: 100px;
        text-align: right;
        color: #666;
    }

    /* Active vs idle workspace indicator */
    .ws-active { font-weight: bold; }
    .ws-idle { opacity: 0.6; }

    .stats {
        margin: 20px 0;
        padding: 15px;
        background: #f0f0f0;
        border-radius: 4px;
    }

    .stats-row {
        display: flex;
        gap: 30px;
        font-size: 11pt;
    }

    .stat-item {
        display: flex;
        gap: 10px;
    }

    .stat-label {
        color: #666;
    }

    .stat-value {
        font-weight: bold;
    }
</style>
{% endblock head %}

{% block content %}

<div class="nav-tabs">
    <a href="/switches/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
    <a href="/switches/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a>
    <a href="/switches/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'monthly' %}active{% endif %}">Monthly</a>
    <span style="margin-left: auto;">
        <a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Calendar</a>
    </span>
</div>

<div class="date-nav">
    <a href="/switches/{{ scope }}/{{ prev_date.year }}/{{ prev_date.month }}/{{ prev_date.day }}">←</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="/switches/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}">→</a>
</div>

<div class="stats">
    <div class="stats-row">
        <div class="stat-item">
            <span class="stat-label">Total Switches:</span>
            <span class="stat-value">{{ switches|length }}</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Total Time:</span>
            <span class="stat-value">{{ (switches|sum(attribute='delta') // 3600)|int }}h {{ ((switches|sum(attribute='delta') % 3600) // 60)|int }}m</span>
        </div>
    </div>
</div>

<h3>All Switches ({{ switches|length }})</h3>

<div class="switches-container">
    {% for switch in switches %}
        {% set is_active = switch.workspace in ['Plan', 'Think', 'Work'] %}
        {% set task_hash = switch.task_path|hash if switch.task_path else 0 %}
        {% set border_hue = task_hash % 360 %}
        {% set border_color = 'hsl(%d, 70%%, 50%%)'|format(border_hue) %}
        {% set bg_color = 'hsl(%d, 70%%, 95%%)'|format(border_hue) %}
    <div class="switch-row {{ 'ws-active' if is_active else 'ws-idle' }}"
         style="border-left-color: {{ border_color }}; background-color: {{ bg_color }};">
        <div class="switch-time">{{ switch.date.strftime('%m/%d %H:%M:%S') }}</div>
        <div class="switch-workspace">{{ switch.workspace }}</div>
        <div class="switch-task">{{ switch.task_path }}</div>
        <div class="switch-duration">
            {% if switch.delta >= 3600 %}
                {{ (switch.delta // 3600)|int }}h {{ ((switch.delta % 3600) // 60)|int }}m
            {% else %}
                {{ (switch.delta // 60)|int }}m {{ (switch.delta % 60)|int }}s
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

{% if not switches %}
    <p style="text-align: center; color: #666; margin-top: 40px;">No switches in this period</p>
{% endif %}

{% endblock content %}