{{template "base.html" .}}

{{define "title"}}{{if .Automation.ID}}Edit Automation{{else}}Add Automation{{end}} — Reolink Controller{{end}}

{{define "content"}}
<h1>{{if .Automation.ID}}Edit Automation{{else}}Add Automation{{end}}</h1>

{{if .Error}}
<div class="card" style="border-color:var(--danger);margin-bottom:1rem">
  <span class="text-danger">{{.Error}}</span>
</div>
{{end}}

<div class="card">
  <form method="POST" action="{{if .Automation.ID}}/automations/{{.Automation.ID}}{{else}}/automations{{end}}">
    {{if .Automation.ID}}<input type="hidden" name="_method" value="PUT">{{end}}

    <!-- Basic -->
    <div class="form-section">
      <h3>General</h3>
      <div class="form-row">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" value="{{.Automation.Name}}" required placeholder="Motion: Front Door Floodlight">
        </div>
        <div class="form-group" style="display:flex;align-items:flex-end;padding-bottom:0.1rem">
          <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;color:var(--text)">
            <input type="checkbox" name="enabled" value="1" {{if .Automation.Enabled}}checked{{end}}>
            Enabled
          </label>
        </div>
      </div>
    </div>

    <!-- Trigger -->
    <div class="form-section">
      <h3>Trigger</h3>
      <div class="form-row">
        <div class="form-group">
          <label for="trigger_type">Event Type</label>
          <select id="trigger_type" name="trigger_type" required>
            <option value="motion"  {{if eq (print .Automation.TriggerType) "motion"}}selected{{end}}>Motion (ON/OFF)</option>
            <option value="event"   {{if eq (print .Automation.TriggerType) "event"}}selected{{end}}>Object Detected (event)</option>
            <option value="review"  {{if eq (print .Automation.TriggerType) "review"}}selected{{end}}>Alert / Review</option>
            <option value="object"  {{if eq (print .Automation.TriggerType) "object"}}selected{{end}}>Object State Topic</option>
          </select>
        </div>
        <div class="form-group">
          <label for="trigger_camera">Camera <span class="text-muted">(leave blank for any)</span></label>
          <input type="text" id="trigger_camera" name="trigger_camera"
                 value="{{if eq .Automation.TriggerCamera "*"}}{{else}}{{.Automation.TriggerCamera}}{{end}}"
                 placeholder="front_door (or blank for all)">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="trigger_object">Object Label <span class="text-muted">(for event/object types)</span></label>
          <input type="text" id="trigger_object" name="trigger_object"
                 value="{{.Automation.TriggerObject}}" placeholder="person, car, …">
        </div>
        <div class="form-group">
          <label for="confidence_min">Min Confidence <span class="text-muted">(0–100%)</span></label>
          <input type="number" id="confidence_min" name="confidence_min"
                 value="{{printf "%.0f" (mul .Automation.ConfidenceMin 100)}}"
                 min="0" max="100" placeholder="0">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="time_from">Active From <span class="text-muted">(optional)</span></label>
          <input type="time" id="time_from" name="time_from" value="{{.Automation.TimeFrom.String}}">
        </div>
        <div class="form-group">
          <label for="time_to">Active Until <span class="text-muted">(optional)</span></label>
          <input type="time" id="time_to" name="time_to" value="{{.Automation.TimeTo.String}}">
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="form-section">
      <h3>Actions</h3>
      <div id="actions-container">
        {{range $i, $a := parseActions .Automation.Actions}}
        {{template "action_row" actionRowData $i $a $.Cameras}}
        {{end}}
      </div>
      <button type="button" class="btn btn-secondary btn-sm"
              hx-get="/partials/action-row"
              hx-target="#actions-container"
              hx-swap="beforeend"
              hx-vals='{"index": "{{len (parseActions .Automation.Actions)}}", "camera_count": "{{len .Cameras}}"}'
              hx-include="[name='_action_count']">
        + Add Action
      </button>
      <input type="hidden" name="_action_count" id="_action_count"
             value="{{len (parseActions .Automation.Actions)}}">
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">
        {{if .Automation.ID}}Save Changes{{else}}Create Automation{{end}}
      </button>
      <a href="/automations" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>

<script>
  // Keep _action_count in sync after each "Add Action" insertion
  document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.detail.target.id === 'actions-container') {
      const blocks = document.querySelectorAll('.action-block');
      document.getElementById('_action_count').value = blocks.length;
    }
  });
</script>
{{end}}