{% extends 'generic/object.html' %}
{% load helpers %}
{% load plugins %}
{% load i18n %}

{% block breadcrumbs %}
  {{ block.super }}
  <li class="breadcrumb-item">
    <a href="{% url 'plugins:netbox_ssl:certificate_list' %}">Certificates</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}
<div class="row mb-3">
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Certificate Details</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Common Name</th>
            <td>{{ object.common_name }}</td>
          </tr>
          <tr>
            <th scope="row">Status</th>
            <td>{% badge object.get_status_display bg_color=object.get_status_color %}</td>
          </tr>
          <tr>
            <th scope="row">Serial Number</th>
            <td><code>{{ object.serial_number }}</code></td>
          </tr>
          <tr>
            <th scope="row">Fingerprint (SHA256)</th>
            <td><code class="small" style="word-break: break-all;">{{ object.fingerprint_sha256 }}</code></td>
          </tr>
          <tr>
            <th scope="row">Issuer</th>
            <td>{{ object.issuer }}</td>
          </tr>
          <tr>
            <th scope="row">Tenant</th>
            <td>
              {% if object.tenant %}
                <a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a>
              {% else %}
                <span class="text-muted">None</span>
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Archive Pinned</th>
            <td>{% checkmark object.archive_pinned %}</td>
          </tr>
          {% if object.status == 'archived' and object.archived_at %}
          <tr>
            <th scope="row">Archived At</th>
            <td>{{ object.archived_at|date:"Y-m-d H:i" }}</td>
          </tr>
          {% endif %}
        </table>
      </div>
    </div>
  </div>
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Validity</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Valid From</th>
            <td>{{ object.valid_from|date:"Y-m-d H:i" }}</td>
          </tr>
          <tr>
            <th scope="row">Valid To</th>
            <td>{{ object.valid_to|date:"Y-m-d H:i" }}</td>
          </tr>
          <tr>
            <th scope="row">Days Remaining</th>
            <td>
              {% if object.days_remaining < 0 %}
                <span class="badge text-bg-danger">Expired ({{ object.days_expired }} days ago)</span>
              {% elif object.days_remaining <= 14 %}
                <span class="badge text-bg-danger">{{ object.days_remaining }} days</span>
              {% elif object.days_remaining <= 30 %}
                <span class="badge text-bg-warning">{{ object.days_remaining }} days</span>
              {% else %}
                <span class="badge text-bg-success">{{ object.days_remaining }} days</span>
              {% endif %}
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="card mt-3">
      <h5 class="card-header">Key Information</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Algorithm</th>
            <td>{% badge object.get_algorithm_display %}</td>
          </tr>
          <tr>
            <th scope="row">Key Size</th>
            <td>{{ object.key_size|default:"N/A" }} bits</td>
          </tr>
          <tr>
            <th scope="row">Private Key Location</th>
            <td>
              {% if object.private_key_location %}
                <code>{{ object.private_key_location }}</code>
              {% else %}
                <span class="text-muted">Not specified</span>
              {% endif %}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="row mb-3">
  <div class="col col-12">
    {% include 'inc/panels/comments.html' %}
  </div>
</div>

{# Public certificate PEM — visible to any user with view permission (issue #113). #}
{# pem_content holds the public certificate only; private keys are rejected at import. #}
{% if object.pem_content %}
<div class="row mb-3">
  <div class="col col-12">
    <div class="card">
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <button class="btn btn-link p-0 text-decoration-none" type="button"
                data-bs-toggle="collapse" data-bs-target="#pem-collapse"
                aria-expanded="false" aria-controls="pem-collapse">
          <i class="mdi mdi-certificate"></i> Certificate PEM
        </button>
        <span>
          <button type="button" class="btn btn-sm btn-secondary" id="pem-copy-btn">
            <i class="mdi mdi-content-copy"></i> Copy
          </button>
          <button type="button" class="btn btn-sm btn-primary" id="pem-download-btn">
            <i class="mdi mdi-download"></i> Download
          </button>
        </span>
      </h5>
      <div class="collapse" id="pem-collapse">
        <div class="card-body">
          <pre id="pem-content" class="mb-0" style="max-height: 24rem; overflow-y: auto;">{{ object.pem_content }}</pre>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  (function () {
    // The public PEM as a JS string (escapejs keeps newlines/quotes intact).
    const pem = "{{ object.pem_content|escapejs }}";
    const filename = "{{ object.common_name|escapejs|default:'certificate' }}.pem";

    const copyBtn = document.getElementById("pem-copy-btn");
    if (copyBtn) {
      copyBtn.addEventListener("click", function () {
        const done = function () {
          const original = copyBtn.innerHTML;
          copyBtn.innerHTML = '<i class="mdi mdi-check"></i> Copied';
          setTimeout(function () { copyBtn.innerHTML = original; }, 2000);
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(pem).then(done).catch(function () {
            window.prompt("Copy the certificate PEM:", pem);
          });
        } else {
          window.prompt("Copy the certificate PEM:", pem);
        }
      });
    }

    const dlBtn = document.getElementById("pem-download-btn");
    if (dlBtn) {
      dlBtn.addEventListener("click", function () {
        const blob = new Blob([pem], { type: "application/x-pem-file" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      });
    }
  })();
</script>
{% endif %}

{% if object.is_acme %}
<div class="row mb-3">
  <div class="col col-12">
    <div class="card">
      <h5 class="card-header">ACME / Auto-Renewal</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">ACME Provider</th>
            <td>{% badge object.get_acme_provider_display bg_color="green" %}</td>
          </tr>
          {% if object.acme_challenge_type %}
          <tr>
            <th scope="row">Challenge Type</th>
            <td>{% badge object.get_acme_challenge_type_display %}</td>
          </tr>
          {% endif %}
          {% if object.acme_account_email %}
          <tr>
            <th scope="row">Account Email</th>
            <td>{{ object.acme_account_email }}</td>
          </tr>
          {% endif %}
          {% if object.acme_server_url %}
          <tr>
            <th scope="row">ACME Server</th>
            <td><code class="small">{{ object.acme_server_url }}</code></td>
          </tr>
          {% endif %}
          <tr>
            <th scope="row">Auto Renewal</th>
            <td>{% checkmark object.acme_auto_renewal %}</td>
          </tr>
          {% if object.acme_last_renewed %}
          <tr>
            <th scope="row">Last Renewed</th>
            <td>{{ object.acme_last_renewed|date:"Y-m-d H:i" }}</td>
          </tr>
          {% endif %}
          {% if object.acme_renewal_days %}
          <tr>
            <th scope="row">Renewal Window</th>
            <td>{{ object.acme_renewal_days }} days before expiry</td>
          </tr>
          {% endif %}
          <tr>
            <th scope="row">Renewal Status</th>
            <td>
              {% if object.acme_renewal_status == "ok" %}
                <span class="badge text-bg-success">OK</span>
              {% elif object.acme_renewal_status == "due" %}
                <span class="badge text-bg-warning">Renewal Due</span>
              {% elif object.acme_renewal_status == "expired" %}
                <span class="badge text-bg-danger">Expired</span>
              {% elif object.acme_renewal_status == "manual" %}
                <span class="badge text-bg-info">Manual</span>
              {% endif %}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="row mb-3">
  <div class="col col-12">
    <div class="card">
      <h5 class="card-header">Renewal Guide</h5>
      <div class="card-body">
        {% if object.renewal_note %}
          {{ object.renewal_note|linebreaks }}
        {% elif object.issuing_ca and object.issuing_ca.renewal_instructions %}
          {{ object.issuing_ca.renewal_instructions|linebreaks }}
          <p class="text-muted mt-2">
            <small>Source: <a href="{{ object.issuing_ca.get_absolute_url }}">{{ object.issuing_ca.name }}</a></small>
          </p>
        {% else %}
          <p class="text-muted mb-0">No renewal instructions configured.</p>
          {% if object.issuing_ca %}
            <p class="text-muted"><small>Add instructions on the <a href="{{ object.issuing_ca.get_absolute_url }}">{{ object.issuing_ca.name }}</a> CA page.</small></p>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if object.status == 'active' or object.status == 'expired' %}
{% if perms.netbox_ssl.renew_certificate or perms.netbox_ssl.import_certificate or perms.netbox_ssl.add_certificate %}
<div class="row mb-3">
  <div class="col col-12 d-flex gap-2 flex-wrap">
    <a href="{% url 'plugins:netbox_ssl:certificate_import' %}?renew_from={{ object.pk }}"
       class="btn btn-warning">
      <i class="mdi mdi-swap-horizontal"></i> Renew This Certificate
    </a>
  </div>
</div>
{% endif %}
{% endif %}

{% if perms.netbox_ssl.add_certificateassignment %}
<div class="row mb-3">
  <div class="col col-12 d-flex gap-2 flex-wrap">
    <a href="{% url 'plugins:netbox_ssl:certificate_assign_targets' pk=object.pk %}"
       class="btn btn-primary">
      <i class="mdi mdi-link-plus"></i> Assign to objects
    </a>
  </div>
</div>
{% endif %}

{# Tabbed secondary sections #}
{% if object.sans or assignments or object.replaced_by or object.replaces.exists or lifecycle_events or monitored_endpoints %}
<div class="row mb-3">
  <div class="col col-12">
    <ul class="nav nav-tabs" role="tablist">
      {% if object.sans %}
      <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-sans" type="button" role="tab">
          SANs <span class="badge text-bg-secondary">{{ object.sans|length }}</span>
        </button>
      </li>
      {% endif %}
      {% if assignments %}
      <li class="nav-item">
        <button class="nav-link {% if not object.sans %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#tab-assignments" type="button" role="tab">
          Assignments <span class="badge text-bg-secondary">{{ assignments_count }}</span>
        </button>
      </li>
      {% endif %}
      {% if object.replaced_by or object.replaces.exists %}
      <li class="nav-item">
        <button class="nav-link {% if not object.sans and not assignments %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#tab-history" type="button" role="tab">
          History
        </button>
      </li>
      {% endif %}
      <li class="nav-item">
        <button class="nav-link {% if not object.sans and not assignments and not object.replaced_by and not object.replaces.exists %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#tab-lifecycle" type="button" role="tab">
          Lifecycle <span class="badge text-bg-secondary">{{ lifecycle_events|length }}</span>
        </button>
      </li>
      {% if monitored_endpoints %}
      <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-monitored-endpoints" type="button" role="tab">
          Monitored Endpoints <span class="badge text-bg-secondary">{{ monitored_endpoints_count }}</span>
        </button>
      </li>
      {% endif %}
    </ul>
    <div class="tab-content border border-top-0 rounded-bottom">
      {% if object.sans %}
      <div class="tab-pane fade show active p-3" id="tab-sans" role="tabpanel">
        <ul class="list-unstyled mb-0">
          {% for san in object.sans %}
            <li><code>{{ san }}</code></li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
      {% if assignments %}
      <div class="tab-pane fade {% if not object.sans %}show active{% endif %} p-3" id="tab-assignments" role="tabpanel">
        <table class="table table-hover mb-0">
          <thead>
            <tr>
              <th>Type</th>
              <th>Assigned To</th>
              <th>Primary</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            {% for assignment in assignments %}
            <tr>
              <td>{% badge assignment.assigned_object_type_name %}</td>
              <td>
                {% if assignment.assigned_object %}
                  <a href="{{ assignment.assigned_object.get_absolute_url }}">
                    {{ assignment.assigned_object }}
                  </a>
                  {% if assignment.assigned_object_type.model == 'service' and assignment.assigned_object.parent %}
                    <span class="text-muted">
                      on <a href="{{ assignment.assigned_object.parent.get_absolute_url }}">{{ assignment.assigned_object.parent }}</a>
                    </span>
                  {% endif %}
                {% else %}
                  <span class="text-muted">Unknown</span>
                {% endif %}
              </td>
              <td>{% checkmark assignment.is_primary %}</td>
              <td>{{ assignment.notes|default:"-" }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
      {% if object.replaced_by or object.replaces.exists %}
      <div class="tab-pane fade {% if not object.sans and not assignments %}show active{% endif %} p-3" id="tab-history" role="tabpanel">
        {% if object.replaced_by %}
        <div class="alert alert-info mb-3">
          <strong>Replaced by:</strong>
          <a href="{{ object.replaced_by.get_absolute_url }}">{{ object.replaced_by.common_name }}</a>
          (Serial: {{ object.replaced_by.serial_number|truncatechars:20 }})
        </div>
        {% endif %}
        {% if object.replaces.exists %}
        <h6>Previous Certificates</h6>
        <ul class="list-unstyled mb-0">
          {% for old_cert in object.replaces.all %}
            <li>
              <a href="{{ old_cert.get_absolute_url }}">{{ old_cert.common_name }}</a>
              ({{ old_cert.valid_from|date:"Y-m-d" }} - {{ old_cert.valid_to|date:"Y-m-d" }})
              {% badge old_cert.get_status_display bg_color=old_cert.get_status_color %}
            </li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
      {% endif %}
      <div class="tab-pane fade {% if not object.sans and not assignments and not object.replaced_by and not object.replaces.exists %}show active{% endif %} p-3" id="tab-lifecycle" role="tabpanel">
        {% if lifecycle_events %}
        <div class="timeline">
          {% for event in lifecycle_events %}
          <div class="d-flex mb-3">
            <div class="me-3 text-muted" style="min-width: 140px; font-size: 0.85em;">
              {{ event.timestamp|date:"Y-m-d H:i" }}
            </div>
            <div>
              <span class="badge text-bg-{% if event.event_type == 'imported' %}info{% elif event.event_type == 'status_changed' %}warning{% elif event.event_type == 'renewed' %}primary{% elif event.event_type == 'revoked' %}danger{% elif event.event_type == 'archived' %}dark{% elif event.event_type == 'assignment_added' %}success{% elif event.event_type == 'assignment_removed' %}secondary{% else %}info{% endif %}">
                {{ event.get_event_type_display }}
              </span>
              <span class="ms-2">{{ event.description }}</span>
              {% if event.actor %}
                <small class="text-muted ms-2">by {{ event.actor }}</small>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-muted mb-0">No lifecycle events recorded.</p>
        {% endif %}
      </div>
      {% if monitored_endpoints %}
      <div class="tab-pane fade p-3" id="tab-monitored-endpoints" role="tabpanel">
        <table class="table table-hover mb-0">
          <thead>
            <tr>
              <th>Name</th>
              <th>URL</th>
              <th>Status</th>
              <th>Days Remaining</th>
            </tr>
          </thead>
          <tbody>
            {% for endpoint in monitored_endpoints %}
            <tr>
              <td><a href="{{ endpoint.get_absolute_url }}">{{ endpoint.name }}</a></td>
              <td>
                {% if endpoint.url|slice:':8'|lower == 'https://' or endpoint.url|slice:':7'|lower == 'http://' %}
                  <a href="{{ endpoint.url }}" target="_blank" rel="noopener noreferrer">{{ endpoint.url }}</a>
                {% else %}{{ endpoint.url }}{% endif %}
              </td>
              <td>{% badge endpoint.get_status_display %}</td>
              <td>{{ endpoint.days_remaining|default:"—" }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}

{% endblock content %}