{{- /* 
    websites.tmpl ~ List of websites with accordion.
*/ -}}
{{- define "content" }}
<div class="accordion accordion-flush" id="websitesAccordion">
{{- range .accordion -}}
{{- $state := " collapsed" }}
    <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button{{- if .Open }}{{else}}  collapsed{{end}}" type="button" 
            data-bs-toggle="collapse" data-bs-target="#collapse{{ .ID }}" aria-expanded="{{ .Open }}" aria-controls="collapse{{ .ID }}">
            {{ .Name }}
          </button>
        </h2>
        <div id="collapse{{ .ID }}" class="accordion-collapse collapse{{- if .Open }} show{{end}}">
          <div class="accordion-body">
            <div class="row row-cols-1 row-cols-md-2 g-4">
              {{- range .Sites -}}
                  {{- block "website" . -}}{{ "<!-- {{ .ID }} range of sites -->" | safeHTML -}}{{end}}
              {{- end}}
            </div>
          </div>
        </div>
      </div>
{{- end}}
</div>
{{- end}}