{% extends "_shell.html" %}
{% block title %}P900 Settings{% endblock %}

{% block content %}
  <h1 class="tt-dh bloom tt-masthead">SETTINGS</h1>
  <p class="tt-empty">Keys saved here override the values in <code>.env</code>. Both need a container restart to take effect.</p>

  {#- ── General ──────────────────────────────────────────────────  -#}
  <div class="tt-field"><span>General</span></div>
  <div class="tt-form">
    <div class="tt-field-row">
      <label class="tt-label" for="timezone">Timezone</label>
      <select class="tt-input tt-select" id="timezone">
        {% set tzs = [
          'America/New_York','America/Chicago','America/Denver','America/Los_Angeles',
          'America/Toronto','America/Vancouver','America/Phoenix','America/Halifax',
          'Europe/London','Europe/Paris','Europe/Berlin','Europe/Amsterdam',
          'Europe/Stockholm','Europe/Rome','Europe/Madrid','Europe/Zurich',
          'Australia/Sydney','Australia/Melbourne','Australia/Brisbane','Australia/Perth',
          'Pacific/Auckland','Asia/Tokyo','Asia/Singapore','Asia/Dubai','Asia/Kolkata'
        ] %}
        {% for tz in tzs %}
        <option value="{{ tz }}" {% if tz == timezone %}selected{% endif %}>{{ tz }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="tt-field-row">
      <label class="tt-label" for="arr_host">Host IP (ARR_HOST)</label>
      <input class="tt-input" type="text" id="arr_host" value="{{ arr_host }}" placeholder="192.168.86.33">
      <p class="tt-hint">LAN address of the machine running Sonarr, Radarr and the rest.</p>
    </div>
    <button class="tt-btn" onclick="saveGeneral()">Save General</button>
  </div>

  {#- ── Password ─────────────────────────────────────────────────  -#}
  <div class="tt-field"><span>Change Password</span></div>
  <div class="tt-form">
    <div class="tt-field-row">
      <label class="tt-label" for="pw_current">Current password</label>
      <input class="tt-input" type="password" id="pw_current" autocomplete="current-password">
    </div>
    <div class="tt-field-row">
      <label class="tt-label" for="pw_new">New password</label>
      <input class="tt-input" type="password" id="pw_new" placeholder="At least 6 characters" autocomplete="new-password">
    </div>
    <div class="tt-field-row">
      <label class="tt-label" for="pw_confirm">Confirm new password</label>
      <input class="tt-input" type="password" id="pw_confirm" autocomplete="new-password">
      <div class="tt-inline-err" id="pw-error" role="alert"></div>
    </div>
    <button class="tt-btn" onclick="changePassword()">Update Password</button>
  </div>

  {#- ── Keys ─────────────────────────────────────────────────────  -#}
  <div class="tt-field"><span>Service Keys</span></div>
  <div class="tt-keys">
    {% for svc, label in [
      ('sonarr','Sonarr'), ('radarr','Radarr'), ('sabnzbd','SABnzbd'),
      ('tautulli','Tautulli'), ('prowlarr','Prowlarr'), ('ombi','Ombi')
    ] %}
    <div class="tt-form">
      <div class="tt-field-row">
        <label class="tt-label" for="{{ svc }}_api_key">{{ label }} API key</label>
        <input class="tt-input" type="password" id="{{ svc }}_api_key"
               value="{{ {'sonarr': sonarr_api_key, 'radarr': radarr_api_key,
                          'sabnzbd': sabnzbd_api_key, 'tautulli': tautulli_api_key,
                          'prowlarr': prowlarr_api_key, 'ombi': ombi_api_key}[svc] }}"
               autocomplete="off">
      </div>
      <button class="tt-btn tt-btn-quiet" onclick="saveService('{{ svc }}')">Save {{ label }}</button>
    </div>
    {% endfor %}
  </div>

  <div class="tt-toast" id="toast" role="status" aria-live="polite"></div>
{% endblock %}

{% block js %}
  <script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %}