{{define "dashboard"}}
<div class="sg-container">
  <h1 style="font-size: 2.5rem; font-weight: 700;">{{.T.dossiers}}</h1>

  <div class="profiles-grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
    {{range .AccessibleDossiers}}
    {{if .NewGroup}}<hr class="grid-separator">{{end}}
    <div class="card sg-profile-card {{borderLevel .Stats.TotalCount}}">
      <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 style="flex: 1; min-width: 0;">
            <div class="card-name-row">
              <h3>{{.Name}}{{with langFlag .Lang}} <span class="card-flag">{{.}}</span>{{end}}</h3>
              {{if .CanEdit}}<span class="card-actions" onclick="event.preventDefault(); event.stopPropagation();">
                <a href="/dossier/{{.DossierID}}/upload" data-tooltip="{{$.T.upload_files}}">&#8682;</a>
                <a href="/dossier/{{.DossierID}}/edit" data-tooltip="{{$.T.edit}}">&#9998;</a>
              </span>{{end}}
              {{if eq .RelationInt 99}}<form method="POST" action="/dossier/{{.DossierID}}/revoke" class="card-actions" style="margin: 0;" onclick="event.stopPropagation();" onsubmit="event.stopPropagation(); return confirm('Remove demo dossier from your list?')"><input type="hidden" name="accessor_id" value="{{$.Dossier.DossierID}}"><button type="submit" class="edit-link" data-tooltip="{{$.T.remove}}" style="background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 5px; font-size: 1.1rem;">&#10005;</button></form>{{end}}
            </div>
            <p class="card-meta">{{if .IsSelf}}{{$.T.you}}{{else 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>
            <p class="card-context">{{if .Context}}{{.Context}}{{else}}&nbsp;{{end}}</p>
          </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}}