{% extends "base.html" %}
{% block content %}
<h1>Rotation</h1>

<form method="post">
  <div class="card">
    <div class="section-label">Priority</div>
    <label class="checkbox">
      <input type="checkbox" name="navidrome_priority" {{ "checked" if navidrome_priority }}>
      Navidrome takes over immediately whenever something is playing, regardless of rotation
    </label>
  </div>

  <div class="card">
    <div class="section-label">Rotation</div>
    <label class="checkbox">
      <input type="checkbox" name="rotation_enabled" {{ "checked" if rotation.enabled }}>
      Enabled -- cycle through the screens below on a timer
    </label>
    <p class="hint" style="margin: 0.6rem 0 1.1rem;">
      Clicking "Show X now" on the Status page turns this off automatically
      and fixes the display to that screen until you turn rotation back on
      here (Navidrome priority above still applies on top of a pin, if
      enabled). With no pin and rotation off, it just sits on the first
      screen in the order below.
    </p>
    <div class="field">
      <label for="screens">Order</label>
      <input type="text" id="screens" name="screens" value="{{ rotation.screens | join(', ') }}" placeholder="clock, weather">
      <p class="hint">Comma-separated, in order. Available: {{ screens.keys() | join(', ') }}.</p>
    </div>
    <div class="field">
      <label for="interval_minutes">Switch every (minutes)</label>
      <input type="number" id="interval_minutes" name="interval_minutes" value="{{ rotation.interval_minutes }}" min="1">
    </div>
  </div>

  <button type="submit">Save</button>
</form>
{% endblock %}