{{define "content"}}
<div class="container-fluid p-3">
  <h4 class="mb-3">Settings</h4>
  <div class="row g-3">
    <div class="col-md-3 col-lg-2">
      {{template "settings_nav" "users"}}
    </div>
    <div class="col-md-9 col-lg-10" style="max-width: 600px">
      <div class="d-flex align-items-center mb-3">
        <h5 class="mb-0">{{if .EditUser}}Edit User{{else}}New User{{end}}</h5>
        <a href="/settings/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}}/settings/users/{{.EditUser.ID}}{{else}}/settings/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="/settings/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="/settings/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>
  </div>
</div>
{{end}}