{{ template "head.html" .}}

<div id="top_img">
  <!-- <div
    style="
      background-image: url(/public/img/hack.jpg);
      background-position: bottom;
      background-size: cover;
      height: 100vh;
      position: relative;
    "
  ></div> -->
  <video src='/public/games/{{ .Data.TopHash }}.webm' autoplay loop muted
    style="
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
    "
  >
  </video>
  <div
    style="
      position: absolute;
      top: 66.66%; left: 0; right: 0; bottom: 0;
      background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
      mix-blend-mode: color;
    "
  ></div>
</div>
<!-- space below nav -->
<!-- <div style="height: calc(44px + 12px);"></div> -->


<div
  style="
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
  "
>
  {{ $top_thing := index .Data.Games .Data.TopHash }}
  <h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
    {{ $top_thing.Name }}
    <p>
      {{ $top_thing.Desc }}
      <br><br>
      <a href="/game/{{ .Data.TopHash }}">see more</a>
    </p>
  </h1>
  <!-- {{ template "title_desc.html" .}} -->
  <!-- <img src='https://media.dof.dev/kit/logotype.svg?v22' width='66.6%'>
  <div
    style="
      color: var(--col-01);
      background-color: #ffffff80;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 6px 12px;
      border-radius: 24px;
      margin-top: -32px;
    "
  >degrees of freedom development</div> -->
</div>

<h2>moves</h2>
<div
  style="
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
  "
>
{{ range $hash, $move := .Data.Moves }}
  <div
    style="
      width: 400px;
      background-color: #00000080;
    "
  >
    <div>
      <video autoplay muted
        style="
          width: 100%;
          height: 100%;
          object-fit: cover;
          padding: 0;
          margin: 0;
        "
      >
        <source src="/public/moves/{{ $hash }}.webm" type="video/webm" />
      </video>
    </div>
    <div>{{ $move.Name }}</div>
    <a href="/move/{{ $hash }}">see more</a>
  </div>
{{ end }}
</div>

<h2>games</h2>
<div
  style="
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
  "
>
{{ range $hash, $game := .Data.Games }}
  <div
    style="
      width: 400px;
      background-color: #00000080;
    "
  >
    <div>
      <video autoplay muted
        style="
          width: 100%;
          height: 100%;
          object-fit: cover;
          padding: 0;
          margin: 0;
        "
      >
        <source src="/public/games/{{ $hash }}.webm" type="video/webm" />
      </video>
    </div>
    <div>{{ $game.Name }}</div>
    <a href="/game/{{ $hash }}">see more</a>
  </div>
{{ end }}
</div>

<h2>projects</h2>
<div
  style="
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
  "
>
{{ range $hash, $project := .Data.Projects }}
  <div
    style="
      width: 400px;
      background-color: #00000080;
    "
  >
    <div>{{ $project.Name }}</div>
    <a href="/project/{{ $hash }}">see more</a>
  </div>
{{ end }}
</div>


<div style='height: 128px; width: 100%;'></div>