<!doctype HTML>
<html>
  <head>
    <title>ProtoTurk</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" href="/static/bootstrap-4.3.1.min.css">
    <script src="/static/jquery-3.4.1.js"></script>
    <script>
    $(document).ready(function() {
      var total_tasks = {{ total_tasks }};

      for (var i = 0; i < total_tasks; i++) {
        $('#task_list').append(
          $('<a>').addClass('list-group-item list-group-item-action list-group-item-primary')
                  .attr('href', '/task/' + i)
                  .text('Task #' + i));
      }
    });
    </script>
    <style>
    .table-fit {
      white-space: nowrap;
      width: 1px;
    }
    th {
      text-align: right;
    }

    #turk_files_used {
      margin-top: 1em;
      margin-bottom: 1em;
    }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <nav class="navbar navbar-dark bg-dark">
        <span class="navbar-brand">
          ProtoTurk
        </span>
      </nav>

      <div id="turk_files_used">
        <table class="table table-borderless table-fit table-sm">
          <tbody>
            <tr>
              <th>
                HTML template:
              </td>
              <td>
                <i>{{ html_template_filename }}</i>
              </td>
            </tr>
            <tr>
              <th>
                CSV file:
              </td>
              <td>
                <i>{{ csv_filename }}</i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="task_list" class="list-group">
      </div>
    </div><!-- /.container-fluid -->
  </body>
</html>
