<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Code dataset {{ dataset.name }}</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="/static/assets/favicon.ico" />
    <!-- Bootstrap icons-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
      rel="stylesheet"
    />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="/static/css/styles.css" rel="stylesheet" />
    <link href="/static/css/cactool.css" rel="stylesheet" />
    <script src="/static/js/twitter.js"></script>
    <script src="/static/js/code.js"></script>
    <script src="/static/bin/tiktok_embed.js"></script>
  </head>
  <body
    class="d-flex flex-column h-100"
    onload="initialise('{{ dataset.id }}', {{  dataset.columns | map(attribute='id')  | list | safe }}, {{ dataset.columns | map(attribute='type.value') | list | safe }})">
    <main class="flex-shrink-0">
      <!-- Navigation-->
      {% include 'navigation.html' %} {% include 'flash.html' %}
      <!-- Page Content-->
      <section class="py-5">
        <div class="container px-5 my-5">
          <div class="text-center mb-5">
            <h1 class="fw-bolder">{{ dataset.name }}</h1>
            <p class="lead fw-normal text-muted mb-0">Coding dataset</p>
          </div>
          <div>
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Prompt</th>
                <th style="width: 10px;"></th>
                <th scope="col" style="text-align: center;">Data</th>
              </tr>
            </thead>
            <tbody>
            {% for column in dataset.ordered_columns %}
                {% if column.type.value != "HIDDEN" %}
                    <tr>
                    <th scope="row" style="width: 0; whitespace: no-wrap">{{ column.prompt }}</th>
                    <th style="width: 10px;"></th>
                    <th scope="row" class="text-centre;">
                      <div
                      id="column-{{ column.id }}"
                      class="text-centre"></div>
                    </th>
                    </tr> 
                {% endif %}
            {% endfor %}
            </tbody>
            </table>
          </div>
          <br>
          <div class="row gy-1">
            <a onclick="submit()" class="btn btn-primary">Submit</a>
            <a onclick="skip()" class="btn btn-warning">Skip</a>
            <a onclick="post_unavailable()" class="btn btn-danger">The post doesn't show</a>
          </div>
        </div>
      </section>
    </main>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
