<script>
  let Stream = new GetJson("/api/stream/1");
  let Links = new PaginateTable("/api/stream/1/links");
</script>

<div x-init="item = await Stream.item()" x-data="{item: {}}">
  <block style="--value: 7">
  <h1 x-text="item.title"></h1>

    <div>
      <p x-text="item.description"></p>
    </div>
  </block>

  <block class="bg-gray-800">
    <h2>Links Posted</h2>

    <ul x-data="Links">
      <template x-for="item in contents">
        <li><a x-text="item.description" x-bind:href="item.url"></a></li>
      </template>
    </ul>
  </block>

  <block class="horizontal">
  <grid class="grid-cols-2">
  <shape class="xs">Left Image</shape>
  <div>
    <h3>I stream on Twitch.</h3>

    <p>I stream every day at 10AM/10PM EST time.  60% of the time it's a chill laid back stream with only programming and a bit of talking about programming.  30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.</p>

    <a href="https://twitch.tv/zedashaw"><button style="--value: 2; --text: 9">Watch me on Twitch</button></a>
  </div>
  </grid>
  </block>
</div>
