{% extends "app_base.html" %}

{% block title %}{{ frame.name or "Frame" }} · Calendar{% endblock %}
{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
{% block mode_picker %}{% include "_frame_mode_picker.html" %}{% endblock %}

{% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}

{% block content %}
  <div id="control-banner" class="control-banner" style="display: none;">
    <span id="control-holder"></span>
    <button type="button" id="take-control" class="btn-inline">Take control</button>
  </div>

  {% if frame.mode != 'calendar' %}
    <div class="info-box">This frame is currently in <strong>Photos</strong> mode --
      settings below take effect once you switch it to <strong>Calendar</strong> mode
      using the selector at the top of the page.</div>
  {% endif %}

  <div class="layout">
    <div class="main-col">
      <section class="card">
        <h2 class="card-title">Calendar</h2>
        <form id="calendar-config-form">
          <label>View
            <select id="calendar_view">
              {% for value, label in calendar_views.items() %}
                <option value="{{ value }}" {% if frame.calendar_view == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </label>
          <label>Week starts on
            <select id="calendar_week_start">
              {% for value, label in week_start_labels.items() %}
                <option value="{{ value }}" {% if frame.calendar_week_start == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </label>
          <p class="sub" style="margin-top: 4px;">Only affects the Week and Month views.</p>
          <div class="checkbox-row" id="calendar-inlay-row">
            <input type="checkbox" id="calendar_photo_inlay" {% if frame.calendar_photo_inlay %}checked{% endif %}>
            <label for="calendar_photo_inlay">Show a photo alongside the calendar</label>
          </div>
          <p class="sub" id="calendar-inlay-hint" style="margin-top: 4px;">
            Uses the same album configured on the Photos tab -- nothing extra to set up.</p>
          <button type="submit">Save</button>
        </form>

        <h2 class="card-title" style="margin-top: 20px;">Included calendars</h2>
        <p class="sub">Each linked person adds their own calendars (ICS
          subscription or CalDAV, set up in <a href="/settings">Settings</a>)
          -- being linked here doesn't include anything automatically.
          Anyone linked to this frame can mute a calendar they'd rather
          not see here, even one they don't own; only its owner can add
          it back.</p>
        <ul class="calendar-user-list">
          {% for u in calendar_users %}
            <li>
              <p class="calendar-user-name">{{ u.display_name }}{% if u.is_self %} (you){% endif %}</p>
              {% if u.calendars %}
                {% for c in u.calendars %}
                  <label class="checkbox-row" style="margin-top: 6px;">
                    <input type="checkbox" class="calendar-toggle"
                           data-user-id="{{ u.user_id }}" data-key="{{ c.key }}" data-label="{{ c.label }}"
                           {% if c.included %}checked{% endif %}>
                    {{ c.label }}
                  </label>
                {% endfor %}
              {% elif u.is_self %}
                <p class="sub" style="margin-top: 6px;">No calendars set up yet -- add an ICS link or CalDAV account in <a href="/settings">Settings</a>.</p>
              {% else %}
                <p class="sub" style="margin-top: 6px;">No calendars included.</p>
              {% endif %}
            </li>
          {% endfor %}
        </ul>

        {% if frame.calendar_fetch_summary %}
          <p class="sub" style="margin-top: 8px; color: var(--danger-text);">Last fetch: {{ frame.calendar_fetch_summary }}</p>
        {% endif %}
      </section>
    </div>

    <div class="side-col">
      <section class="card">
        <h2 class="card-title">Preview</h2>
        <p class="sub">How this frame's calendar currently renders.</p>
        <img class="preview-img" id="calendar-preview" alt="Calendar preview">
        <button type="button" class="secondary" id="calendar-preview-refresh">Refresh preview</button>
      </section>
    </div>
  </div>

  <div id="result"></div>
{% endblock %}

{% block scripts %}
  <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
  <script src="/static/device_status_bar.js"></script>
  <script src="/static/frame_header.js"></script>
  <script src="/static/frame_calendar.js"></script>
{% endblock %}