{{define "dashboard"}}
<div class="sg-container">
  <h1 style="font-size: 2.5rem; font-weight: 700;">{{.T.dossiers}}</h1>
  <p class="intro" style="font-size: 1.15rem; font-weight: 300; line-height: 1.8;">{{.T.dossiers_intro}}</p>

  <div class="profiles-grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
    <!-- Self dossier -->
    <div class="card sg-profile-card {{borderLevel .SelfStats.TotalCount}}" style="position: relative;">
      <div class="card-actions">
        <a href="/dossier/{{.Dossier.DossierID}}/upload" title="{{.T.upload_files}}">&#8682;</a>
        <a href="/dossier/{{.Dossier.DossierID}}/edit" title="{{.T.edit}}">&#9998;</a>
      </div>
      <a href="/dossier/{{.Dossier.DossierID}}" style="text-decoration: none; color: inherit; display: contents;">
        <div class="profile-header">
          <div class="avatar" style="background: {{initialColor .Dossier.DossierID}};">{{initials .Dossier.Name}}</div>
          <div>
            <h3>{{.Dossier.Name}}{{with langFlag .Dossier.Preferences.Language}} <span class="card-flag">{{.}}</span>{{end}}</h3>
            <p class="card-meta">{{.T.you}}</p>
          </div>
        </div>
        <p class="sg-profile-dob">{{printf "%.10s" .Dossier.DateOfBirth}}{{with age .Dossier.DateOfBirth}} · {{.}}{{end}}{{if .Dossier.Sex}} · {{sexT .Dossier.Sex .Lang}}{{end}}</p>
        <div class="sg-profile-stats">
          {{if .SelfStats.Chips}}
            {{range .SelfStats.Chips}}<span class="sg-profile-chip {{.Color}}">{{.Icon}} {{if .Count}}{{.Count}} {{end}}{{.Label}}</span>{{end}}
            {{if .SelfStats.OverflowCount}}<span class="sg-profile-chip chip-muted">+{{.SelfStats.OverflowCount}} more</span>{{end}}
          {{else}}
            <span class="sg-profile-chip chip-muted">No data yet</span>
          {{end}}
        </div>
      </a>
    </div>

    <!-- Accessible dossiers -->
    {{range .AccessibleDossiers}}
    {{if .NewGroup}}<hr class="grid-separator">{{end}}
    <div class="card sg-profile-card {{borderLevel .Stats.TotalCount}}" style="position: relative;">
      {{if .CanEdit}}<div class="card-actions">
        <a href="/dossier/{{.DossierID}}/upload" title="{{$.T.upload_files}}">&#8682;</a>
        <a href="/dossier/{{.DossierID}}/edit" title="{{$.T.edit}}">&#9998;</a>
      </div>{{end}}
      {{if eq .RelationInt 99}}<form method="POST" action="/dossier/{{.DossierID}}/revoke" style="position: absolute; top: 16px; right: 16px; margin: 0;" onsubmit="return confirm('Remove demo dossier from your list?')"><input type="hidden" name="accessor_id" value="{{$.Dossier.DossierID}}"><button type="submit" class="edit-link" title="{{$.T.remove}}" style="background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;">&#10005;</button></form>{{end}}
      <a href="/dossier/{{.DossierID}}" style="text-decoration: none; color: inherit; display: contents;">
        <div class="profile-header">
          <div class="avatar" style="background: {{initialColor .DossierID}};">{{initials .Name}}</div>
          <div>
            <h3>{{.Name}}{{with langFlag .Lang}} <span class="card-flag">{{.}}</span>{{end}}</h3>
            <p class="card-meta">{{if eq .RelationInt 99}}{{$.T.role}}: {{.Relation}}{{else}}{{$.T.my_role}}: {{.Relation}}{{if .IsCareReceiver}} · <span class="badge badge-care">{{$.T.care}}</span>{{end}}{{end}}</p>
            {{if .Context}}<p class="card-context">{{.Context}}</p>{{end}}
          </div>
        </div>
        <p class="sg-profile-dob">{{printf "%.10s" .DateOfBirth}}{{with age .DateOfBirth}} · {{.}}{{end}}{{if .Sex}} · {{sexT .Sex $.Lang}}{{end}}</p>
        <div class="sg-profile-stats">
          {{if .Stats.Chips}}
            {{range .Stats.Chips}}<span class="sg-profile-chip {{.Color}}">{{.Icon}} {{if .Count}}{{.Count}} {{end}}{{.Label}}</span>{{end}}
            {{if .Stats.OverflowCount}}<span class="sg-profile-chip chip-muted">+{{.Stats.OverflowCount}} more</span>{{end}}
          {{else}}
            <span class="sg-profile-chip chip-muted">No data yet</span>
          {{end}}
        </div>
      </a>
    </div>
    {{end}}

    <!-- Add dossier card -->
    <a href="/dossier/add" class="card card-add" style="min-height: 140px;">
      <span class="plus">+</span>
      <span>{{.T.add_dossier}}</span>
    </a>
  </div>

  {{template "footer"}}
</div>
{{end}}