{{define "content"}}
<section class="user-head">
  <h1>{{.Login}}</h1>
  <p class="meta">
    {{if .Meta}}Generated {{fmtTime .Meta.GeneratedAt}}
    · {{.Meta.Scope}} data
    · {{.Meta.Options.TZ}}
    · week starts {{.Meta.Options.StartOfWeek}}
    · {{end}}<a href="https://github.com/{{.Key}}" rel="noopener">GitHub profile</a>
  </p>
</section>

{{if .Notice}}<p class="alert alert-info" role="status">{{.Notice}}</p>{{end}}

{{if .Job.Active}}
<div class="alert alert-progress" id="progress" data-status-url="/u/{{.Key}}/status">
  <span class="spinner" aria-hidden="true"></span>
  <div>
    <p id="progress-text" role="status" aria-live="polite">{{if eq .Job.State "queued"}}Queued{{if .Job.Position}}, position {{.Job.Position}}{{end}}{{else}}Running: {{.Job.Stage}}{{end}}</p>
    <p class="hint" id="progress-elapsed"></p>
    <p class="hint">Large profiles take a few minutes. This page refreshes when the cards are ready.</p>
  </div>
</div>
{{else if eq .Job.State "failed"}}
<p class="alert alert-error" role="alert">The last generation failed: {{.Job.Error}}</p>
{{end}}

{{if .Meta}}
<form class="toolbar" method="get" action="/u/{{.Key}}">
  <label for="theme">Theme</label>
  <select id="theme" name="theme">
    {{range .Themes}}<option value="{{.}}"{{if eq . $.Theme}} selected{{end}}>{{.}}</option>
    {{end}}
  </select>
  <button type="submit">Apply</button>
</form>

<ul class="cards">
  {{range .Cards}}
  <li class="card">
    <figure>
      <div class="card-image"><img src="{{.Src}}" alt="{{.Name}} card for {{$.Login}}" decoding="async"></div>
      <figcaption><span class="card-name">{{.Name}}</span></figcaption>
    </figure>
  </li>
  {{end}}
</ul>
{{end}}

{{if not .Job.Active}}
<section class="panel">
  <h2>{{if .Meta}}Regenerate{{else}}Try again{{end}}</h2>
  {{if .ExpiresIn}}<p class="hint">These cards are deleted in about {{.ExpiresIn}}; regenerate to see them again after that.</p>{{end}}
  {{if .CooldownLeft}}<p class="hint">With a sign-in or token for another account, these cards can be regenerated in {{.CooldownLeft}}. As {{.Login}}, you can regenerate now.</p>{{end}}
  {{template "form" .}}
</section>
{{end}}
{{end}}