{{template "base.html" .}}

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

{{define "content"}}
<h1>{{if .Camera.ID}}Edit Camera{{else}}Add Camera{{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 .Camera.ID}}/cameras/{{.Camera.ID}}{{else}}/cameras{{end}}">
    {{if .Camera.ID}}<input type="hidden" name="_method" value="PUT">{{end}}

    <div class="form-row">
      <div class="form-group">
        <label for="name">Display Name</label>
        <input type="text" id="name" name="name" value="{{.Camera.Name}}" required placeholder="Front Door">
      </div>
      <div class="form-group">
        <label for="host">Host / IP Address</label>
        <input type="text" id="host" name="host" value="{{.Camera.Host}}" required placeholder="192.168.1.100">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="port">HTTP Port</label>
        <input type="number" id="port" name="port" value="{{if .Camera.Port}}{{.Camera.Port}}{{else}}80{{end}}" required min="1" max="65535">
      </div>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" value="{{.Camera.Username}}" required placeholder="admin">
      </div>
    </div>

    <div class="form-group">
      <label for="password">Password {{if .Camera.ID}}<span class="text-muted">(leave blank to keep current)</span>{{end}}</label>
      <input type="password" id="password" name="password" placeholder="{{if .Camera.ID}}••••••••{{else}}Enter password{{end}}">
    </div>

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