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

<div class="row my-2">
  <div class="col col-md-5">
    <div class="card">

      <div class="card-body">
        <h4>Sync your Slurp'it VRF to NetBox</h4>
        <span>
          After obtaining VRF information from Slurp'it, Set default values for some values before inserting them into
          the NetBox.
        </span>
      </div>
    </div>
  </div>
  <div class="row my-2">
    <div class="col col-md-5">
      <div class="card">
        <div class="card-body">
          <div class="tab-pane show active vrf-tab-pane" id="edit-form" role="tabpanel"
            aria-labelledby="object-list-tab">
            <form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
              {% csrf_token %}
              <div id="form_fields">
                <input type="hidden" value="vrf" name="mappingtype" />
                <div class="field-group my-2">
                  {% render_field form.enable_reconcile %}
                  {% render_field form.tenant_group %}
                  {% render_field form.tenant %}
                  {% render_field form.ignore_tenant %}
                  {% render_field form.owner_group %}
                  {% render_field form.owner %}
                  {% render_field form.ignore_owner %}
                  {% render_field form.description %}
                  {% render_field form.ignore_description %}
                  {% render_field form.interfaces %}
                  {% render_field form.ignore_interfaces %}
                </div>
              </div>

              <div class="text-end mt-3">
                <button type="submit" name="_update" class="btn btn-primary protect-btn">
                  {% trans "Save" %}
                </button>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<style>
  .vrf-tab-pane label.text-lg-end {
    text-align: left !important;
  }

  .vrf-tab-pane .mb-3 {
    margin-bottom: 3px !important;
  }

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

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

  .vrf-tab-pane .row:first-child .offset-3 {
    margin-left: 0px !important;
  }

  .vrf-tab-pane .offset-3 {
    margin-bottom: 8px;
  }
</style>

<script>
  // Select the button using the hx-target attribute and class
  const buttons = document.querySelectorAll('button[hx-target="#htmx-modal-content"]');

  // Iterate through the NodeList and remove each button
  buttons.forEach(button => {
    button.remove();
  });
</script>