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

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

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

{% block content %}
  <div class='table-responsive'>
    <table class="table table-dark table-striped table-bordered table-hover"
          id="items_by_date"
          data-order='[[ 1, "desc" ]]'>
      <thead>
        <th scope="col">
          Item
        </th>
        <th scope="col">
          Count
        </th>
        <th scope="col">
          Breakdown
        </th>
        <th scope="col">
          Rarity
        </th>
      </thead>
      <tbody>
        {% for lot, details in data.items() %}
          <tr>
            <td>
              {{ lot|get_lot_name }}
            </td>
            <td>
              {% if details.chars %}
                {{ details.item_count }}
              {% else %}
                {{ details }}
              {% endif %}
            </td>
            <td>
              {% if details.chars %}
                {% for char, value in details.chars|dictsort(false, 'value')|reverse %}
                  {{char}}: {{value}}<br/>
                {% endfor %}
              {% else %}
                Missing
              {% endif %}
            </td>
            <td>
              {{ lot|get_lot_rarity }}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock  %}

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