{{define "profile"}}
{{template "header" .}}
<main id="main" class="wrap profile-page">
  <p class="eyebrow">Account</p>
  <h1>Profile</h1>
  {{if .Error}}<p class="banner error" role="alert">{{.Error}}</p>{{end}}

  <form class="profile-form" method="post" action="/profile" enctype="multipart/form-data">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">

    <div class="profile-avatar">
      {{if .User.AvatarURL}}
        <img class="avatar" src="{{.User.AvatarURL}}" alt="" width="96" height="96">
      {{else}}
        <div class="avatar avatar-empty" aria-hidden="true">{{slice .User.Username 0 1}}</div>
      {{end}}
      <div class="avatar-fields">
        <label for="avatar">Profile picture</label>
        {{if .UploadsEnabled}}
          <input id="avatar" name="avatar" type="file" accept="image/jpeg,image/png,image/webp,.jpg,.jpeg,.png,.webp">
          <p class="hint">JPEG, PNG, or WebP · max 2MB</p>
        {{else}}
          <p class="hint">Avatar uploads are not configured on this server.</p>
        {{end}}
      </div>
    </div>

    <label for="state">State</label>
    <select id="state" name="state">
      <option value=""{{if eq .StateVal ""}} selected{{end}}>Prefer not to say</option>
      {{range .States}}
        <option value="{{.Code}}"{{if eq $.StateVal .Code}} selected{{end}}>{{.Name}}</option>
      {{end}}
    </select>
    <p class="hint">Optional. Sharing your state helps answers line up with local plumbing codes.</p>

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

  <section class="profile-questions" aria-labelledby="profile-q-heading">
    <h2 id="profile-q-heading">{{.QuestionsLabel}}</h2>
    {{if .Questions}}
      <ul class="profile-q-list">
        {{range .Questions}}
          <li>
            <a href="/questions/{{.ID}}">{{.Title}}</a>
            <span class="meta">{{.HuntDate}}</span>
          </li>
        {{end}}
      </ul>
    {{else}}
      <p class="muted">Nothing here yet.</p>
    {{end}}
  </section>
</main>
{{template "footer" .}}
{{end}}