{% load i18n %}
{% load helpers %}
{% load static %}
{% load form_helpers %}

<div class="row my-2">
    <div class="col col-md-5">
        <div class="card mb-3">
        
            <div class="card-body">
                <strong style="font-size: 15px;">Sync your Slurp'it IPAM to Nautobot</strong><br />
                <span>
                    After obtaining IPAM information from Slurp'it, Set default values for some values before inserting them into the Nautobot.
                    <br /><br />
                    <strong>Note:</strong> In Nautobot 2.x+, uniqueness is defined by IP Address + Namespace. Therefore, IP Address + VRF uniqueness is not supported.
                </span>
            </div>
        </div>
    </div>
</div>

<div class="row my-2">
    <div class="col col-md-5">
        <div class="card">
            <div class="tab-pane fade show active ipam-tab-pane" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
            <form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
                {% csrf_token %}
                <input type="hidden" value="ipam" name="mappingtype"/>
                <div class="card-body">
                    <div id="form_fields">
                        <div class="field-group my-2">
                            {% render_field form.enable_reconcile %}
                            {% render_field form.status %}
                            {% render_field form.ignore_status %}
                            {% render_field form.namespace %}
                            {% render_field form.type %}
                            {% render_field form.ignore_type %}
                            {% render_field form.role %}
                            {% render_field form.ignore_role %}
                            {% render_field form.vrf %}
                            {% render_field form.ignore_vrf %}
                            {% render_field form.dns_name %}
                            {% render_field form.ignore_dns_name %}
                            {% render_field form.tenant_group %}
                            {% render_field form.tenant %}
                            {% render_field form.ignore_tenant %}
                            {% render_field form.description %}
                            {% render_field form.ignore_description %}
                        </div>
                    </div>
                </div>
               
                <div class="card-footer text-end">
                    <button type="submit" name="_update" class="btn btn-primary protect-btn">
                        {% trans "Save" %}
                    </button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>

<style>

  .ipam-tab-pane .form-horizontal .form-group {
    margin-left: 0px !important;
    margin-right: 0px !important;
  } 
  .ipam-tab-pane .checkbox {
    padding-top: 0px !important;
    min-height: 20px !important;
  }  

  .ipam-tab-pane label.text-lg-end {
    text-align: left !important;
  }
  .ipam-tab-pane .mb-3 {
    margin-bottom: 8px;

  }
  
  html[data-nautobot-color-mode=dark] .ipam-tab-pane .mb-3 {
    margin-bottom: 3px !important;
  }

  .ipam-tab-pane .form-text {
    display: none !important;
  }

  .ipam-tab-pane .col-md-9{
    padding: 0px !important
  }

  .ipam-tab-pane #form_fields .field-group {
    display: grid;
  }
  .ipam-tab-pane .form-group {
    display: flex;
    align-items: center;
  }
  .ipam-tab-pane .form-group .col-md-3 {
    width: 30% !important;
  }
  .ipam-tab-pane .form-group:first-child .offset-md-3 {
    margin-left: 0% !important
  }
  .ipam-tab-pane .offset-md-3 {
    margin-left: 25% !important
  }
  .ipam-tab-pane .form-group .checkbox {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .ipam-tab-pane input[type='text'] {
    height: 34px;
    border-radius: 3px;
  }

  .ipam-tab-pane label {
    display: flex;
    align-items: center;
    line-height: 15px;
    padding: auto !important;
    margin: 0px !important
  }
</style>