{% extends 'base.html.j2' %}

{% block title %}
  Currency on {{ date }}
{% endblock title %}

{% block content_before %}
  Currency on {{ date }}
{% endblock content_before %}

{% block content %}
  <div class='table-responsive'>
    <table class="table table-dark table-striped table-bordered table-hover"
          id="currency_by_date"
          data-order='[[ 1, "desc" ]]'>
      <thead>
        <th scope="col">
          Character
        </th>
        <th scope="col">
          Currency
        </th>
      </thead>
      <tbody>
        {% for name, currency in data.items() %}
          <tr>
            <td>
              {{ name }}
            </td>
            <td>
              {{ currency }}
            </td>

          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock  %}

{% block js %}
  {{ super () }}
  <script>
    $(document).ready(function(){
        let currency_by_date = $('#currency_by_date').DataTable({
            "processing": false,
            "serverSide": false,
          });
        });
  </script>
{% endblock %}