{{define "content"}}
{{$d := .}}
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
  <h1>Organisations</h1>
  <a href="/orgs/new" class="btn btn-primary">+ New organisation</a>
</div>

{{if $d.Orgs}}
<div style="display:flex; flex-direction:column; gap:12px;">
  {{range $d.Orgs}}
  <a href="/orgs/{{.Org.Slug}}" style="text-decoration:none;">
    <div class="card" style="display:flex; justify-content:space-between; align-items:center; padding:18px 24px; cursor:pointer; transition:border-color 0.15s;" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor=''">
      <div>
        <div style="font-size:16px; font-weight:700; color:var(--text);">{{.Org.Name}}</div>
        <div style="font-size:12px; color:var(--text3); margin-top:3px;">{{.Org.Slug}}</div>
      </div>
      <span style="font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--accent-glow); color:var(--accent2);">{{.Role}}</span>
    </div>
  </a>
  {{end}}
</div>
{{else}}
<div class="card empty-state">
  <div style="font-size:48px; margin-bottom:16px;">🏢</div>
  <h3>No organisations yet</h3>
  <p style="margin-bottom:20px;">Create one to start planning team finances.</p>
  <a href="/orgs/new" class="btn btn-primary">Create organisation</a>
</div>
{{end}}
{{end}}