{% extends 'base/layout.html' %}
{% load helpers %}
{% load form_helpers %}

{% block title %}Create {{ component_type }}{% endblock %}

{% render_errors form %}

{% block content %}
<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row">
        <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
            <div class="field-group">
                <h5 class="text-center">{{ component_type|title }}</h5>
                    {% for field in form.hidden_fields %}
                        {{ field }}
                    {% endfor %}
                    {% for field in form.visible_fields %}
                        {% if not form.custom_fields or field.name not in form.custom_fields %}
                            {% render_field field %}
                        {% endif %}
                    {% endfor %}
                {% if form.custom_fields %}
                    <div class="field-group">
                        <h5 class="text-center">Custom Fields</h5>
                        {% render_custom_fields form %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="row my-3">
        <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
            {% block buttons %}
                <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
                
                {% if component_type == 'interface' and perms.ipam.add_ipaddress %}
                    <button type="submit" name="_assignip" class="btn btn-outline-success">
                        Create & Assign IP Address
                    </button>
                {% endif %}
                
                <button type="submit" name="_addanother" class="btn btn-outline-primary">
                    Create & Add Another
                </button>
                
                <button type="submit" name="_create" class="btn btn-primary">
                    Create
                </button>
            
            {% endblock %}
        </div>
    </div>
</form>
{% endblock %}