{{define "action_row"}}
<div class="action-block" id="action-block-{{.Index}}">
  <div class="action-header">
    <strong style="font-size:0.85rem">Action {{add .Index 1}}</strong>
    <button type="button" class="btn btn-danger btn-sm"
            onclick="this.closest('.action-block').remove(); reindexActions()">
      Remove
    </button>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label>Action Type</label>
      <select name="action_type_{{.Index}}"
              hx-get="/partials/action-params"
              hx-target="#action-params-{{.Index}}"
              hx-swap="innerHTML"
              hx-include="this"
              hx-vals='{"index": "{{.Index}}"}'
              onchange="this.form && this.form.querySelector('#_action_count')">
        <option value="floodlight"    {{if eq .Action.Type "floodlight"}}selected{{end}}>Floodlight</option>
        <option value="siren"         {{if eq .Action.Type "siren"}}selected{{end}}>Siren</option>
        <option value="ptz_preset"    {{if eq .Action.Type "ptz_preset"}}selected{{end}}>PTZ Preset</option>
        <option value="ir_mode"       {{if eq .Action.Type "ir_mode"}}selected{{end}}>IR Mode</option>
        <option value="osd_timestamp" {{if eq .Action.Type "osd_timestamp"}}selected{{end}}>OSD Timestamp</option>
      </select>
    </div>
    <div class="form-group">
      <label>Target Camera</label>
      <select name="action_camera_{{.Index}}">
        <option value="0">Same as trigger camera</option>
        {{range .Cameras}}
        <option value="{{.ID}}" {{if eq .ID $.Action.TargetCameraID}}selected{{end}}>{{.Name}}</option>
        {{end}}
      </select>
    </div>
  </div>

  <div id="action-params-{{.Index}}">
    {{template "action_params" actionParamsData .Index .Action.Type .Action.Params}}
  </div>

  <div class="form-group">
    <label>Auto-revert after (seconds, 0 = permanent)</label>
    <input type="number" name="action_duration_{{.Index}}"
           value="{{.Action.DurationSecs}}" min="0" placeholder="0">
  </div>
</div>
{{end}}