{{define "content"}}
{{$data := .Content}}
<section class="mb-4">
  <div>
    <div class="text-uppercase small fw-semibold text-primary mb-2"><i class="ti ti-user-cog me-1"></i>Account</div>
    <h1 class="display-6 fw-bold mb-2"><i class="ti ti-settings-2 me-2"></i>User Settings</h1>
    <p class="text-body-secondary mb-0">Password, 2FA, and your display mode.</p>
  </div>
</section>

{{if $data.Message}}
<div class="alert alert-success border-0 shadow-sm"><i class="ti ti-circle-check me-2"></i>{{$data.Message}}</div>
{{end}}
{{if $data.Error}}
<div class="alert alert-danger border-0 shadow-sm"><i class="ti ti-alert-circle me-2"></i>{{$data.Error}}</div>
{{end}}

<section class="row g-4">
  <div class="col-12 col-xl-4">
    <article class="card border-0 shadow-sm settings-nav-card h-100">
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-4">
          <div class="brand-mark-lg">
            <i class="ti ti-user"></i>
          </div>
          <div class="min-w-0">
            <div class="fw-bold text-body-emphasis text-truncate">{{with .User}}{{.Name}}{{end}}</div>
            <div class="small text-body-secondary text-truncate">{{with .User}}{{.Email}}{{end}}</div>
            <div class="small text-body-secondary text-truncate text-uppercase">{{with .User}}{{.Role}}{{end}}</div>
          </div>
        </div>
        <div class="settings-nav-list">
          <a class="settings-nav-link is-active" href="#account-security"><i class="ti ti-lock"></i><span>Security</span></a>
          <a class="settings-nav-link" href="#account-appearance"><i class="ti ti-sun-moon"></i><span>Appearance</span></a>
          <a class="settings-nav-link" href="#account-profile"><i class="ti ti-user-circle"></i><span>Profile</span></a>
        </div>
      </div>
    </article>
  </div>

  <div class="col-12 col-xl-8">
    <div class="vstack gap-4">
      <article class="card border-0 shadow-sm settings-section-card" id="account-profile">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
              <h2 class="h4 mb-1"><i class="ti ti-user-circle me-2"></i>Profile</h2>
              <div class="small text-body-secondary">Current account details.</div>
            </div>
          </div>
          <div class="row g-3">
            <div class="col-12 col-md-6">
              <div class="settings-info-tile">
                <div class="small text-uppercase text-body-secondary fw-semibold mb-2">Name</div>
                <div class="fw-semibold">{{with .User}}{{.Name}}{{end}}</div>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="settings-info-tile">
                <div class="small text-uppercase text-body-secondary fw-semibold mb-2">Email</div>
                <div class="fw-semibold">{{with .User}}{{.Email}}{{end}}</div>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="settings-info-tile">
                <div class="small text-uppercase text-body-secondary fw-semibold mb-2">Role</div>
                <div class="fw-semibold">{{with .User}}{{.Role}}{{end}}</div>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="settings-info-tile">
                <div class="small text-uppercase text-body-secondary fw-semibold mb-2">2FA</div>
                <div class="fw-semibold">{{if $data.OTPEnabled}}Enabled{{else}}Disabled{{end}}</div>
              </div>
            </div>
          </div>
        </div>
      </article>

      <article class="card border-0 shadow-sm settings-section-card" id="account-security">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
              <h2 class="h4 mb-1"><i class="ti ti-lock me-2"></i>Password</h2>
              <div class="small text-body-secondary">Update your sign-in password.</div>
            </div>
          </div>
          <form method="post" action="/settings/user/password">
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label">Current password</label>
                <input type="password" class="form-control" name="current_password" required>
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label">New password</label>
                <input type="password" class="form-control" name="new_password" required>
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label">Confirm password</label>
                <input type="password" class="form-control" name="confirm_password" required>
              </div>
            </div>
            <div class="mt-4">
              <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Save password</button>
            </div>
          </form>
        </div>
      </article>

      <article class="card border-0 shadow-sm settings-section-card">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
              <h2 class="h4 mb-1"><i class="ti ti-shield-lock me-2"></i>Two-factor authentication</h2>
              <div class="small text-body-secondary">Manage OTP authentication for your account.</div>
            </div>
            {{if $data.OTPEnabled}}
            <span class="badge text-bg-success">Enabled</span>
            {{else}}
            <span class="badge text-bg-secondary">Pending</span>
            {{end}}
          </div>

          {{if $data.OTPEnabled}}
          <div class="d-flex flex-wrap gap-2">
            <form method="post" action="/settings/user/2fa/reset">
              <button type="submit" class="btn btn-outline-primary"><i class="ti ti-refresh me-2"></i>Reset 2FA</button>
            </form>
            <form method="post" action="/settings/user/2fa/disable">
              <button type="submit" class="btn btn-outline-danger"><i class="ti ti-lock-off me-2"></i>Disable 2FA</button>
            </form>
          </div>
          {{else}}
          <div class="row g-4 align-items-center">
            <div class="col-12 col-lg-4">
              <div class="otp-qr-card text-center">
                <img alt="OTP QR code" src="{{$data.OTPQRCode}}">
              </div>
            </div>
            <div class="col-12 col-lg-8">
              <form method="post" action="/settings/user/2fa/enable">
                <div class="mb-3">
                  <label class="form-label">Secret</label>
                  <input type="text" class="form-control" readonly value="{{$data.OTPSecret}}">
                </div>
                <div class="mb-4">
                  <label class="form-label">Authenticator code</label>
                  <input type="text" class="form-control" name="code" inputmode="numeric" required>
                </div>
                <button type="submit" class="btn btn-primary"><i class="ti ti-shield-check me-2"></i>Enable 2FA</button>
              </form>
            </div>
          </div>
          {{end}}
        </div>
      </article>

      <article class="card border-0 shadow-sm settings-section-card" id="account-appearance">
        <div class="card-body p-4">
          <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
              <h2 class="h4 mb-1"><i class="ti ti-sun-moon me-2"></i>Appearance</h2>
              <div class="small text-body-secondary">Choose how Maintainarr looks for you.</div>
            </div>
          </div>
          <form method="post" action="/settings/user/theme">
            <div class="row g-3 mb-4">
              <div class="col-12 col-md-6">
                <input type="radio" class="btn-check" name="mode" id="user-theme-dark" value="dark" {{if eq $data.CurrentMode "dark"}}checked{{end}}>
                <label class="theme-card d-block h-100" for="user-theme-dark">
                  <span class="theme-swatch swatch-dark"></span>
                  <strong>Dark</strong>
                  <small>Default night view</small>
                </label>
              </div>
              <div class="col-12 col-md-6">
                <input type="radio" class="btn-check" name="mode" id="user-theme-light" value="light" {{if eq $data.CurrentMode "light"}}checked{{end}}>
                <label class="theme-card d-block h-100" for="user-theme-light">
                  <span class="theme-swatch swatch-light"></span>
                  <strong>Light</strong>
                  <small>Bright daytime view</small>
                </label>
              </div>
            </div>
            <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Save appearance</button>
          </form>
        </div>
      </article>
    </div>
  </div>
</section>
{{end}}
