{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} The panel's own certificate. Administrator only — the view double-checks the
   admin flag on top of the hostnameSSL ACL column. {% endcomment %}

{% block title %}Panel hostname SSL{% endblock %}

{% block content %}
<div ng-controller="hostnameSSLController">

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-server"></i> Panel hostname SSL</h1>
      <p class="cp-page-head__sub">
        The certificate OpenLiteSpeed serves for the control panel itself.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/ssl/manageSSL">
        <i class="fa-solid fa-lock"></i> Website certificates
      </a>
    </div>
  </div>

  <div class="cp-alert cp-alert--warning">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p>
      <strong>The panel reloads when this succeeds.</strong>
      OpenLiteSpeed restarts its listener to pick up the new key, so this page
      may briefly fail to load and you will need to reload it over HTTPS. Any
      other administrator signed in at that moment sees the same interruption.
      Nothing else on the server is affected.
    </p>
  </div>

  <div class="cp-alert cp-alert--info">
    <i class="fa-solid fa-circle-info"></i>
    <p>
      Before issuing, make sure <code>{{ panelHostname }}</code> resolves to this
      server and that port 80 is reachable &mdash; the CA fetches a challenge
      file over plain HTTP. Let's Encrypt allows {{ duplicateLimit }} duplicate
      certificates per week for the same name.
    </p>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-certificate"></i> {{ panelHostname }}</h2>
      <p class="cp-card__sub">ACME account contact: {{ adminEmail }}</p>
    </div>
    <div class="cp-card__body">

      <div class="cp-stat-grid">
        <div class="cp-stat">
          <div class="cp-stat__icon"><i class="fa-solid fa-building-columns"></i></div>
          <div class="cp-stat__body">
            <div class="cp-stat__value" style="font-size:15px">
              {% if certificate and certificate.issuer %}{{ certificate.issuer }}{% else %}Not issued{% endif %}
            </div>
            <div class="cp-stat__label">Issuer</div>
          </div>
        </div>

        <div class="cp-stat cp-stat--{% if badge == 'success' %}success{% elif badge == 'warning' %}warning{% elif badge == 'danger' %}danger{% else %}info{% endif %}">
          <div class="cp-stat__icon"><i class="fa-solid fa-hourglass-half"></i></div>
          <div class="cp-stat__body">
            <div class="cp-stat__value">
              {% if daysLeft is not None %}{{ daysLeft }}{% else %}&mdash;{% endif %}
            </div>
            <div class="cp-stat__label">Days remaining</div>
            <div class="cp-stat__meta">
              {% if certificate and certificate.expiry %}Expires {{ certificate.expiry|date:"Y-m-d" }}{% else %}No certificate recorded{% endif %}
            </div>
          </div>
        </div>
      </div>

      {% if certificate and certificate.lastError %}
        <div class="cp-alert cp-alert--danger" style="margin-top:14px">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <p>Last attempt failed: {{ certificate.lastError }}</p>
        </div>
      {% endif %}

      <div class="cp-btn-group" style="margin-top:18px">
        <button type="button" class="cp-btn cp-btn--primary"
                ng-click="issue()" ng-disabled="job.active">
          <i class="fa-solid fa-rotate" ng-hide="job.active"></i>
          <span ng-bind="job.active ? 'Issuing…' : 'Issue / renew panel certificate'"></span>
        </button>
      </div>

    </div>
  </div>

  {% include "sslManager/_joblog.html" %}

</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'sslManager/sslManager.js' %}"></script>
{% endblock %}