{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Certificate inventory for every website the caller owns, plus issuance and
   custom-certificate upload. The rows come from the ssl_certificate table so
   the page does not shell out to openssl once per site on every load. {% endcomment %}

{% block title %}SSL certificates{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-lock"></i> SSL certificates</h1>
      <p class="cp-page-head__sub">
        Issue, renew and inspect the certificates installed on your websites.
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/ssl/hostnameSSL">
        <i class="fa-solid fa-server"></i> Panel hostname
      </a>
      <a class="cp-btn cp-btn--ghost" href="/ssl/mailServerSSL">
        <i class="fa-solid fa-envelope"></i> Mail server
      </a>
    </div>
  </div>

  <div class="cp-alert cp-alert--warning">
    <i class="fa-solid fa-gauge-high"></i>
    <p>
      <strong>Rate limit:</strong> Let's Encrypt issues at most
      {{ duplicateLimit }} duplicate certificates per registered domain per
      week. Re-issuing the same name over and over will lock you out until the
      window rolls over, so renew only when a certificate is genuinely close to
      expiry (under {{ warnDays }} days).
    </p>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-certificate"></i> Websites</h2>
      <p class="cp-card__sub">
        A red badge means under {{ soonDays }} days remain, amber under
        {{ warnDays }}.
      </p>
    </div>

    <div class="cp-card__body cp-card__body--flush">

      <div class="cp-empty" ng-show="certificates.length === 0" ng-cloak>
        <i class="fa-solid fa-globe"></i>
        <h4>No websites yet</h4>
        <p>Create a website before issuing a certificate for it.</p>
      </div>

      <div class="cp-table-wrap" ng-show="certificates.length" ng-cloak>
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Domain</th>
              <th scope="col">Issuer</th>
              <th scope="col">Expires</th>
              <th scope="col">Days left</th>
              <th scope="col" style="text-align:right">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in certificates track by row.domain">
              <td><code ng-bind="row.domain"></code></td>
              <td>
                <span ng-show="row.issuer" ng-bind="row.issuer"></span>
                <span class="cp-badge" ng-hide="row.issuer">Not issued</span>
              </td>
              <td ng-bind="row.expiry ? row.expiry.substring(0, 10) : '—'"></td>
              <td>
                <span class="cp-badge" ng-class="'cp-badge--' + row.badge"
                      ng-show="row.daysLeft !== null && row.daysLeft !== undefined"
                      ng-bind="row.daysLeft < 0 ? 'Expired' : row.daysLeft + ' days'"></span>
                <span ng-hide="row.daysLeft !== null && row.daysLeft !== undefined">—</span>
              </td>
              <td>
                <div class="cp-table__actions">
                  <label class="cp-switch" title="Also cover *.{$ row.domain $} (DNS validation)">
                    <input type="checkbox" ng-model="row.wildcard">
                    <span class="cp-switch__track"></span>
                    <span>Wildcard</span>
                  </label>
                  <button type="button" class="cp-btn cp-btn--sm"
                          ng-class="row.hasCertificate ? 'cp-btn--ghost' : 'cp-btn--primary'"
                          ng-click="issue(row)" ng-disabled="job.active">
                    <i class="fa-solid fa-rotate"></i>
                    <span ng-bind="row.hasCertificate ? 'Renew' : 'Issue'"></span>
                  </button>
                </div>
                <p class="cp-help" ng-show="row.lastError" ng-bind="row.lastError"></p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

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

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-file-import"></i> Upload your own certificate</h2>
      <p class="cp-card__sub">
        The key is checked against the certificate and the chain is verified
        before anything is written to disk.
      </p>
    </div>
    <div class="cp-card__body">

      <div class="cp-alert cp-alert--danger" ng-show="upload.error" ng-cloak role="alert">
        <i class="fa-solid fa-triangle-exclamation"></i>
        <p ng-bind="upload.error"></p>
      </div>

      <div class="cp-alert cp-alert--success" ng-show="upload.ok" ng-cloak role="status">
        <i class="fa-solid fa-circle-check"></i>
        <p ng-bind="upload.ok"></p>
      </div>

      <form novalidate ng-submit="installCustom()">
        <div class="cp-form-grid">
          <div>
            <label class="cp-label" for="cpUploadDomain">Website <span class="cp-req">*</span></label>
            <select class="cp-select" id="cpUploadDomain" ng-model="upload.domain" required>
              <option value="">Select a website&hellip;</option>
              {% for site in websites %}
                <option value="{{ site }}">{{ site }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div style="margin-top:14px">
          <label class="cp-label" for="cpCert">Certificate (PEM) <span class="cp-req">*</span></label>
          <textarea class="cp-textarea" id="cpCert" rows="7" spellcheck="false"
                    ng-model="upload.cert"
                    placeholder="-----BEGIN CERTIFICATE-----"></textarea>
          <p class="cp-help">
            The site certificate. You may paste the intermediates below it &mdash;
            leaf first, then each issuer in turn.
          </p>
        </div>

        <div style="margin-top:14px">
          <label class="cp-label" for="cpChain">Issuer chain / CA bundle (PEM)</label>
          <textarea class="cp-textarea" id="cpChain" rows="6" spellcheck="false"
                    ng-model="upload.chain"
                    placeholder="-----BEGIN CERTIFICATE-----"></textarea>
          <p class="cp-help">
            Optional if you already pasted the chain above. A missing
            intermediate is the most common cause of "not trusted" errors on
            Android and older clients.
          </p>
        </div>

        <div style="margin-top:14px">
          <label class="cp-label" for="cpKey">Private key (PEM) <span class="cp-req">*</span></label>
          <textarea class="cp-textarea" id="cpKey" rows="7" spellcheck="false"
                    ng-model="upload.key"
                    placeholder="-----BEGIN PRIVATE KEY-----"></textarea>
          <p class="cp-help">
            Must be decrypted (no passphrase). It is written with mode 0600 and
            never stored in the database.
          </p>
        </div>

        <div class="cp-btn-group" style="margin-top:18px">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="upload.busy">
            <i class="fa-solid fa-shield-halved" ng-hide="upload.busy"></i>
            <span ng-bind="upload.busy ? 'Verifying…' : 'Verify and install'"></span>
          </button>
        </div>
      </form>
    </div>
  </div>

  {{ certificates|json_script:"cpSSLData" }}
</div>
{% endblock %}

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