{{template "base.html" .}}

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

{{define "content"}}
<div class="flex items-center justify-between mb-2">
  <h1>Automations</h1>
  <a href="/automations/new" class="btn btn-primary">+ Add Automation</a>
</div>

{{if .Automations}}
<div class="card" style="padding:0">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Trigger</th>
          <th>Camera</th>
          <th>Actions</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{range .Automations}}
        <tr id="automation-row-{{.ID}}">
          <td><strong>{{.Name}}</strong></td>
          <td><span class="badge badge-info">{{.TriggerType}}</span></td>
          <td>{{if eq .TriggerCamera "*"}}<span class="text-muted">any</span>{{else}}{{.TriggerCamera}}{{end}}</td>
          <td>
            {{range parseActions .Actions}}
            <span class="badge badge-info" style="margin:1px">{{.Type}}</span>
            {{end}}
          </td>
          <td>
            {{if .Enabled}}
              <span class="badge badge-success">Enabled</span>
            {{else}}
              <span class="badge badge-danger">Disabled</span>
            {{end}}
          </td>
          <td>
            <div class="flex gap-sm items-center">
              <a href="/automations/{{.ID}}/edit" class="btn btn-secondary btn-sm">Edit</a>
              <button class="btn btn-danger btn-sm"
                      hx-delete="/automations/{{.ID}}"
                      hx-target="#automation-row-{{.ID}}"
                      hx-swap="outerHTML"
                      hx-confirm="Delete automation {{.Name}}?">
                Delete
              </button>
            </div>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>
{{else}}
<div class="card empty-state">
  No automations yet. <a href="/automations/new">Create one</a>.
</div>
{{end}}
{{end}}