{% extends "beam/base.html" %}
{% load i18n %}
{% load beam_tags %}

{% block extra_scripts %}{{ block.super }}{{ form.media.js }}{% for inline in inlines %}{{ inline.formset.media.js }}{% endfor %}{% endblock %}
{% block extra_styles %}{{ block.super }}{{ form.media.css }}{% for inline in inlines %}{{ inline.formset.media.css }}{% endfor %}{% endblock %}

{% block content %}
    <form method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}


        <section class="beam-main">
            <div class="container">
                {% block links %}
                    <div class="float-right beam-links">
                        {% include "beam/partials/links.html" with links=viewset.links link_layout=component.link_layout %}
                    </div>
                {% endblock %}

                {% block heading %}
                    <h1>
                        {% if heading %}{{ heading }}{% else %}
                        {% get_options component.model as options %}
                        {% blocktrans with verbose_name=options.verbose_name %}Create {{ verbose_name }}{% endblocktrans %}
                        {% endif %}
                    </h1>
                {% endblock %}

                {% block form_buttons_top %}
                    <div class="container-fluid mb-2">
                        <div class="row">
                            <div class="btn-group ml-auto">
                                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
                            </div>
                        </div>
                    </div>
                {% endblock %}

                {% block form_errors %}
                    {% if form.non_field_errors %}
                        <div class="alert alert-block alert-danger">
                            <ul class="mb-0">
                                {{ form.non_field_errors|unordered_list }}
                            </ul>
                        </div>
                    {% endif %}
                {% endblock %}

                <div class="card bg-light mb-4">
                    <div class="card-body">
                        <div class="card-text">
                            {% block details %}
                                {% include "beam/partials/form_layout.html" with form=form fields=component.fields layout=component.layout %}
                            {% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {% block above_inlines %}{% endblock %}

        {% block inlines %}
            {% for inline in inlines %}
                {% include "beam/partials/form_inline.html" %}
            {% endfor %}
        {% endblock %}

        {% block below_inlines %}{% endblock %}

        <section>
            <div class="container">
                {% block form_buttons %}
                    <div class="container-fluid mb-2">
                        <div class="row">
                            <div class="btn-group ml-auto">
                                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
                            </div>
                        </div>
                    </div>
                {% endblock %}
            </div>
        </section>
    </form>
{% endblock %}
