{% extends "base.html" %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Language questionnaires&nbsp;&nbsp;<i class="fa fa-file"></i></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/bs5/jq-3.7.0/dt-2.2.1/b-3.2.1/fh-4.0.1/sp-2.3.3/sl-3.0.0/datatables.min.css"
    rel="stylesheet">
  <div class="div-center">
    <div class="card-table">
      <div width="10%">{{ data["table"]|safe }}</div>
    </div>
  </div>
  <script
    src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.2.1/b-3.2.1/fh-4.0.1/sp-2.3.3/sl-3.0.0/datatables.min.js"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/tables.js') }}"></script>
  <script>
    let table = new dt("#quetable", searchCols = [3], hideCols = [2, 12, 13], queStatusCol = 3)

    table.on('click', 'td', function (e) {
      let tr = e.target.closest('tr');
      let row = table.row(tr);
      if (row.child.isShown()) {
        row.child.hide();
      }
      else {
        row.child(format_que(row.data())).show();
      }
    });
  </script>
</body>
{% endblock content %}