{{#> main}}

<header class="container">
  {{> navbar}}
</header>

<main class="container pico">

  {{#each info}}
  <article id="article">
    <p>
      {{{this}}}
    </p>
  </article>
  {{/each}}


  <section id="tables">
    <h2>VTubers</h2>
    <div class="overflow-auto">
      <table class="striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Image</th>
            <th>Theme Color</th>
            <th>Links</th>
          </tr>
        </thead>
        <tbody>
          {{#each vtubers}}
          <tr>
            <td><a href="/vtubers/{{this.slug}}">{{this.displayName}}</a></td>
            <td>{{#if this.image}}<img src="{{getCdnUrl this.image}}" alt="{{this.displayName}}" class="avatar">{{/if}}
            </td>
            <td>
              {{#if this.themeColor}}
              <span style="background: {{this.themeColor}}; padding: 0.25em 0.5em; border-radius: 4px; color: white">
                {{this.themeColor}}
              </span>
              {{else}}
              —
              {{/if}}
            </td>
            <td>
              {{#if this.twitter}}<a href="https://twitter.com/{{this.twitter}}" target="_blank">Twitter</a><br>{{/if}}
              {{#if this.twitch}}<a href="https://twitch.tv/{{this.twitch}}" target="_blank">Twitch</a><br>{{/if}}
              {{#if this.youtube}}<a href="https://youtube.com/{{this.youtube}}" target="_blank">YouTube</a><br>{{/if}}
              {{#if this.fansly}}<a href="https://fansly.com/{{this.fansly}}" target="_blank">Fansly</a><br>{{/if}}
              {{#if this.onlyfans}}<a href="https://onlyfans.com/{{this.onlyfans}}"
                target="_blank">OnlyFans</a><br>{{/if}}
              {{!-- Add more if needed --}}
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </section>

  {{> footer}}
</main>
{{/main}}