{% extends 'base.html' %}

{% block title %}Predefined Languages{% endblock %}

{% block header %}Predefined Languages{% endblock %}

{% block body %}

<div style="width: 70%">
<table id="languagetable" class="table dataTable no-footer" style="margin: 0;">
  <thead>
    <tr>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    {% for language in predefined %}
    <tr>
      <td>
        <a href="/language/load_predefined/{{ language.name }}">
          {{ language.name }}
        </a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>

<script>
  var language_listing_table;

  let setup_lang_datatable = function() {
    lang_listing_table = $('#languagetable').DataTable({
      responsive: true,
      select: false,
      lengthMenu: [ 10, 25, 50 ],
      pageLength: 25,
      paging: true,
      info: true,
      searching: true,
      processing: true,
    });
  }; // end setup_lang_datatable

  $(document).ready(function () {
    setup_lang_datatable();
  });
</script>

{% endblock %}
