{{template "base.html" .}}

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

{{define "content"}}
<div class="flex items-center justify-between mb-2">
  <h1>Cameras</h1>
  <div class="flex gap-sm">
    <button class="btn btn-secondary"
            hx-get="/cameras/import-frigate"
            hx-target="#frigate-import-container"
            hx-swap="innerHTML"
            hx-indicator="#import-spinner">
      Import from Frigate
      <span id="import-spinner" class="htmx-indicator spinner"></span>
    </button>
    <a href="/cameras/new" class="btn btn-primary">+ Add Camera</a>
  </div>
</div>

<div id="frigate-import-container"></div>

{{if .Cameras}}
<div class="card" style="padding:0">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Host</th>
          <th>Port</th>
          <th>Username</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {{range .Cameras}}
        <tr id="camera-row-{{.ID}}">
          <td><strong>{{.Name}}</strong></td>
          <td>{{.Host}}</td>
          <td>{{.Port}}</td>
          <td>{{.Username}}</td>
          <td>
            <div class="flex gap-sm items-center">
              <a href="/cameras/{{.ID}}/edit" class="btn btn-secondary btn-sm">Edit</a>
              <button class="btn btn-secondary btn-sm"
                      hx-post="/cameras/{{.ID}}/test"
                      hx-target="#test-result-{{.ID}}"
                      hx-swap="innerHTML"
                      hx-indicator="#spinner-{{.ID}}">
                Test
                <span id="spinner-{{.ID}}" class="htmx-indicator spinner"></span>
              </button>
              <span id="test-result-{{.ID}}"></span>
              <button class="btn btn-danger btn-sm"
                      hx-delete="/cameras/{{.ID}}"
                      hx-target="#camera-row-{{.ID}}"
                      hx-swap="outerHTML"
                      hx-confirm="Delete camera {{.Name}}?">
                Delete
              </button>
            </div>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>
{{else}}
<div class="card empty-state">
  No cameras configured yet. <a href="/cameras/new">Add one</a>.
</div>
{{end}}
{{end}}