{% extends "base.html" %}
{% block title %}Settings{% endblock %}

{% block content %}
<h1>Settings</h1>

<div class="grid">
  <article>
    <header>Unsplash</header>

    <form hx-put="/api/config/unsplash/access_key" hx-target="#unsplash-result" hx-swap="innerHTML">
      <label for="access-key">Access Key</label>
      <input type="text" id="access-key" name="value"
             placeholder="Enter your Unsplash API key"
             value="{{ config.get('unsplash', {}).get('access_key', '') }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/unsplash/query" hx-target="#unsplash-result" hx-swap="innerHTML">
      <label for="query">Search Query</label>
      <input type="text" id="query" name="value" placeholder="nature, architecture, ..."
             value="{{ config.get('unsplash', {}).get('query', '') }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/unsplash/collections" hx-target="#unsplash-result" hx-swap="innerHTML">
      <label for="collections">Collection IDs</label>
      <input type="text" id="collections" name="value" placeholder="Comma-separated IDs"
             value="{{ config.get('unsplash', {}).get('collections', '') }}">
      <button type="submit">Save</button>
    </form>

    <p id="unsplash-result"></p>
  </article>

  <article>
    <header>Display</header>

    <form hx-put="/api/config/display/saturation" hx-target="#saturation-result" hx-swap="innerHTML">
      <label for="saturation">
        Saturation
        <output id="saturation-value" style="display:inline-block; min-width:3rem;">
          {{ config.get('display', {}).get('saturation', 0.5) }}
        </output>
      </label>
      <input type="range" id="saturation" name="value"
             min="0" max="1" step="0.05"
             value="{{ config.get('display', {}).get('saturation', 0.5) }}"
             oninput="document.getElementById('saturation-value').textContent = this.value">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/display/orientation" hx-target="#orientation-result" hx-swap="innerHTML">
      <label for="orientation">Display Orientation</label>
      <select id="orientation" name="value">
        {% set orient = config.get('display', {}).get('orientation', 0) %}
        <option value="0" {{ 'selected' if orient == 0 }}>0° (Landscape)</option>
        <option value="90" {{ 'selected' if orient == 90 }}>90° (Portrait)</option>
        <option value="180" {{ 'selected' if orient == 180 }}>180° (Landscape)</option>
        <option value="270" {{ 'selected' if orient == 270 }}>270° (Portrait)</option>
      </select>
      <button type="submit">Save</button>
    </form>

    <p id="orientation-result"></p>
    <p id="saturation-result"></p>
  </article>

  <article>
    <header>Schedule</header>

    <form hx-put="/api/config/schedule/interval_hours" hx-target="#schedule-result" hx-swap="innerHTML">
      <label for="interval">Interval (hours)</label>
      <input type="number" id="interval" name="value" min="0.5" step="0.5"
             value="{{ config.get('schedule', {}).get('interval_hours', 1) }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/schedule/random_delay_seconds" hx-target="#schedule-result" hx-swap="innerHTML">
      <label for="delay">Random delay (seconds)</label>
      <input type="number" id="delay" name="value" min="0" step="10"
             value="{{ config.get('schedule', {}).get('random_delay_seconds', 300) }}">
      <button type="submit">Save</button>
    </form>

    <p id="schedule-result"></p>
  </article>

  <article>
    <header>MQTT</header>

    <form hx-put="/api/config/mqtt/enabled" hx-target="#mqtt-result" hx-swap="innerHTML">
      <label>
        <input type="hidden" name="value" value="false">
        <input type="checkbox" id="mqtt-enabled" name="value" value="true"
               {{ 'checked' if config.get('mqtt', {}).get('enabled', False) }}>
        Enable MQTT
      </label>
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/mqtt/broker" hx-target="#mqtt-result" hx-swap="innerHTML">
      <label for="mqtt-broker">Broker</label>
      <input type="text" id="mqtt-broker" name="value"
             value="{{ config.get('mqtt', {}).get('broker', 'localhost') }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/mqtt/port" hx-target="#mqtt-result" hx-swap="innerHTML">
      <label for="mqtt-port">Port</label>
      <input type="number" id="mqtt-port" name="value" min="1" max="65535"
             value="{{ config.get('mqtt', {}).get('port', 1883) }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/mqtt/topic_prefix" hx-target="#mqtt-result" hx-swap="innerHTML">
      <label for="mqtt-prefix">Topic prefix</label>
      <input type="text" id="mqtt-prefix" name="value"
             value="{{ config.get('mqtt', {}).get('topic_prefix', 'spectra') }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/mqtt/username" hx-target="#mqtt-result" hx-swap="innerHTML">
      <label for="mqtt-username">Username</label>
      <input type="text" id="mqtt-username" name="value"
             value="{{ config.get('mqtt', {}).get('username', '') }}">
      <button type="submit">Save</button>
    </form>

    <form hx-put="/api/config/mqtt/password" hx-target="#mqtt-result" hx-swap="innerHTML">
      <label for="mqtt-password">Password</label>
      <input type="password" id="mqtt-password" name="value"
             value="{{ config.get('mqtt', {}).get('password', '') }}">
      <button type="submit">Save</button>
    </form>

    <p id="mqtt-result"></p>
    <p><small>See <a href="/docs/mqtt.md">MQTT docs</a> for available commands and status topics.</small></p>
  </article>
</div>
{% endblock %}