{% extends request.resolver_match.app.base_template_name|default:'viewflow/base_page.html' %}
{% load i18n viewflow %}

{% block extrahead %}
  {{ block.super }}
  {{ form.media }}
{% endblock %}

{% block content %}
  <div class="mdc-layout-grid vf-page__grid">
    <div class="mdc-layout-grid__inner">
      {% block form-cell %}
        <div class="mdc-layout-grid__cell {% block detail-cell-span %}mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone{% endblock %}">
          <div class="mdc-card vf-card">
            <section class="vf-card__header">
              {% block form-header-title %}
                <h1 class="vf-card__title">
                  {% if view.object.pk %}
                    {{ view.object }}
                  {% else %}
                    {% trans 'New' %}
                  {% endif %}
                </h1>
              {% endblock %}
              {% block form-header-subtitle %}
                <h2 class="vf-card__breadcrumbs">
                  {% block breadcrumbs_items %}
                    <a href="{% current_viewset_reverse viewset 'list' %}">{{ view.model|verbose_name_plural|title }}</a>
                    {% if view.object.pk %}
                      {% current_viewset_reverse viewset 'detail' view.object.pk as detail_url %}
                      {% if detail_url  %}
                        <a href="{{ detail_url }}">{{ view.object }}</a>
                      {% endif %}
                    {% endif %}
                    <a>{% if view.object.pk %}{% if detail_url %}{% trans 'Change' %}{% else %}{{ view.object }}{% endif %}{% else %}{% trans 'Add' %}{% endif %}</a>
                  {% endblock %}
                </h2>
              {% endblock %}
              {% block form-header-menu %}
                <div class="vf-card__menu">
                  {% include 'viewflow/includes/view_action_menu.html' with view=view only %}
                </div>
              {% endblock %}
            </section>

            {% block form %}
              <vf-form>
                <form class="vf-form" method="POST" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
                  {% csrf_token %}
                  <section class="vf-card__form">
                    {% if form.layout %}
                      {% render form form.layout %}
                    {% else %}
                      {% render form view.layout %}
                    {% endif %}
                  </section>
                  {% block form-actions %}
                    <section class="mdc-card__actions vf-card__actions">
                      {% block form-actions-list %}
                        <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised" type="submit">{% trans "Save" %}</button>
                      {% endblock %}
                    </section>
                  {% endblock %}
                </form>
              </vf-form>
            {% endblock form %}
          </div>
        </div>
      {% endblock form-cell %}
    </div>
  </div>
{% endblock content %}
