{% extends 'base.html' %}

{% block title %} - Sets table{% endblock %}

{% block main %}
<div class="container-fluid">
  <h2 class="border-bottom lh-base pb-1">
    <i class="ri-table-line"></i> Sets table
    <button type="button" class="btn btn-sm btn-outline-secondary ms-1" id="sets-table-clear-filters">
      <i class="ri-filter-off-line"></i> Clear filters
    </button>
  </h2>

  <div id="sets-table"></div>
</div>

<!-- Data for building the storage/purchase location select editors -->
<script type="application/json" id="sets-table-storages">
  {{ brickset_storages | tojson }}
</script>
<script type="application/json" id="sets-table-purchase-locations">
  {{ brickset_purchase_locations | tojson }}
</script>

<!-- URL templates: the literal string ID_PLACEHOLDER is swapped for the -->
<!-- real set id client-side, so the JS never has to hardcode paths -->
<script type="application/json" id="sets-table-urls">
  {{
    {
      'data': url_for('set.table_data'),
      'description': url_for('set.update_description', id='ID_PLACEHOLDER'),
      'storage': url_for('set.update_storage', id='ID_PLACEHOLDER'),
      'purchase_location': url_for('set.update_purchase_location', id='ID_PLACEHOLDER'),
      'purchase_date': url_for('set.update_purchase_date', id='ID_PLACEHOLDER'),
      'purchase_price': url_for('set.update_purchase_price', id='ID_PLACEHOLDER'),
      'details': url_for('set.details', id='ID_PLACEHOLDER'),
    } | tojson
  }}
</script>
{% endblock %}