<div class="layout">
  <div class="flex flex--col w-full h-full gap--xsmall">
    <div class="border--h-5 w-full text-center">
      <div class="label">Formula 1</div>
    </div>

    <div class="item">
      <div class="meta"></div>
      <div class="flex flex-col gap--xsmall">
        <span class="value value--xsmall">{{ f1.customTitle }}</span>
        {% if f1.laps %}
          <span class="label">Laps: {{ f1.laps }}, Record: {{ f1.record }}</span>
        {% endif %}
      </div>
    </div>

    <div class="stretch">
      <div class="flex flex-row flex--center">

        <div class="stretch">
          <div class="flex flex-col flex--center-x gap--small">
            <div class="item">
              <div class="meta"></div>
              <div class="flex flex-col" style="gap: 0px !important;">
                <div class="label">Practice</div>
                <div class="value value--xxsmall value--tnums">{{ f1.seasonContext.timetables.0.start }}</div>
              </div>
            </div>

            <div class="item">
              <div class="meta"></div>
              <div class="flex flex-col" style="gap: 0px !important;">
                <div class="label">Qualifier</div>
                <div class="value value--xxsmall value--tnums">{{ f1.seasonContext.timetables.3.start }}</div>
              </div>
            </div>

            <div class="item">
              <div class="meta"></div>
              <div class="flex flex-col" style="gap: 0px !important;">
                <div class="label">Race</div>
                <div class="value value--xxsmall value--tnums">{{ f1.seasonContext.timetables.4.start }}</div>
              </div>
            </div>

          </div>
        </div>

        <div class="mr--2">
          <img class="w--32" style="filter: brightness(0%);" src="{{ f1.circuitSmallImage.url }}"/>
        </div>
      </div>
    </div>
  </div>
</div>