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

{% block head_extra %}
<style>
html, body { height: 100%; margin: 0; padding: 0; }
header.navbar { display: none !important; }
#sidebarMenu { display: none !important; }
.container-fluid, .container-fluid > .row, .container-fluid > .row > div {
    height: 100%;
    padding: 0;
    margin: 0;
    max-width: 100%;
}
.filter-bar {
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
    margin: 1em;
    align-items: center;
}
.filter-bar a {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    text-decoration: none;
    color: #666;
    background: rgba(255,255,255,0.5);
    border: 1px solid #ddd;
    transition: all 0.15s;
}
.filter-bar a:hover {
    background: rgba(255,255,255,0.8);
    border-color: #aaa;
}
.filter-bar a.active {
    background: {{ month_color }};
    color: #fff;
    border-color: {{ month_color }};
}
.calendar-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 12px;
    max-width: 100%;
    overflow: hidden;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: {{ month_color }}55;
    border: 1px solid {{ month_color }}44;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
}
.month-banner {
    background: {{ month_color }};
    color: rgba(255,255,255,0.7);
    font: 900 2.5rem "Montserrat", sans-serif;
    text-transform: uppercase;
    padding: 24px 20px;
    text-align: center;
    grid-column: 1 / -1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.month-banner a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
}
.month-banner a:hover {
    color: #fff;
}
.day-header {
    background: {{ month_color }};
    color: rgba(255,255,255,0.8);
    padding: 10px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.day-cell {
    background: {{ month_color }}18;
    min-height: 100px;
    padding: 6px;
    position: relative;
}
.day-cell--today {
    background: #fffde7;
}
.day-number {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 4px;
}
.day-cell--today .day-number {
    color: #446e9b;
    background: #e8f0fe;
    display: inline-block;
    padding: 0 6px;
    border-radius: 50%;
}
.event-card {
    display: block;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
    padding: 3px 8px;
    margin: 3px 0;
    font-size: 0.8rem;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-card:hover {
    background: rgba(255,255,255,0.9);
    color: #000;
}
.calendar-footer {
    background: {{ month_color }};
    grid-column: 1 / -1;
    padding: 12px;
    text-align: center;
}
.calendar-footer a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    margin: 0 8px;
    font-size: 0.9rem;
}
.calendar-footer a:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .calendar-wrapper {
        padding: 4px;
        overflow-y: auto;
    }
    .calendar-grid {
        grid-template-columns: 1fr;
        flex: none;
    }
    .month-banner {
        grid-column: 1;
        font-size: 1.4rem;
        padding: 12px 10px;
        gap: 12px;
    }
    .month-banner a { font-size: 1.1rem; }
    .day-header { display: none; }
    .day-cell {
        min-height: auto;
        padding: 8px 10px;
        border-bottom: 1px solid {{ month_color }}33;
    }
    .day-cell[style*="background:transparent"] { display: none; }
    .day-number { margin-bottom: 2px; }
    .calendar-footer { grid-column: 1; }
}
</style>
{% endblock %}

{% block content %}
<div class="calendar-wrapper">
    <div class="filter-bar">
        <a href="/">Home</a>
        <a href="?date={{ year }}-{{ month|stringformat:'02d' }}"
           {% if not active_filter %}class="active"{% endif %}>All</a>
        {% for mt in media_types %}
        <a href="?date={{ year }}-{{ month|stringformat:'02d' }}&media_type={{ mt.name }}"
           {% if active_filter == mt.name %}class="active"{% endif %}>{{ mt.emoji }} {{ mt.name }}</a>
        {% endfor %}
    </div>
    <div class="calendar-grid">
        <div class="month-banner">
            <a href="?date={{ prev_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">&larr;</a>
            {{ month_name }} {{ year }}
            <a href="?date={{ next_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">&rarr;</a>
        </div>

        {% for name in day_names %}
        <div class="day-header">{{ name }}</div>
        {% endfor %}

        {% for _ in ""|ljust:first_weekday %}
        <div class="day-cell" style="background:transparent;"></div>
        {% endfor %}

        {% for cd in calendar_days %}
        <div class="day-cell{% if cd.is_today %} day-cell--today{% endif %}"
             style="background:{% if not cd.is_today %}{{ cd.color }}{% endif %};">
            <div class="day-number"><a href="{% url 'vrobbler-home' %}?date={{ year }}-{{ month|stringformat:'02d' }}-{{ cd.day|stringformat:'02d' }}" style="color:inherit;text-decoration:none;">{{ cd.day }}</a>{% if cd.total_count > 0 %} <span style="font-weight:400;color:#999;font-size:0.75rem;">{{ cd.total_count }}</span>{% endif %}</div>
            {% for s in cd.scrobbles %}
            <a href="{% url 'scrobbles:detail' pk=s.id %}"
               class="event-card"
               title="{{ s.title }} — {{ s.media_type }}">{{ s.emoji }} {{ s.title }}</a>
            {% endfor %}
        </div>
        {% endfor %}

        <div class="calendar-footer">
            <a href="/">Home</a>
            <a href="?date={{ prev_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">&larr; Previous</a>
            <a href="?date={{ current_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">Today</a>
            <a href="?date={{ next_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">Next &rarr;</a>
        </div>
    </div>
</div>
{% endblock %}