{% from "macros.html" import show_dataset %}
<!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>{{ dataset.name }}</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="/satic/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" />
  </head>
  <body class="d-flex flex-column h-100">
    <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">Viewing dataset</p>
          </div>
          <div class="row gx-5">
            <!-- FAQ Accordion 1-->
            <!-- <h2 class="fw-bolder mb-3">Account &amp; Billing</h2> -->
            <div class="accordion mb-5" id="accordionExample">
              {{ show_dataset(dataset, current_user) }}
            </div>
          </div>
          
          <div class="text-center mb-5">
            <h1 class="fw-bolder h4">Coder Invite Link</h1>
          </div>
          <div class="input-group">
            <input class="form-control" value="{{ invite_link }}" readonly style="background-color: transparent; font-family: monospace;">
          </div>
          
          <br/>

          <div class="text-center mb-5">
            <h1 class="fw-bolder h4">Data Types</h1>
          </div>
          <div>
            <form id="types" action="/dataset/update" method="post">
                <input type="hidden" name="dataset_id" value="{{ dataset.id }}">
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Column Name</th>
                      <th scope="col">Question Type</th>
                      <th scope="col">Prompt</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for column in dataset.columns %}
                    <tr>
                    <th scope="row">{{ column.name }}</th>
                    <th scope="row">
                      <select name="{{ column.name }}-type" class="form-select" aria-label="Default select example">
                        <option>Select Data Type</option>
                        <option {{ 'selected' if column.type.value == SOCIAL_MEDIA else '' }} value="SOCIAL_MEDIA">Social Media URL</option>
                        <option {{ 'selected' if column.type.value == STRING else '' }} value="STRING">Text</option>
                        <option {{ 'selected' if column.type.value == NUMBER else ''}} value="NUMBER">Number</option>
                        <option {{ 'selected' if column.type.value == BOOLEAN else ''}} value="BOOLEAN">True / False</option>
                        <option {{ 'selected' if column.type.value == HIDDEN else ''}} value="HIDDEN">Hidden</option>
                        <option {{ 'selected' if column.type.value == ONE_TO_THREE else ''}} value="ONE_TO_THREE">Scale from 1 to 3</option>
                        <option {{ 'selected' if column.type.value == ONE_TO_FIVE else ''}} value="ONE_TO_FIVE">Scale from 1 to 5</option>
                        <option {{ 'selected' if column.type.value == ONE_TO_SEVEN else ''}} value="ONE_TO_SEVEN">Scale from 1 to 7</option>
                      </select>
                    </th>
                    <th scope="row"><input value="{{ column.prompt }}" class="form-control" name="{{ column.name }}-prompt"/></th>
                    </tr> 
                    {% endfor %}
                  </tbody>
                </table>
            </form>
          </div>

          <div class="row gx-5">
            <input type=submit form="types" href="/dataset/update" class="btn btn-outline-dark" value="Update dataset"/>
          </div>
          <br>
          <form hidden id="delete" method="POST" action="/dataset/delete/">
            <input name="dataset_id" value="{{dataset.id}}" hidden/>
            <input name="confirm" value="false" hidden/>
          </form>
          <div class="row gx-5">
            <input type="submit" form="delete" href="/dataset/delete/{{ dataset.id }}" class="btn btn-outline-danger" value="Delete dataset"/>
          </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>
