{{define "settings"}}{{template "header" .}}
<div class="row g-4" style="max-width: 900px;">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h2 class="h6">Change password</h2>
        <form method="post" action="/settings/password">
          {{template "csrf_field" .CSRFToken}}
          <div class="mb-2">
            <label class="form-label">Current password</label>
            <input type="password" class="form-control" name="current_password" required>
          </div>
          <div class="mb-3">
            <label class="form-label">New password</label>
            <input type="password" class="form-control" name="new_password" minlength="8" required>
          </div>
          <button type="submit" class="btn btn-primary btn-sm">Update password</button>
        </form>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <h2 class="h6">API keys</h2>
        <p class="text-secondary small">Used by third-party Subsonic clients in later phases.</p>
        <form method="post" action="/settings/api-keys" class="d-flex gap-2 mb-3">
          {{template "csrf_field" .CSRFToken}}
          <input type="text" name="name" class="form-control form-control-sm" placeholder="Key name">
          <button type="submit" class="btn btn-outline-primary btn-sm text-nowrap">New key</button>
        </form>
        {{if .Data.NewAPIKey}}
        <div class="alert alert-warning small">
          Copy this key now — it won't be shown again:<br>
          <code>{{.Data.NewAPIKey}}</code>
        </div>
        {{end}}
        <table class="table table-sm vs-table mb-0">
          <tbody>
          {{range .Data.APIKeys}}
            <tr>
              <td>{{.Name}}</td>
              <td class="text-secondary small">{{fmtTime .CreatedAt}}</td>
              <td class="text-end">
                <form method="post" action="/settings/api-keys/{{.ID}}/revoke">
                  {{template "csrf_field" $.CSRFToken}}
                  <button type="submit" class="btn btn-sm btn-outline-danger">Revoke</button>
                </form>
              </td>
            </tr>
          {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h2 class="h6">Active sessions</h2>
        <table class="table table-sm vs-table mb-0">
          <tbody>
          {{range .Data.Sessions}}
            <tr>
              <td>
                <div class="small">{{.UserAgent}}</div>
                <div class="text-secondary small">{{.IPAddress}} · since {{fmtTime .CreatedAt}}</div>
              </td>
              <td class="text-end">
                <form method="post" action="/settings/sessions/{{.ID}}/revoke">
                  {{template "csrf_field" $.CSRFToken}}
                  <button type="submit" class="btn btn-sm btn-outline-danger">Revoke</button>
                </form>
              </td>
            </tr>
          {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{{template "footer" .}}{{end}}