{{define "content"}}
<h1>Your profile</h1>
<div class="error-box" id="error" role="alert"></div>
<div class="ok-box" id="ok" role="status"></div>

<div class="card">
  <h2>Avatar</h2>
  <div class="spread">
    <span id="avatar-preview">
      {{if .User.AvatarFileID}}
        <img class="avatar large" src="/files/{{.User.AvatarFileID}}" alt="Current avatar">
      {{else}}
        <span class="avatar large" aria-hidden="true">{{initials .User.Name}}</span>
      {{end}}
    </span>
    <div>
      <label for="avatar-file">Upload new avatar (image)</label>
      <input type="file" id="avatar-file" accept="image/*">
    </div>
  </div>
</div>

<form id="profile-form" class="card" data-version="{{.User.Version}}">
  <h2>Basics</h2>
  <div class="field">
    <label for="p-name">Name</label>
    <input type="text" id="p-name" value="{{.User.Name}}" required>
  </div>
  <div class="field">
    <label for="p-bio">Bio</label>
    <textarea id="p-bio">{{.User.Bio}}</textarea>
  </div>

  <h2>Contact</h2>
  <div class="row">
    <div class="field">
      <label for="p-phone">Phone</label>
      <input type="text" id="p-phone" value="{{.User.Contact.Phone}}" autocomplete="tel">
    </div>
    <div class="field">
      <label for="p-location">Location</label>
      <input type="text" id="p-location" value="{{.User.Contact.Location}}">
    </div>
  </div>
  <div class="field">
    <label for="p-links">Links (one per line)</label>
    <textarea id="p-links">{{range .User.Contact.Links}}{{.}}
{{end}}</textarea>
  </div>

  <h2>Additional fields</h2>
  <p class="hint">Arbitrary key/value details shown on your profile card.</p>
  <div id="extra-rows"></div>
  <button class="btn small" type="button" id="extra-add">+ Add field</button>

  <h2 class="mt">Appearance</h2>
  <div class="field">
    <label for="p-theme">Theme</label>
    <select id="p-theme">
      <option value="light" {{if eq .User.Settings.Theme "light"}}selected{{end}}>Light (beige)</option>
      <option value="dark" {{if eq .User.Settings.Theme "dark"}}selected{{end}}>Dark</option>
    </select>
  </div>

  <button class="btn primary" type="submit">Save profile</button>
</form>

<div class="card">
  <h2>Security</h2>
  {{if .HasLocalAuth}}
  <p><a class="btn" href="/change-password">Change password</a></p>
  {{else}}
  <p class="muted">This account signs in via SSO and has no local password.</p>
  {{end}}
  <p><button class="btn danger" type="button" id="logout-all">Log out everywhere</button></p>
  <p class="hint">Revokes every active session for your account, including this one.</p>
</div>
{{end}}