{% extends "base.html" %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Language questionnaires</h1>
      <p class="lead">There is a total of {{ n_que }} language questionnaires in the database.</p>
    </div>
  </div>
  <hr class="my-4">
</header>

<body>
  <link href="https://cdn.datatables.net/v/dt/dt-2.2.1/b-3.2.1/sp-2.3.3/sl-3.0.0/datatables.min.css" rel="stylesheet">
  <br>
  <br>
  <br>
  <div class="card-table">
    <h5 class="card-title">Language questionnaires</h5>
    <div class="card-body">
      <h6 class="card-subtitle mb-2 text-muted">Showing the last 20 language questionnaires in database. Click IDs to
        see a language questionnaire details.</h6>
      <div width="10%">{{ data["table"]|safe }}</div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/v/dt/dt-2.2.1/b-3.2.1/sp-2.3.3/sl-3.0.0/datatables.min.js"></script>
  <script>
    let table = new DataTable(
      '#quetable',
      {
        layout: {
          topStart: {
            searchPanes: {
              columns: [3, 4, 6, 8, 4],
            },

          }
        },
      });
  </script>
</body>
{% endblock content %}