{% extends 'generic/object_edit.html' %}
{% load buttons %}
{% load custom_links %}
{% load form_helpers %}
{% load helpers %}
{% load perms %}
{% load plugins %}
{% load tabs %}
{% load i18n %}
{% load proxbox_tags %}

{# Render the SAME object header the detail-style tabs use (generic/object.html), #}
{# so switching between the Proxmox Endpoint / Sync Jobs / Settings / SSH / …     #}
{# tabs keeps identical header chrome — breadcrumb + identifier, object title,    #}
{# created/updated, Bookmark/Subscribe/Edit/Delete, and the tab strip. Only the   #}
{# header blocks are overridden; the edit form (block form / content) is left to  #}
{# object_edit.html, so the save path is unchanged. The view supplies `tab` and   #}
{# `actions` in the context (ObjectEditView injects neither). #}

{% block page-header %}
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mt-2">

      {# Breadcrumbs #}
      <ol class="breadcrumb" aria-label="breadcrumbs">
        {% block breadcrumbs %}
          <li class="breadcrumb-item">
            <a href="{% action_url object 'list' %}">{{ object|meta:'verbose_name_plural'|bettertitle }}</a>
          </li>
        {% endblock breadcrumbs %}
      </ol>

      {# Object identifier #}
      <code class="d-block text-muted bg-transparent px-0">
        {% block object_identifier %}
          {{ object|meta:"app_label" }}.{{ object|meta:"model_name" }}:{{ object.pk }}
          {% if object.slug %}({{ object.slug }}){% endif %}
        {% endblock object_identifier %}
      </code>

    </div>
  </div>
  {{ block.super }}
{% endblock page-header %}

{% block title %}{{ object }}{% endblock %}

{% block subtitle %}
  <div class="text-secondary fs-5">
    <ul class="list-inline">
      {% if object.owner %}
        <li class="list-inline-item">
          <i class="mdi mdi-account-outline" title="{% trans "Owner" %}"></i> {{ object.owner|linkify }}
        </li>
      {% endif %}
      <li class="list-inline-item">
        <i class="mdi mdi-calendar-plus" title="{% trans "Created" %}"></i>
        {{ object.created|isodatetime:"minutes" }}
      </li>
      {% if object.last_updated %}
        <li class="list-inline-item">
          <i class="mdi mdi-calendar-edit" title="{% trans "Last updated" %}"></i>
          {{ object.last_updated|isodatetime:"minutes" }}
        </li>
      {% endif %}
    </ul>
  </div>
{% endblock subtitle %}

{% block controls %}
  <div class="btn-list justify-content-end mb-2">
    {% plugin_buttons object %}

    {# Add/edit/delete/etc. buttons #}
    {% block control-buttons %}

      {# Extra buttons #}
      {% block extra_controls %}{% endblock %}

      {# Default buttons #}
      {% if perms.extras.add_bookmark and object.bookmarks %}
        {% bookmark_button object %}
      {% endif %}
      {% if perms.extras.add_subscription and object.subscriptions %}
        {% subscribe_button object %}
      {% endif %}
      {% action_buttons actions object %}
    {% endblock control-buttons %}
  </div>

  {# Custom links #}
  <div class="d-flex justify-content-end">
    <div class="btn-list">
      {% block custom-links %}
        {% custom_links object %}
      {% endblock custom-links %}
    </div>
  </div>
{% endblock controls %}

{# Full object tab strip (primary detail tab + every registered ViewTab), matching #}
{# generic/object.html, so the operator can navigate back to the other tabs; the    #}
{# current tab highlights via context['tab'] (supplied by the view). #}
{% block tabs %}
  <ul class="nav nav-tabs" role="presentation">
    {# Primary detail tab #}
    <li class="nav-item">
      <a class="nav-link{% if not tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
    </li>

    {# Registered model-view tabs (Settings/SSH/Terminal/Sync Jobs/…) #}
    {% model_view_tabs object %}
  </ul>
{% endblock tabs %}

{% block form %}
  {% for field in form.hidden_fields %}
    {{ field }}
  {% endfor %}

  {# Each configuration section is a selectable tab instead of a stacked card, #}
  {# so operators can jump straight to a section instead of scrolling. All tab #}
  {# panes stay in the DOM (Bootstrap only toggles display), so every field    #}
  {# still submits on save regardless of which tab is currently active.        #}
  <ul class="nav nav-tabs mb-3" id="proxbox-settings-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="proxbox-settings-connection-tab" data-bs-toggle="tab"
              data-bs-target="#proxbox-settings-connection" type="button" role="tab"
              aria-controls="proxbox-settings-connection" aria-selected="true">
        <i class="mdi mdi-cog"></i> {% trans "Connection" %}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="proxbox-settings-sync-modes-tab" data-bs-toggle="tab"
              data-bs-target="#proxbox-settings-sync-modes" type="button" role="tab"
              aria-controls="proxbox-settings-sync-modes" aria-selected="false">
        <i class="mdi mdi-source-branch-sync"></i> {% trans "Sync Modes" %}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="proxbox-settings-overwrite-tab" data-bs-toggle="tab"
              data-bs-target="#proxbox-settings-overwrite" type="button" role="tab"
              aria-controls="proxbox-settings-overwrite" aria-selected="false">
        <i class="mdi mdi-pencil-circle"></i> {% trans "Sync Overwrite" %}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="proxbox-settings-tenant-tab" data-bs-toggle="tab"
              data-bs-target="#proxbox-settings-tenant" type="button" role="tab"
              aria-controls="proxbox-settings-tenant" aria-selected="false">
        <i class="mdi mdi-account-switch"></i> {% trans "Tenant Assignment" %}
      </button>
    </li>
  </ul>

  <div class="tab-content" id="proxbox-settings-tab-content">
    <div class="tab-pane fade show active" id="proxbox-settings-connection" role="tabpanel"
         aria-labelledby="proxbox-settings-connection-tab" tabindex="0">
      <div class="card mb-3">
        <h5 class="card-header">
          <i class="mdi mdi-cog"></i>
          {% trans "Connection tunables" %}
        </h5>
        <div class="card-body">
          <p class="text-muted">
            {% blocktrans trimmed %}
            Per-endpoint overrides for the global Proxmox API connection defaults.
            Leave any field blank to inherit the value from the global plugin settings.
            {% endblocktrans %}
          </p>
          {% render_field form.timeout %}
          {% render_field form.max_retries %}
          {% render_field form.retry_backoff %}
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="proxbox-settings-sync-modes" role="tabpanel"
         aria-labelledby="proxbox-settings-sync-modes-tab" tabindex="0">
      <div class="card mb-3">
        <h5 class="card-header">
          <i class="mdi mdi-source-branch-sync"></i>
          {% trans "Sync mode overrides" %}
        </h5>
        <div class="card-body">
          <p class="text-muted">
            {% blocktrans trimmed %}
            Override whether this endpoint syncs each resource on every run, only
            bootstraps newly-created records, or skips the resource entirely. Leave
            blank to inherit the global plugin setting.
            {% endblocktrans %}
          </p>
          {% for group_label, group_fields in sync_mode_field_groups %}
            <h6 class="mt-3">{{ group_label }}</h6>
            {% for field_name in group_fields %}
              {% render_field form|form_field:field_name %}
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="proxbox-settings-overwrite" role="tabpanel"
         aria-labelledby="proxbox-settings-overwrite-tab" tabindex="0">
      <div class="card mb-3">
        <h5 class="card-header">
          <i class="mdi mdi-pencil-circle"></i>
          {% trans "Sync overwrite overrides" %}
        </h5>
        <div class="card-body">
          <p class="text-muted">
            {% blocktrans trimmed %}
            Override per-endpoint whether sync overwrites specific fields on existing
            NetBox objects. Set "Unknown" (the default) to inherit the value from the
            global Proxbox plugin settings.
            {% endblocktrans %}
          </p>
          {% for group_label, group_fields in overwrite_field_groups %}
            <h6 class="mt-3">
              <i class="mdi mdi-pencil-circle-outline"></i>
              {{ group_label }}
            </h6>
            {% for field_name in group_fields %}
              {% render_field form|form_field:field_name %}
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="proxbox-settings-tenant" role="tabpanel"
         aria-labelledby="proxbox-settings-tenant-tab" tabindex="0">
      <div class="card mb-3">
        <h5 class="card-header">
          <i class="mdi mdi-account-switch"></i>
          {% trans "Tenant assignment overrides" %}
        </h5>
        <div class="card-body">
          <p class="text-muted">
            {% blocktrans trimmed %}
            Override post-sync Tenant assignment behavior for virtual machines from
            this endpoint. Leave toggle fields blank to inherit the global setting.
            {% endblocktrans %}
          </p>
          {% render_field form.enable_tenant_name_regex %}
          {% render_field form.tenant_name_regex_rules %}
          {% render_field form.enable_tenant_tag_assignment %}
          {% render_field form.enable_tenant_from_cluster %}
        </div>
      </div>
    </div>
  </div>

  {% if form.changelog_message %}
    <div class="bg-primary-subtle border border-primary rounded-1 pt-3 px-3 mb-3">
      {% render_field form.changelog_message %}
    </div>
  {% endif %}
{% endblock form %}

{% block javascript %}
  {{ block.super }}
  {# On load we activate the right sub-tab: (1) if the form redisplayed with a  #}
  {# validation error, the errored field may sit on an inactive tab and be       #}
  {# invisible — NetBox's render_field wraps its row in `.has-errors`, so we open #}
  {# the first tab pane containing one; (2) otherwise, if the URL hash targets a  #}
  {# pane (e.g. `#proxbox-settings-overwrite` from the Overwrite Behavior tab's   #}
  {# Edit button), we open that pane. We click the controlling nav button (which  #}
  {# keeps type="button", so this never resubmits the form) rather than          #}
  {# constructing a Bootstrap Tab instance, because NetBox's bundle registers the #}
  {# tab data-api but does not expose window.Tab. Runs inside DOMContentLoaded so #}
  {# data-api registration is guaranteed complete before the click.             #}
  <script>
    (function () {
      function activatePane(pane) {
        if (!pane || pane.classList.contains("active")) {
          return;
        }
        var trigger = document.getElementById(
          pane.getAttribute("aria-labelledby")
        );
        if (trigger) {
          trigger.click();
        }
      }
      function focusInitialTab() {
        var content = document.getElementById("proxbox-settings-tab-content");
        if (!content) {
          return;
        }
        // 1) First tab pane containing a validation error takes priority.
        var panes = content.querySelectorAll(".tab-pane");
        for (var i = 0; i < panes.length; i++) {
          if (panes[i].querySelector(".has-errors")) {
            activatePane(panes[i]);
            return;
          }
        }
        // 2) Otherwise honor a pane targeted by the URL hash.
        var hash = window.location.hash;
        if (hash && hash.length > 1) {
          var target = document.getElementById(hash.slice(1));
          if (
            target &&
            content.contains(target) &&
            target.classList.contains("tab-pane")
          ) {
            activatePane(target);
          }
        }
      }
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", focusInitialTab);
      } else {
        focusInitialTab();
      }
    })();
  </script>
{% endblock javascript %}