{% extends "page_view.html" %}
{% load i18n static crispy_forms_tags mvp %}
{% block page.content-wrapper %}
  <c-page.content gap=3>
    {% block page.title %}
      <c-page.title :attrs="page">
        <c-slot name="actions">
          <c-list.toolbar />
        </c-slot>
      </c-page.title>
    {% endblock page.title %}
    {% if page_obj %}
      <c-text small>
        {% with start=page_obj.start_index end=page_obj.end_index total=page_obj.paginator.count %}
          {% blocktrans with name_plural=model_info.verbose_name_plural %}
          Showing {{ start }}-{{ end }} of {{ total }} {{ name_plural }}
          {% endblocktrans %}
        {% endwith %}
      </c-text>
    {% endif %}
    <c-list :list="object_list"
            :attrs="grid_config"
            :card="list_item_template"
            :empty_state="empty_state" />
    {% if page_obj %}
      <div class="flex-center">
        <c-pagination :page_obj="page_obj" />
      </div>
    {% endif %}
  </c-page.content>
{% endblock page.content-wrapper %}
{% block extra_js %}
  <c-modal id="filterModal" centered fade only>
    <c-form.card id="filterForm"
                 title="{% trans "Filter" %}"
                 icon="filter"
                 method="get"
                 action="{{ action|default:"." }}"
                 :form-obj="filter.form">
      <c-slot name="actions">
        <c-button text="{% trans "Submit" %}"
                  variant="primary"
                  type="submit" />
      </c-slot>
    </c-form.card>
  </c-modal>
  <c-modal id="createModal" centered fade only>
    <c-form.card id="createForm"
                 title="{% trans "Create product" %}"
                 icon="add"
                 method="post"
                 action="{{ directory.create_url }}"
                 :form-obj="create_form">
      <c-slot name="actions">
        <c-button text="{% trans "Add" %}"
                  variant="primary"
                  type="submit" />
      </c-slot>
    </c-form.card>
  </c-modal>
  {{ block.super }}
  <script src="{% static "js/list_view.js" %}"></script>
{% endblock extra_js %}