{{define "content"}}
<div class="container-fluid p-3" style="max-width: 600px">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mb-0">{{if .EditUser}}Edit User{{else}}New User{{end}}</h4>
    <a href="/users" class="btn btn-sm btn-outline-secondary ms-auto">Back to Users</a>
  </div>

  {{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}

  <div class="card mb-3">
    <div class="card-body">
      <form method="post" action="{{if .EditUser}}/users/{{.EditUser.ID}}{{else}}/users{{end}}">
        <div class="mb-3">
          <label class="form-label">Username</label>
          <input type="text" class="form-control" name="username" value="{{if .EditUser}}{{.EditUser.Username}}{{end}}" required autofocus>
        </div>
        {{if not .EditUser}}
        <div class="mb-3">
          <label class="form-label">Password</label>
          <input type="password" class="form-control" name="password" required autocomplete="new-password">
        </div>
        {{end}}
        <div class="mb-3">
          <label class="form-label">Role</label>
          <select class="form-select" name="role">
            <option value="user" {{if .EditUser}}{{if eq .EditUser.Role "user"}}selected{{end}}{{end}}>User</option>
            <option value="admin" {{if .EditUser}}{{if eq .EditUser.Role "admin"}}selected{{end}}{{end}}>Admin</option>
          </select>
        </div>
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" name="enabled" id="enabled" {{if .EditUser}}{{if .EditUser.Enabled}}checked{{end}}{{else}}checked{{end}}>
          <label class="form-check-label" for="enabled">Enabled</label>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
      </form>
      {{if .EditUser}}
      <form method="post" action="/users/{{.EditUser.ID}}/delete" class="d-inline mt-2" onsubmit="return confirm('Delete this user?')">
        <button type="submit" class="btn btn-outline-danger">Delete User</button>
      </form>
      {{end}}
    </div>
  </div>

  {{if .EditUser}}
  <div class="card">
    <div class="card-header py-2 fw-semibold">Change Password</div>
    <div class="card-body">
      <form method="post" action="/users/{{.EditUser.ID}}/password" class="row g-2 align-items-end">
        <div class="col">
          <label class="form-label">New Password</label>
          <input type="password" class="form-control" name="password" autocomplete="new-password">
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-outline-primary">Set Password</button>
        </div>
      </form>
    </div>
  </div>
  {{end}}
</div>
{{end}}