{{define "main-content"}}
<div style="--d: 10rem;">

<h2>For each type</h2>
<section class="grid grid-cols-6 border-4 gap-4">
  <p>types:</p>
  <p> inactive </p>
  <p> raised </p>
  <p> speaker </p>
  <p> mark </p>
  <p> mark and active </p>
  {{ range .Gestures }}
  {{ with .GetGestureInfo }}
  <div class="border-2">for {{ .Name }}</div>
  <div>{{ template "inactiveBrick" .Color }}</div>
  <div>{{ template "raisedBrick" .Color }}</div>
  <div>{{ template "speakerBrick" .Color }}</div>
  <div>{{ template "markBrick" .Color }}</div>
  <div>{{ template "markAndRaisedBrick" .Color }}</div>
  {{ end }}
  {{ end }}
</section>


<h2>Now for BrickData taking parametrized template name</h2>
{{ template "brick" .ABrick }}

<h2>Now for a person</h2>
<div class="border p-3">
{{ template "personBlocks" .TestPerson }}
</div>


<h2>And now i'll want to get all persons for a room</h2>
<div class="grid place-content-center p-10">
  {{ template "roomPeople" .ARoom }}
</div>

{{end}}

</div>