{{define "main-content"}}
<p2>Single templates</p2>
<section
  class="grid grid-cols-2 border-4"
  style="--brick-color: var(--expand-color)"
>
  <div class="border-2">inactive:</div>
  <div class="border-2 p-3">
    {{ block "inactive-brick" . }}
    <div
      class="h-8 w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
    ></div>
    {{ end }}
  </div>
  <div class="border-2">raised:</div>
  <div class="border-2 p-3">
    {{ block "raised-brick" . }}
    <div
      class="h-8 w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
    ></div>
    {{ end }}
  </div>
  <div class="border-2">speaker:</div>
  <div class="border-2 p-3">
    {{ block "speaker-brick" . }}
    <div
      class="h-8 w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/50 shadow-[0_0_15px_rgba(0,_0,_0,_0.5)] shadow-[hsl(var(--brick-color))] animate-pulse"
    ></div>
    {{ end }}
  </div>
  <div class="border-2">mark:</div>
  <div class="border-2 p-3">
    {{ block "mark-brick" . }}
    <div
      class="h-8 w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
    >
      X
    </div>
    {{ end }}
  </div>
</section>
<p2>For each type</p2>
<section
    class="grid grid-cols-2 border-4"
  >
  {{ range .Bricks }}
  <div class="border-2">for {{ .Name }}</div>
  <div class="border-2 p-3 flex flex-row gap-x-3"
       style="--brick-color: var({{ .ColorClass }})"
       >
    {{ template "inactive-brick" . }}
    {{ template "raised-brick" . }}
    {{ template "speaker-brick" . }}
    {{ template "mark-brick" . }}
  </div>
  {{ end }}
</section>
{{end}}