{% extends "base.html" %}
{% block body_class %}calendar-page{% endblock %}
{% block content %}
  <main class="app-shell" data-today="{{ today }}" data-save-url="{{ url_for('save_choice') }}" data-status-url="{{ url_for('save_status') }}" data-delete-url="{{ url_for('delete_date_data') }}">
    <section class="calendar-panel" aria-label="Calendar">
      <header class="calendar-header">
        <div>
          <p class="eyebrow">Fatimas calendar</p>
          <h1 id="visible-month">Calendar</h1>
        </div>
        <div class="header-actions">
          <button class="today-button" data-today-button type="button">Today</button>
          <form action="{{ url_for('logout') }}" method="post">
            <button class="logout-button" type="submit" aria-label="Sign out">Sign out</button>
          </form>
        </div>
      </header>

      <div class="weekday-row" aria-hidden="true">
        <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span>
        <span>Thu</span><span>Fri</span><span>Sat</span>
      </div>
      <div id="weeks" class="weeks" role="grid" aria-label="Choose a date"></div>
    </section>

    <section class="detail-panel" aria-live="polite">
      <p id="selected-date" class="selected-date">Tap a day</p>
      <div class="report-row">
        <a class="report-button" href="{{ url_for('report') }}">Report</a>
      </div>
      <div id="amount-controls" class="amount-controls" hidden>
        <div class="status-options" aria-label="Choose day status">
          <button type="button" data-status="worked">Worked</button>
          <button type="button" data-status="vacation">Vacation</button>
          <button type="button" data-status="sick">Sick</button>
        </div>
        <div class="amount-row" aria-label="Choose an amount">
          {% for amount in preset_amounts %}
            <button type="button" data-amount="{{ amount }}">€{{ amount }}</button>
          {% endfor %}
          <button type="button" data-amount="0">€0</button>
          <form id="custom-amount-form" class="custom-amount-form">
            <div class="amount-input">
              <span>€</span>
              <input id="custom-amount" aria-label="Alternative amount" type="number" inputmode="decimal" min="0" step="0.01" placeholder="Other" required>
            </div>
            <button type="submit">Save</button>
          </form>
        </div>
        <div class="delete-row">
          <button id="delete-date-button" type="button">Delete all data for this date</button>
        </div>
        <p id="save-status" class="save-status" role="status"></p>
      </div>
    </section>
  </main>
  <script id="saved-choices" type="application/json">{{ choices | tojson }}</script>
  <script id="saved-statuses" type="application/json">{{ statuses | tojson }}</script>
  <script src="{{ url_for('static', filename='calendar.js') }}" defer></script>
{% endblock %}