{% extends "base.html" %}
{% load static %}
{% load helpers %}
{% load form_helpers %}
{% block content %}
<form method="post" class="form form-horizontal">
    {% csrf_token %}
    {% for form in forms %}
        {% for field in form.hidden_fields %}
            {{ field }}
        {% endfor %}
        {% if form.non_field_errors %}
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="card border-danger">
                        <div class="card-header bg-danger-subtle border-danger text-body"><strong>Errors ({{ form.prefix | bettertitle }})</strong></div>
                        <div class="card-body">
                            {{ form.non_field_errors }}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
        <h3>{% block title %}Create peering{% endblock title %}</h3>
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header"><strong>Endpoint A</strong></div>
                        <div class="card-body">
                            {% render_form peerendpoint_a_form %}
                        </div>
                </div>
            </div>
            <div class="col-lg-2 text-center" style="padding-top: 90px;">
                <i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
            </div>
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header"><strong>Endpoint Z</strong></div>
                        <div class="card-body">
                            {% render_form peerendpoint_z_form %}
                        </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 offset-lg-3">
                <div class="card">
                    <div class="card-header"><strong>Peering</strong></div>
                    <div class="card-body">
                        {% render_form peering_form %}
                    </div>
                </div>
            </div>
        </div>
        <div class=class="nb-form-sticky-footer">
            <div class="col-lg-12 text-center">
                <button type="submit" name="_update" class="btn btn-primary">Create</button>
                <a href="{{ return_url }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
</form>
{% endblock content %}