{% extends 'base.html' %}
{% load form_helpers %}

{% block title %}Build IPsec Tunnel{% endblock %}

{% block content %}
<div class="row">
  <div class="col-md-10 col-lg-8">

    {# ------------------------------------------------------------------ #}
    {# Page header                                                          #}
    {# ------------------------------------------------------------------ #}
    <div class="d-flex align-items-center mb-4">
      <span class="mdi mdi-vpn mdi-36px text-primary me-3"></span>
      <div>
        <h1 class="mb-0">Build IPsec Tunnel</h1>
        <p class="text-muted mb-0">
          Configure a policy-based IKEv1 or IKEv2 IPsec tunnel on a Cisco IOS-XE device.
        </p>
      </div>
    </div>

    {# ------------------------------------------------------------------ #}
    {# Django messages                                                      #}
    {# ------------------------------------------------------------------ #}
    {% if messages %}
      {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endfor %}
    {% endif %}

    {# ------------------------------------------------------------------ #}
    {# Form                                                                 #}
    {# ------------------------------------------------------------------ #}
    <form method="post" novalidate>
      {% csrf_token %}

      {# ---- Device ---------------------------------------------------- #}
      <div class="card mb-4">
        <div class="card-header bg-primary text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-router-network me-2"></span>Target Device
          </h5>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <label for="{{ form.device.id_for_label }}" class="form-label fw-semibold">
              {{ form.device.label }} <span class="text-danger">*</span>
            </label>
            {{ form.device }}
            {% if form.device.help_text %}
              <div class="form-text">{{ form.device.help_text }}</div>
            {% endif %}
            {% for error in form.device.errors %}
              <div class="invalid-feedback d-block">{{ error }}</div>
            {% endfor %}
          </div>
        </div>
      </div>

      {# ---- IKE Version + Remote Peer --------------------------------- #}
      <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-key-chain me-2"></span>IKE Version &amp; Remote Peer
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-4">
              <label for="{{ form.ike_version.id_for_label }}" class="form-label fw-semibold">
                {{ form.ike_version.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ike_version }}
              {% if form.ike_version.help_text %}
                <div class="form-text">{{ form.ike_version.help_text }}</div>
              {% endif %}
              {% for error in form.ike_version.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.remote_peer_ip.id_for_label }}" class="form-label fw-semibold">
                {{ form.remote_peer_ip.label }} <span class="text-danger">*</span>
              </label>
              {{ form.remote_peer_ip }}
              {% if form.remote_peer_ip.help_text %}
                <div class="form-text">{{ form.remote_peer_ip.help_text }}</div>
              {% endif %}
              {% for error in form.remote_peer_ip.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- Interesting Traffic (Crypto ACL) -------------------------- #}
      <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-filter me-2"></span>Interesting Traffic (Crypto ACL)
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-4">
              <label for="{{ form.local_network.id_for_label }}" class="form-label fw-semibold">
                {{ form.local_network.label }} <span class="text-danger">*</span>
              </label>
              {{ form.local_network }}
              {% if form.local_network.help_text %}
                <div class="form-text">{{ form.local_network.help_text }}</div>
              {% endif %}
              {% for error in form.local_network.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.remote_network.id_for_label }}" class="form-label fw-semibold">
                {{ form.remote_network.label }} <span class="text-danger">*</span>
              </label>
              {{ form.remote_network }}
              {% if form.remote_network.help_text %}
                <div class="form-text">{{ form.remote_network.help_text }}</div>
              {% endif %}
              {% for error in form.remote_network.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.crypto_acl_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.crypto_acl_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.crypto_acl_name }}
              {% if form.crypto_acl_name.help_text %}
                <div class="form-text">{{ form.crypto_acl_name.help_text }}</div>
              {% endif %}
              {% for error in form.crypto_acl_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- Crypto Map ------------------------------------------------- #}
      <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-map me-2"></span>Crypto Map
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-5">
              <label for="{{ form.wan_interface.id_for_label }}" class="form-label fw-semibold">
                {{ form.wan_interface.label }} <span class="text-danger">*</span>
              </label>
              {{ form.wan_interface }}
              {% if form.wan_interface.help_text %}
                <div class="form-text">{{ form.wan_interface.help_text }}</div>
              {% endif %}
              {% for error in form.wan_interface.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.crypto_map_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.crypto_map_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.crypto_map_name }}
              {% for error in form.crypto_map_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-3">
              <label for="{{ form.crypto_map_sequence.id_for_label }}" class="form-label fw-semibold">
                {{ form.crypto_map_sequence.label }} <span class="text-danger">*</span>
              </label>
              {{ form.crypto_map_sequence }}
              {% if form.crypto_map_sequence.help_text %}
                <div class="form-text">{{ form.crypto_map_sequence.help_text }}</div>
              {% endif %}
              {% for error in form.crypto_map_sequence.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- Shared IKE Parameters ------------------------------------- #}
      <div class="card mb-4">
        <div class="card-header bg-info text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-swap-horizontal me-2"></span>Shared IKE Parameters
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-6">
              <label for="{{ form.ike_dh_group.id_for_label }}" class="form-label fw-semibold">
                {{ form.ike_dh_group.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ike_dh_group }}
              {% if form.ike_dh_group.help_text %}
                <div class="form-text">{{ form.ike_dh_group.help_text }}</div>
              {% endif %}
              {% for error in form.ike_dh_group.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-6">
              <label for="{{ form.ike_lifetime.id_for_label }}" class="form-label fw-semibold">
                {{ form.ike_lifetime.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ike_lifetime }}
              {% if form.ike_lifetime.help_text %}
                <div class="form-text">{{ form.ike_lifetime.help_text }}</div>
              {% endif %}
              {% for error in form.ike_lifetime.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- IKEv1 Settings (shown only when IKEv1 selected) ----------- #}
      <div class="card mb-4" id="ikev1-section">
        <div class="card-header bg-warning text-dark">
          <h5 class="mb-0">
            <span class="mdi mdi-key me-2"></span>IKEv1 / ISAKMP Settings
            <span class="badge bg-secondary ms-2">IKEv1 only</span>
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-4">
              <label for="{{ form.isakmp_policy_priority.id_for_label }}" class="form-label fw-semibold">
                {{ form.isakmp_policy_priority.label }} <span class="text-danger">*</span>
              </label>
              {{ form.isakmp_policy_priority }}
              {% if form.isakmp_policy_priority.help_text %}
                <div class="form-text">{{ form.isakmp_policy_priority.help_text }}</div>
              {% endif %}
              {% for error in form.isakmp_policy_priority.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.ikev1_encryption.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev1_encryption.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev1_encryption }}
              {% if form.ikev1_encryption.help_text %}
                <div class="form-text">{{ form.ikev1_encryption.help_text }}</div>
              {% endif %}
              {% for error in form.ikev1_encryption.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.ikev1_hash.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev1_hash.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev1_hash }}
              {% for error in form.ikev1_hash.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- IKEv2 Settings (shown only when IKEv2 selected) ----------- #}
      <div class="card mb-4" id="ikev2-section">
        <div class="card-header bg-info text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-key-variant me-2"></span>IKEv2 Settings
            <span class="badge bg-light text-dark ms-2">IKEv2 only</span>
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-6">
              <label for="{{ form.ikev2_proposal_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev2_proposal_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev2_proposal_name }}
              {% for error in form.ikev2_proposal_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-6">
              <label for="{{ form.ikev2_policy_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev2_policy_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev2_policy_name }}
              {% for error in form.ikev2_policy_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-6">
              <label for="{{ form.ikev2_keyring_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev2_keyring_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev2_keyring_name }}
              {% for error in form.ikev2_keyring_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-6">
              <label for="{{ form.ikev2_profile_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev2_profile_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev2_profile_name }}
              {% for error in form.ikev2_profile_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-6">
              <label for="{{ form.ikev2_encryption.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev2_encryption.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev2_encryption }}
              {% if form.ikev2_encryption.help_text %}
                <div class="form-text">{{ form.ikev2_encryption.help_text }}</div>
              {% endif %}
              {% for error in form.ikev2_encryption.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-6">
              <label for="{{ form.ikev2_integrity.id_for_label }}" class="form-label fw-semibold">
                {{ form.ikev2_integrity.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ikev2_integrity }}
              {% for error in form.ikev2_integrity.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- IPsec Phase 2 Settings ------------------------------------ #}
      <div class="card mb-4">
        <div class="card-header bg-warning text-dark">
          <h5 class="mb-0">
            <span class="mdi mdi-shield-lock me-2"></span>IPsec Phase 2 Settings
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">

            <div class="col-md-4">
              <label for="{{ form.ipsec_transform_set_name.id_for_label }}" class="form-label fw-semibold">
                {{ form.ipsec_transform_set_name.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ipsec_transform_set_name }}
              {% for error in form.ipsec_transform_set_name.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.ipsec_encryption.id_for_label }}" class="form-label fw-semibold">
                {{ form.ipsec_encryption.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ipsec_encryption }}
              {% for error in form.ipsec_encryption.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.ipsec_integrity.id_for_label }}" class="form-label fw-semibold">
                {{ form.ipsec_integrity.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ipsec_integrity }}
              {% if form.ipsec_integrity.help_text %}
                <div class="form-text">{{ form.ipsec_integrity.help_text }}</div>
              {% endif %}
              {% for error in form.ipsec_integrity.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="col-md-4">
              <label for="{{ form.ipsec_lifetime.id_for_label }}" class="form-label fw-semibold">
                {{ form.ipsec_lifetime.label }} <span class="text-danger">*</span>
              </label>
              {{ form.ipsec_lifetime }}
              {% if form.ipsec_lifetime.help_text %}
                <div class="form-text">{{ form.ipsec_lifetime.help_text }}</div>
              {% endif %}
              {% for error in form.ipsec_lifetime.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>

          </div>{# /row #}
        </div>
      </div>

      {# ---- Authentication -------------------------------------------- #}
      <div class="card mb-4">
        <div class="card-header bg-danger text-white">
          <h5 class="mb-0">
            <span class="mdi mdi-lock me-2"></span>Authentication
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label for="{{ form.pre_shared_key.id_for_label }}" class="form-label fw-semibold">
                {{ form.pre_shared_key.label }} <span class="text-danger">*</span>
              </label>
              {{ form.pre_shared_key }}
              {% if form.pre_shared_key.help_text %}
                <div class="form-text">{{ form.pre_shared_key.help_text }}</div>
              {% endif %}
              {% for error in form.pre_shared_key.errors %}
                <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            </div>
          </div>

          <div class="alert alert-warning mt-3 mb-0" role="alert">
            <span class="mdi mdi-alert me-1"></span>
            The pre-shared key is transmitted over SSH and stored only in the device
            running-config. It is not persisted in Nautobot.
          </div>
        </div>
      </div>

      {# ---- Non-field errors ------------------------------------------ #}
      {% if form.non_field_errors %}
        <div class="alert alert-danger">
          <ul class="mb-0">
            {% for error in form.non_field_errors %}
              <li>{{ error }}</li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      {# ---- Submit / Cancel ------------------------------------------ #}
      <div class="d-flex gap-2 mb-5">
        <button type="submit" class="btn btn-primary">
          <span class="mdi mdi-play me-1"></span>Build Tunnel
        </button>
        <a href="{% url 'home' %}" class="btn btn-outline-secondary">
          Cancel
        </a>
      </div>

    </form>
  </div>{# /col #}

  {# -------------------------------------------------------------------- #}
  {# Sidebar: config preview                                               #}
  {# -------------------------------------------------------------------- #}
  <div class="col-md-2 col-lg-4 d-none d-md-block">
    <div class="card border-0 bg-light sticky-top" style="top: 1rem;">
      <div class="card-body">
        <h6 class="card-title">
          <span class="mdi mdi-information-outline me-1"></span>What this does
        </h6>
        <p class="small text-muted">
          Submitting this form enqueues a Nautobot Job that SSHes into the
          selected device and pushes a policy-based IPsec configuration.
        </p>

        <p class="small fw-semibold mb-1">IKEv2 pushes:</p>
        <ul class="small text-muted ps-3 mb-2">
          <li><code>crypto ikev2 proposal</code></li>
          <li><code>crypto ikev2 policy</code></li>
          <li><code>crypto ikev2 keyring</code></li>
          <li><code>crypto ikev2 profile</code></li>
        </ul>

        <p class="small fw-semibold mb-1">IKEv1 pushes:</p>
        <ul class="small text-muted ps-3 mb-2">
          <li><code>crypto isakmp policy</code></li>
          <li><code>crypto isakmp key</code></li>
        </ul>

        <p class="small fw-semibold mb-1">Both versions push:</p>
        <ul class="small text-muted ps-3 mb-0">
          <li><code>ip access-list extended</code></li>
          <li><code>crypto ipsec transform-set</code></li>
          <li><code>crypto map</code> (applied to WAN interface)</li>
          <li><code>copy running-config startup-config</code></li>
        </ul>
        <hr>
        <p class="small text-muted mb-0">
          Device credentials are read from the environment variables
          <code>NAUTOBOT_DEVICE_USERNAME</code> and
          <code>NAUTOBOT_DEVICE_PASSWORD</code>.
        </p>
      </div>
    </div>
  </div>

</div>{# /outer row #}

{# -------------------------------------------------------------------- #}
{# IKE version show/hide script                                          #}
{# -------------------------------------------------------------------- #}
<script>
  (function () {
    var versionSelect = document.getElementById('id_ike_version');
    var ikev1Section  = document.getElementById('ikev1-section');
    var ikev2Section  = document.getElementById('ikev2-section');

    function applyVisibility() {
      var v = versionSelect.value;
      ikev1Section.style.display = (v === 'ikev1') ? '' : 'none';
      ikev2Section.style.display = (v === 'ikev2') ? '' : 'none';
    }

    versionSelect.addEventListener('change', applyVisibility);
    applyVisibility();
  })();
</script>
{% endblock %}