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

{% block title %}Setup Wizard — Step 4 of 4{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <form action="" method="post" class="form form-horizontal">
      {% csrf_token %}

      <div class="card">
        <div class="card-header">
          <strong>Step 4: Bootstrap</strong>
        </div>
        <div class="card-body">
          {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
              {{ form.non_field_errors }}
            </div>
          {% endif %}

          <p class="text-muted">
            Optionally create the NetBox resources required for Zabbix synchronization.
            Existing resources will be skipped automatically.
          </p>

          {% render_field form.create_custom_fields %}
          {% render_field form.create_config_contexts %}
          {% render_field form.create_custom_links %}
          {% render_field form.create_sync_schedule %}

          <hr class="my-3">
          <h5>Preview</h5>

          <h6>Custom Fields</h6>
          <ul>
            {% for cf in custom_fields %}
              <li><code>{{ cf.name }}</code> ({{ cf.type }}) — {{ cf.description }}</li>
            {% endfor %}
          </ul>

          <h6>Example Config Contexts</h6>
          <ul>
            {% for ctx in config_contexts %}
              <li>{{ ctx.name }} — {{ ctx.description }}</li>
            {% endfor %}
          </ul>

          <h6>Custom Links (group: Zabbix)</h6>
          {% if zabbix_base_url %}
            <ul>
              {% for cl in custom_links %}
                <li>{{ cl.name }} — <code>{{ cl.link_url }}</code></li>
              {% endfor %}
            </ul>
          {% else %}
            <p class="text-muted">
              <i class="mdi mdi-alert-outline"></i>
              Zabbix base URL not available yet — links will use the URL from the runner's connect config once configured.
            </p>
          {% endif %}
        </div>
      </div>

      <div class="text-end my-3">
        <a href="{% url 'plugins:netbox_zabbix_sync_plugin:setup_wizard_step3' %}" class="btn btn-outline-secondary">
          Back
        </a>
        <button type="submit" class="btn btn-primary">
          Run Bootstrap &amp; Complete
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock content %}