{{define "title"}}Settings{{end}}

{{define "main"}}
    <div class="container">
      <h1>Settings</h1>

      <div x-data="{ editingUsername: false}" style="display: flex; align-items: center; gap: 10px">
        <p id="username-display" x-show="!editingUsername" style="margin: 0">
          <strong>Username:</strong> {{.Username}}
        </p>

        <form
          x-show="editingUsername"
          hx-patch="/api/user"
          hx-target="#username-error-container"
          @htmx:after-request="if (event.detail.successful) editingUsername = false"
          style="display: flex; align-items: center; gap: 10px; margin: 0"
        >
          <label for="username" class="sr-only">Username:</label>
          <input
            type="text"
            id="username"
            name="username"
            required
            minlength="3"
            value="{{.Username}}"
          />
          <button type="submit" class="btn">Save</button>
        </form> 

        <button type="button" class="btn" @click="editingUsername = !editingUsername" x-text="editingUsername ? 'Cancel' : 'Edit'"></button>
      </div>
      <div id="username-error-container" style="color: red; margin-bottom: 10px"></div>

      <div x-data="{ editingEmail: false}" style="display: flex; align-items: center; gap: 10px">
        <p id="email-display" x-show="!editingEmail" style="margin: 0">
          <strong>Email:</strong> {{.Email}}
        </p>
        <form
          x-show="editingEmail"
          hx-patch="/api/user"
          hx-target="#email-error-container"
          @htmx:after-request="if (event.detail.successful) editingEmail = false"
          style="display: flex; align-items: center; gap: 10px; margin: 0"
        >
          <label for="email" class="sr-only">Username:</label>
          <input
            type="text"
            id="email"
            name="email"
            required
            minlength="3"
            value="{{.Email}}"
          />
          <button type="submit" class="btn">Save</button>
        </form>

        <button type="button" class="btn" @click="editingEmail = !editingEmail" x-text="editingEmail ? 'Cancel' : 'Edit'"></button>
      </div>
      <div id="email-error-container" style="color: red; margin-bottom: 10px"></div>


      <h2>Change password</h2>
      <form hx-patch="/api/user" hx-target="#password-error-container">
        <div class="form-group">
          <div id="password-error-container" style="color: red; margin-bottom: 10px"></div>
          <label for="current-password">Current password:</label>
          <input
            type="password"
            id="current-password"
            name="current_password"
            required
            minlength="6"
          />
        </div>

        <div class="form-group">
          <label for="new-password">New password:</label>
          <input
            type="password"
            id="new-password"
            name="new_password"
            required
            minlength="6"
          />
        </div>

        <button type="submit" class="btn">Update password</button>
      </form>
    </div>
{{end}}