{% extends "theme_one.html" %}
{% load i18n static common crispy_forms_tags utils_tags crispy_extra django_tables2 %}
{% block head_title %}{{ view.page_header }}{% endblock %}
{% block head_media_css %}
  {% if filter %}
    {{ filter.form.media.css }}
  {% endif %}
  {% if dashboard_layout %}
    {{ dashboard_layout.media.css }}
  {% endif %}
  {{ block.super }}
{% endblock %}
{% block body_content %}
  {{ block.super }}
  <div class="container-fluid">
    <div class="d-flex bd-highlight py-2">
      <h4 class="flex-grow-1" style="font-weight: bold">
        {{ view.page_header }}
      </h4>
      <div class="btn-group">
        {% if view.get_back_url %}
          <a class="btn btn-gray" href="{{ view.get_back_url }}">{% trans 'Back' %}</a>
        {% endif %}
        {% if view.add_url %}
          <a class="btn btn-green" href="{{ view.add_url }}">{% trans 'Add' %}</a>
        {% endif %}
        {% if view.get_extra_buttons %}
          {% for btn in view.get_extra_buttons %}
            <a class="btn {{ btn.color }}" href="{{ btn.url }}">{{ btn.text }}</a>
          {% endfor %}
        {% endif %}
      </div>

    </div>
    {% if filter %}
      <div class="row card-view">
        <form method="get">
          {% crispy filter.form %}
        </form>
      </div>
    {% endif %}

    {% with view.get_card_data as cards_data %}
      <div class="row justify-content-center p-3">
        {% for item in cards_data %}
          <div class="col-auto card p-3 text-center m-1 {{ item.box_css_class }}">
            <div>{{ item.name }}</div>
            <div>{{ item.info }}</div>
          </div>
        {% endfor %}
      </div>
    {% endwith %}
    {% if dashboard_layout %}
      {% include 'generic_views/dashboard-cards/dashboard-layout.html' %}
    {% endif %}
    {% if form %}
      <div class="row">
        <div class="col-12">
          {% with form_helper=form.helper|disable_form_media %}
            {% crispy form form_helper %}
          {% endwith %}
        </div>
      </div>
    {% endif %}

    {% if table %}
      <div class="row card py-2 table-responsive">
        {% include 'generic_views/partial/table_index_count.html' %}
        {% render_table table 'generic_views/partial/list_view_table.partial.html' %}
      </div>
    {% endif %}
  </div>
{% endblock body_content %}
{% block body_js %}
  {{ block.super }}
  {% if dashboard_layout %}
    {{ dashboard_layout.media.js }}
  {% endif %}
  {% if filter %}
    {{ filter.form.media.js }}
  {% endif %}
{% endblock %}