{% extends "_layout.html" %}
{% load static %}

{% block title %}{% if player_name %}{{ player_name }} · {% endif %}Settings{% endblock %}

{% block main %}
<div class="app-container">
  <div class="page-header-bar">
    <div class="page-header-bar__title">
      <h1 class="page-header">Settings</h1>
      <p class="page-header-bar__lede">Configure how this player behaves and what it should display.</p>
    </div>
  </div>

  {% comment %}Flash messages are emitted as toasts by _toasts.html (vendor.ts drainDjangoMessages()).{% endcomment %}

  <form
    method="post"
    action="{% url 'anthias_app:settings_save' %}"
    x-data="{ authBackend: '{{ auth_backend }}' }"
    class="settings-stack"
  >
    {% csrf_token %}

    {# ===== Player identity ===== #}
    <section class="settings-section">
      <header>
        <div>
          <h2>Player identity</h2>
          <p class="settings-section__lede">A friendly name shown in this UI and in the page title.</p>
        </div>
      </header>
      <div class="app-floating">
        <input type="text" class="app-input" id="player_name" name="player_name" value="{{ player_name }}" placeholder=" ">
        <label for="player_name">Player name</label>
      </div>
    </section>

    {# ===== Display & playback ===== #}
    <section class="settings-section">
      <header>
        <div>
          <h2>Display & playback</h2>
          <p class="settings-section__lede">Default durations, audio, and date format.</p>
        </div>
      </header>

      <div class="app-form-grid mb-4">
        <div class="app-floating">
          <input type="number" class="app-input" id="default_duration" name="default_duration" value="{{ default_duration }}" placeholder=" " required>
          <label for="default_duration">Default duration (seconds)</label>
        </div>
        <div class="app-floating">
          <input type="number" class="app-input" id="default_streaming_duration" name="default_streaming_duration" value="{{ default_streaming_duration }}" placeholder=" " required>
          <label for="default_streaming_duration">Default streaming duration (seconds)</label>
        </div>
      </div>

      <div class="app-form-grid mb-4">
        <div class="app-floating">
          <select class="app-select" id="audio_output" name="audio_output">
            <option value="hdmi" {% if audio_output == 'hdmi' %}selected{% endif %}>HDMI</option>
            {% if not is_pi5 %}
            <option value="local" {% if audio_output == 'local' %}selected{% endif %}>3.5mm jack</option>
            {% endif %}
          </select>
          <label for="audio_output">Audio output</label>
        </div>

        <div class="app-floating">
          <select class="app-select" id="date_format" name="date_format">
            {% for value, label in date_format_options %}
            <option value="{{ value }}" {% if date_format == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <label for="date_format">Date format</label>
        </div>

        <div class="app-floating">
          <select class="app-select" id="screen_rotation" name="screen_rotation">
            <option value="0" {% if screen_rotation == 0 %}selected{% endif %}>Landscape (0°)</option>
            <option value="90" {% if screen_rotation == 90 %}selected{% endif %}>Portrait (90°)</option>
            <option value="180" {% if screen_rotation == 180 %}selected{% endif %}>Landscape, inverted (180°)</option>
            <option value="270" {% if screen_rotation == 270 %}selected{% endif %}>Portrait, inverted (270°)</option>
          </select>
          <label for="screen_rotation">Screen rotation</label>
        </div>
      </div>

      <div>
        {% include "_settings_toggle.html" with name="show_splash" label="Show splash screen" hint="Display the device's IP address on screen at boot." checked=show_splash %}
        {% include "_settings_toggle.html" with name="default_assets" label="Include default sample assets" hint="Auto-add the bundled sample assets to a fresh playlist." checked=default_assets %}
        {% include "_settings_toggle.html" with name="shuffle_playlist" label="Shuffle playlist" hint="Randomise the play order on every loop." checked=shuffle_playlist %}
        {% include "_settings_toggle.html" with name="use_24_hour_clock" label="Use 24-hour clock" hint="Display times in 24-hour format across the UI." checked=use_24_hour_clock %}
        {% include "_settings_toggle.html" with name="debug_logging" label="Debug logging" hint="Verbose viewer logs. Leave off unless you're chasing a problem." checked=debug_logging %}
      </div>
    </section>

    {# ===== Authentication ===== #}
    <section class="settings-section">
      <header>
        <div>
          <h2>Authentication</h2>
          <p class="settings-section__lede">Restrict access to this management UI. Leave disabled on a trusted LAN.</p>
        </div>
      </header>

      <div class="app-floating mb-3">
        <select class="app-select" id="auth_backend" name="auth_backend" x-model="authBackend">
          <option value="">Disabled</option>
          <option value="auth_basic" {% if auth_backend == 'auth_basic' %}selected{% endif %}>Basic auth</option>
        </select>
        <label for="auth_backend">Method</label>
      </div>

      {% if has_saved_basic_auth %}
      <div class="app-floating mb-3" x-show="authBackend === 'auth_basic' || '{{ auth_backend }}' === 'auth_basic'">
        <input type="password" class="app-input" id="current_password" name="current_password" placeholder=" " autocomplete="current-password">
        <label for="current_password">Current password</label>
      </div>
      {% endif %}

      <template x-if="authBackend === 'auth_basic'">
        <div>
          <div class="app-floating mb-3">
            <input type="text" class="app-input" id="user" name="user" value="{{ username }}" placeholder=" " autocomplete="username">
            <label for="user">Username</label>
          </div>
          <div class="app-form-grid">
            <div class="app-floating">
              <input type="password" class="app-input" id="password" name="password" placeholder=" " autocomplete="new-password">
              <label for="password">New password</label>
            </div>
            <div class="app-floating">
              <input type="password" class="app-input" id="password_2" name="password_2" placeholder=" " autocomplete="new-password">
              <label for="password_2">Confirm new password</label>
            </div>
          </div>
        </div>
      </template>
    </section>

    <div class="flex justify-end">
      <button type="submit" class="app-btn app-btn-primary">
        <i class="ti ti-check"></i><span>Save settings</span>
      </button>
    </div>
  </form>

  <div id="upgrade-section"></div>

  {# ===== Migrate to Screenly ===== #}
  <section class="settings-section mt-4">
    <header>
      <div>
        <h2>Migrate to Screenly</h2>
        <p class="settings-section__lede">Copy this player's assets to a Screenly cloud account.</p>
      </div>
      <div class="settings-section__actions">
        <a href="{% url 'anthias_app:migrate_to_screenly' %}" class="app-btn app-btn-outline-dark">
          <i class="ti ti-cloud-upload"></i><span>Start migration</span>
        </a>
      </div>
    </header>
  </section>

  {# ===== Backup & restore ===== #}
  <section class="settings-section mt-4">
    <header>
      <div>
        <h2>Backup & restore</h2>
        <p class="settings-section__lede">Download a tarball of your settings and asset metadata, or recover from one.</p>
      </div>
      <div class="settings-section__actions" x-data>
        <form method="post" action="{% url 'anthias_app:settings_backup' %}" class="inline m-0">
          {% csrf_token %}
          <button type="submit" id="btn-backup" class="app-btn app-btn-outline-dark">
            <i class="ti ti-download"></i><span>Get backup</span>
          </button>
        </form>
        <form method="post" action="{% url 'anthias_app:settings_recover' %}" enctype="multipart/form-data" class="inline m-0">
          {% csrf_token %}
          <input
            type="file"
            name="backup_upload"
            id="backup_upload"
            accept=".tar.gz,.tgz,application/x-tar,application/gzip"
            hidden
            @change="if ($event.target.files.length) $event.target.form.requestSubmit()"
          >
          <button type="button" id="btn-upload" class="app-btn app-btn-primary"
            @click="document.getElementById('backup_upload').click()">
            <i class="ti ti-upload"></i><span>Upload &amp; recover</span>
          </button>
        </form>
      </div>
    </header>
  </section>

  {# ===== System controls ===== #}
  <section class="settings-section mt-4" x-data="{ pending: null }">
    <header>
      <div>
        <h2>System controls</h2>
        <p class="settings-section__lede">Reboot or power down the device. Both prompt for confirmation.</p>
      </div>
      <div class="settings-section__actions">
        <button type="button" class="app-btn app-btn-outline-dark" @click="pending = 'reboot'">
          <i class="ti ti-rotate-clockwise"></i><span>Reboot</span>
        </button>
        <button type="button" class="app-btn app-btn-danger" @click="pending = 'shutdown'">
          <i class="ti ti-power"></i><span>Shutdown</span>
        </button>
      </div>
    </header>

    <div
      x-show="pending"
      x-cloak
      class="modal-overlay"
      @keydown.escape.window="pending = null"
      @click.self="pending = null"
    >
      <div class="modal-card modal-card--sm">
        <div class="modal-card__header">
          <h2 x-text="pending === 'reboot' ? 'Reboot device?' : 'Shut down device?'"></h2>
          <button type="button" class="modal-card__close" @click="pending = null" aria-label="Close">
            <i class="ti ti-x"></i>
          </button>
        </div>
        <div class="modal-card__body">
          <p class="m-0" x-text="pending === 'reboot'
            ? 'The device will reboot now. The screen will go dark for about a minute.'
            : 'The device will power off now. You may need to unplug and replug to bring it back up.'"></p>
        </div>
        <div class="modal-card__footer">
          <button type="button" class="app-btn app-btn-link" @click="pending = null">Cancel</button>
          <form
            method="post"
            :action="pending === 'reboot' ? '{% url 'anthias_app:settings_reboot' %}' : '{% url 'anthias_app:settings_shutdown' %}'"
            class="inline m-0"
          >
            {% csrf_token %}
            <button type="submit" class="app-btn app-btn-danger" x-text="pending === 'reboot' ? 'Reboot now' : 'Shut down'"></button>
          </form>
        </div>
      </div>
    </div>
  </section>

  {% if cec_available %}
  {# ===== Display power (experimental, HDMI-CEC) ===== #}
  <section class="settings-section mt-4">
    <header>
      <div>
        <h2>Display power <span class="settings-section__badge" aria-label="Experimental feature">Experimental</span></h2>
        <p class="settings-section__lede">
          Toggle the connected display over HDMI-CEC. Works only on
          CEC-capable hardware (most x86 PCs are not). The outcome
          will appear as a toast.
        </p>
      </div>
      <div class="settings-section__actions">
        <form method="post" action="{% url 'anthias_app:settings_display_power' state='on' %}" class="inline m-0">
          {% csrf_token %}
          <button type="submit" class="app-btn app-btn-outline-dark">
            <i class="ti ti-bulb"></i><span>Turn display on</span>
          </button>
        </form>
        <form method="post" action="{% url 'anthias_app:settings_display_power' state='off' %}" class="inline m-0">
          {% csrf_token %}
          <button type="submit" class="app-btn app-btn-outline-dark">
            <i class="ti ti-bulb-off"></i><span>Turn display off</span>
          </button>
        </form>
      </div>
    </header>
  </section>
  {% endif %}
</div>
{% endblock %}