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

{# Render the SAME object header the detail-style tabs use (generic/object.html), #}
{# so switching between the object's 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` (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; the current tab highlights via context['tab']. #}
{% 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 %}

  <div class="card mb-3">
    <h5 class="card-header">{% trans "Endpoint access state" %}</h5>
    <div class="card-body">
      <table class="table table-hover attr-table mb-0">
        <tr>
          <th scope="row">{% trans "Proxmox-side writes" %}</th>
          <td>
            {% if object.allow_writes %}
              <span class="badge text-bg-warning">{% trans "Allowed" %}</span>
            {% else %}
              <span class="badge text-bg-secondary">{% trans "Disabled" %}</span>
            {% endif %}
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Current SSH credential source" %}</th>
          <td>
            {{ object.get_ssh_credential_source_display }}
            {% if object.ssh_credential_source == 'reuse_endpoint' %}
              <small class="text-muted d-block">
                {% blocktrans trimmed with username=object.effective_ssh_username %}
                  Effective SSH username: {{ username }}
                {% endblocktrans %}
              </small>
            {% endif %}
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="card mb-3">
    <h5 class="card-header">
      <i class="mdi mdi-console-network"></i>
      {% trans "Endpoint SSH fallback" %}
    </h5>
    <div class="card-body">
      {% render_field form.ssh_credential_source %}
      {% render_field form.ssh_username %}
      {% render_field form.ssh_port %}
      {% render_field form.ssh_auth_method %}
      {% render_field form.ssh_known_host_fingerprint %}
      {% if object.pk %}
        <div class="row mb-3">
          <div class="col-md-9 offset-md-3">
            <button type="button"
                    class="btn btn-sm btn-outline-primary"
                    id="proxbox-fetch-host-key"
                    data-endpoint-id="{{ object.pk }}">
              <i class="mdi mdi-key-chain-variant"></i> {% trans "Fetch host key" %}
            </button>
            <span id="proxbox-host-key-status" class="ms-2 small text-muted"></span>
            <span class="form-text d-block">
              {% trans "Scans the endpoint host and fills the pinned SHA-256 fingerprint above. Review it, then Save." %}
            </span>
          </div>
        </div>
      {% endif %}
      {% render_field form.ssh_password %}
      {% render_field form.ssh_private_key %}
      {% if form.clear_ssh_password %}
        {% render_field form.clear_ssh_password %}
      {% endif %}
      {% if form.clear_ssh_private_key %}
        {% render_field form.clear_ssh_private_key %}
      {% endif %}
    </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 }}
  <script>
    (function () {
      const btn = document.getElementById('proxbox-fetch-host-key');
      if (!btn) return;
      const statusEl = document.getElementById('proxbox-host-key-status');
      const setStatus = function (text, cls) {
        if (!statusEl) return;
        statusEl.textContent = text;
        statusEl.className = 'ms-2 small ' + (cls || 'text-muted');
      };
      btn.addEventListener('click', async function () {
        const endpointId = btn.dataset.endpointId;
        if (!endpointId) return;
        const url = '/api/plugins/proxbox/ssh-credentials/by-endpoint/'
          + encodeURIComponent(endpointId) + '/host-key-fingerprint/';
        btn.disabled = true;
        setStatus('{% trans "Fetching host key…" %}', 'text-muted');
        try {
          const resp = await fetch(url, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
          });
          let data = {};
          try { data = await resp.json(); } catch (e) { data = {}; }
          if (!resp.ok) {
            throw new Error(data.detail || ('{% trans "Request failed" %} (' + resp.status + ')'));
          }
          const input = document.getElementById('id_ssh_known_host_fingerprint');
          if (input && data.fingerprint) {
            input.value = data.fingerprint;
          }
          const keyType = data.key_type ? (' (' + data.key_type + ')') : '';
          setStatus('{% trans "Filled — review and Save." %}' + keyType, 'text-success');
        } catch (err) {
          setStatus('{% trans "Error:" %} ' + (err.message || err), 'text-danger');
        } finally {
          btn.disabled = false;
        }
      });
    })();
  </script>
{% endblock javascript %}