{% extends 'generic/_base.html' %}
{% load i18n %}
{% load form_helpers %}

{% block title %}{% trans "Import Transform Maps" %}{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-8 offset-md-2">
    <div class="card">
      <h5 class="card-header">{% trans "Import Transform Maps from JSON" %}</h5>
      <div class="card-body">
        <p class="text-muted">
          {% blocktrans trimmed %}
            Upload a JSON file that was previously exported from this plugin.
            All transform maps, field maps, and relationship maps contained in
            the file will be created. Groups referenced in the file will be
            created automatically if they do not already exist.
          {% endblocktrans %}
        </p>
        <p class="text-warning">
          <span class="mdi mdi-alert-circle-outline" aria-hidden="true"></span>
          {% blocktrans trimmed %}
            Import runs inside a single database transaction. If any entry
            conflicts with an existing map (same group + endpoint + target model),
            the entire import is rolled back and no changes are saved.
          {% endblocktrans %}
        </p>

        {% if form.non_field_errors %}
          <div class="alert alert-danger">
            {% for error in form.non_field_errors %}
              <p>{{ error }}</p>
            {% endfor %}
          </div>
        {% endif %}

        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="px-5">
            {% render_form form %}
          </div>
          <div class="d-flex justify-content-end gap-2 mt-3">
            <a href="{% url 'plugins:ipfabric_netbox:ipfabrictransformmap_list' %}" class="btn btn-outline-secondary">
              {% trans "Cancel" %}
            </a>
            <button type="submit" class="btn btn-primary">
              <span class="mdi mdi-upload" aria-hidden="true"></span>
              {% trans "Import" %}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}