noctbot/web/src/routes/dashboard/contest/_components/ContestEntry.svelte

<script>
  export let contest = {};
  export let index = 0;
  let visible = false;

  function toggleView() {
    visible = !visible;
  }
</script>

<style>
  h3 {
    @apply .font-bold;
  }
</style>

<tr class="entry" data-nth={index % 2 == 0 ? 'even' : 'odd'}>
  <td>{contest.id}</td>
  <td>
    <pre>{contest.channel}</pre>
  </td>
  <td>{contest.started.toISOString()}</td>
  <td>{contest.entryDuration}</td>
  <td>{contest.voteDuration}</td>
  <td>
    <button class="btn" on:click={toggleView}>View info and actions</button>
  </td>
</tr>

{#if visible}
  <tr class="info">
    <td colspan="6">
      <h3>Actions</h3>
      <div class="py-1 pb-4">
        <button class="btn" disabled="disabled">End entry phase</button>
        <button class="btn">Start voting</button>
        <button class="btn">End vote phase</button>
        <button class="btn">Announce winners</button>
      </div>

      {#if contest.winners}
        <h3>Winners</h3>
        <div class="py-1">
          <ol class="list-decimal list-inside">
            {#each contest.winners as winner}
              <li>{winner}</li>
            {/each}
          </ol>
        </div>
      {/if}
    </td>
  </tr>
{/if}