{{define "title"}}{{.Title}}{{end}}
{{define "content"}}
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Calendars</h1>
  </div>
</header>

<div rst-list>
  {{range .Data.Calendars}}
  <div rst-row>
    <span rst-row-lead cal-dot aria-hidden="true" style="--cal-hue: {{.Hue}}"></span>
    <span rst-row-main>
      <a href="/calendars/{{.ID}}/share">{{.Name}}</a>
      {{/* The role is said in words. Colour and position carry none of
           it — a viewer needs to know they cannot edit before they try. */}}
      <small rst-row-sub>{{if eq .Kind "team"}}Shared with the team{{else}}Yours{{end}} · you can {{if canWrite .Role}}edit{{else}}read{{end}}</small>
    </span>
    <a rst-row-action href="/calendars/{{.ID}}.ics">Export</a>
  </div>
  {{end}}
</div>
{{end}}