{% extends "base.html" %}
{% block title %}Deadlines Calendar - {{ config.APP_NAME }}{% endblock %}
{% block content %}
<h1>📆 Deadlines Calendar</h1>

<div style="display:flex; align-items:center; gap:16px; margin-bottom:16px;">
    <a href="{{ url_for('reports.deadlines_calendar', year=prev_year, month=prev_month) }}">&larr; Prev</a>
    <strong>{{ month_name }} {{ year }}</strong>
    <a href="{{ url_for('reports.deadlines_calendar', year=next_year, month=next_month) }}">Next &rarr;</a>
</div>

<div class="table-responsive">
<table class="data-table" style="table-layout:fixed;">
    <thead>
        <tr>
            <th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th>
        </tr>
    </thead>
    <tbody>
        {% for week in weeks %}
        <tr>
            {% for day in week %}
            {% if day == 0 %}
            <td style="background:var(--table-header-bg);"></td>
            {% else %}
            <td class="calendar-cell" style="vertical-align:top; height:70px; {% if year == today.year and month == today.month and day == today.day %}background:var(--flash-info-bg);{% endif %}">
                <div style="font-size:0.8rem; color:var(--text-muted);">{{ day }}</div>
                {% for t in by_day.get(day, []) %}
                <div style="font-size:0.75rem; background:var(--accent); color:white; border-radius:3px; padding:1px 4px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="{{ t.task_name }}">
                    {{ t.task_name }}
                </div>
                {% endfor %}
            </td>
            {% endif %}
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% endblock %}