{% extends 'theme_one.html' %}
{% load i18n static static common crispy_forms_tags utils_tags crispy_extra %}
{% block head_title %}{{ view.page_header }}{% endblock %}
{% block head_media_css %}
  {{ block.super }}
  {% merge_media form inlines as media %}
  {{ media.css }}
{% 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>
    {% 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 form %}
      <div class="card">
        {% with form_helper=form.helper|disable_form_media %}
          {% crispy form form_helper %}
        {% endwith %}
      </div>
    {% endif %}

  </div>
  {#    <form method="post">#}
  {#    {% csrf_token %}#}
  {#    {{ form.as_p }}#}
  {#    <button type="submit" class="btn btn-success">start sbc</button>#}
  {#    </form>#}
  {#  {% with form_helper=form.helper|disable_form_media %}#}
  {#    {% crispy form form_helper %}#}
  {#  {% endwith %}#}
{% endblock body_content %}
{% block body_js %}
  {{ block.super }}
  {% merge_media form inlines as media %}
  {{ media.js|js_defer }}
{% endblock body_js %}