{{define "frigate_import"}}
<div class="card" style="margin-top:1rem">
  <h2 style="margin-bottom:0.25rem">Discovered Cameras</h2>
  <p class="text-muted mb-2" style="font-size:0.85rem">
    Review the details below. Credentials are parsed from Frigate's RTSP URLs and may need to be filled in manually.
    Cameras with the same name as an existing camera will be skipped.
  </p>
  <form hx-post="/cameras/import-frigate" hx-swap="none">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th style="width:2rem"></th>
            <th>Name</th>
            <th>Host / IP</th>
            <th>HTTP Port</th>
            <th>Username</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody>
          {{range $i, $cam := .Cameras}}
          <tr>
            <td>
              <input type="checkbox" name="import_select_{{$i}}" value="1" checked>
            </td>
            <td>
              <input type="hidden" name="import_name" value="{{$cam.Name}}">
              <strong>{{$cam.Name}}</strong>
            </td>
            <td>
              <input type="text" name="import_host_{{$i}}" value="{{$cam.Host}}"
                     placeholder="192.168.1.x" required style="min-width:140px">
            </td>
            <td>
              <input type="number" name="import_port_{{$i}}" value="80"
                     min="1" max="65535" style="width:80px">
            </td>
            <td>
              <input type="text" name="import_username_{{$i}}" value="{{$cam.Username}}"
                     placeholder="admin" style="min-width:100px">
            </td>
            <td>
              <input type="password" name="import_password_{{$i}}" value="{{$cam.Password}}"
                     placeholder="password" style="min-width:120px">
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    <div class="form-actions" style="margin-top:1rem">
      <button type="submit" class="btn btn-primary">Import Selected</button>
      <button type="button" class="btn btn-secondary"
              onclick="this.closest('.card').remove()">Cancel</button>
    </div>
  </form>
</div>
{{end}}