{{template "base.html" .}}

{{define "title"}}Settings — Reolink Controller{{end}}

{{define "content"}}
<h1>Settings</h1>

{{if .Error}}
<div class="card" style="border-color:var(--danger);margin-bottom:1rem">
  <span class="text-danger">{{.Error}}</span>
</div>
{{end}}

<div class="card">
  <form method="POST" action="/settings"
        hx-post="/settings"
        hx-swap="none">

    <div class="form-section">
      <h3>MQTT Broker</h3>
      <div class="form-row">
        <div class="form-group">
          <label for="mqtt_host">Host</label>
          <input type="text" id="mqtt_host" name="mqtt_host" value="{{.Settings.MQTT.Host}}" required placeholder="mosquitto">
        </div>
        <div class="form-group">
          <label for="mqtt_port">Port</label>
          <input type="number" id="mqtt_port" name="mqtt_port" value="{{.Settings.MQTT.Port}}" required min="1" max="65535">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="mqtt_username">Username <span class="text-muted">(optional)</span></label>
          <input type="text" id="mqtt_username" name="mqtt_username" value="{{.Settings.MQTT.Username}}">
        </div>
        <div class="form-group">
          <label for="mqtt_password">Password <span class="text-muted">(optional)</span></label>
          <input type="password" id="mqtt_password" name="mqtt_password" placeholder="leave blank to keep current">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="mqtt_client_id">Client ID</label>
          <input type="text" id="mqtt_client_id" name="mqtt_client_id" value="{{.Settings.MQTT.ClientID}}">
        </div>
        <div class="form-group" style="display:flex;align-items:flex-end;padding-bottom:0.1rem">
          <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;color:var(--text)">
            <input type="checkbox" name="mqtt_use_tls" value="1" {{if .Settings.MQTT.UseTLS}}checked{{end}}>
            Use TLS
          </label>
        </div>
      </div>
    </div>

    <div class="form-section">
      <h3>Frigate</h3>
      <div class="form-group">
        <label for="frigate_api_url">Frigate API URL</label>
        <input type="text" id="frigate_api_url" name="frigate_api_url"
               value="{{.Settings.FrigateAPIURL}}"
               placeholder="http://frigate:5000">
        <span class="text-muted" style="font-size:0.8rem;display:block;margin-top:0.3rem">
          Used to discover cameras. Leave blank if not using the import feature.
        </span>
      </div>
    </div>

    <div class="form-section">
      <h3>Event Log</h3>
      <div class="form-group" style="max-width:300px">
        <label for="log_retention_days">Retain events for (days)</label>
        <input type="number" id="log_retention_days" name="log_retention_days"
               value="{{.Settings.LogRetentionDays}}" min="1" max="365">
      </div>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Save Settings</button>
    </div>
  </form>
</div>
{{end}}