{% extends 'layout.html' %}
{% set breadcrumbs = breadcrumb_page('prefs') +  breadcrumb_page(self) %}
{% block content %}
  {# Header #}
  <div class="sticky-top mb-2 bg-white border-bottom p-3">
    <div class="d-flex flex-wrap justify-content-between rdw-container">
      <h2 class="mb-0">{{ active_page.label }}</h2>
      <div>
        <button id="rdw-btn-add-sshkey"
                type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#rdw-add-sshkey-modal">
          <RdwIcon value="bi-plus-lg" class="me-1" />
          {%- trans %}Add SSH key{% endtrans %}
        </button>
      </div>
    </div>
  </div>
  <div class="rdw-container">
    {# Help text #}
    <p class="text-secondary small mb-4">
      {% trans %}SSH keys allow your backup client to securely connect to this server.{% endtrans %}
      {% if disable_ssh_keys %}
        <br />
        <span class="fw-semibold">
          <RdwIcon value="bi-exclamation-triangle-fill" class="me-1 text-warning" />
          {%- trans %}SSH Keys management is disabled by your administrator.{% endtrans %}
        </span>
      {% endif %}
    </p>
    {# Key count summary #}
    <p class="text-muted small mb-2">
      <RdwIcon value="bi-info-circle" class="me-1" />
      {{- _('%(count)s SSH keys associated with your account.', count=sshkeys|length) }}
    </p>
    {# Key list #}
    <div class="d-flex flex-column gap-3">
      {% for key in sshkeys %}
        <!-- Key Item -->
        <div class="card border shadow-sm">
          <div class="card-body d-flex align-items-center gap-3">
            <!-- Icon -->
            <div class="text-secondary fs-2 flex-shrink-0">
              <RdwIcon value="bi-key" />
            </div>
            <!-- Key Info -->
            <div class="flex-grow-1 overflow-hidden">
              <div class="d-flex align-items-center gap-2 mb-1">
                <span class="fw-semibold">{{ key.comment }}</span>
                <span class="badge bg-secondary-subtle text-secondary border">{{ key.keytype }}</span>
              </div>
              <div class="text-muted small font-monospace text-truncate">{{ key.fingerprint }}</div>
              <div class="text-muted" style="font-size: 0.78rem;">
                <RdwIcon value="bi-clock" class="me-1" />
                {%- trans %}Added on {% endtrans %}
                {% if key.creation_time %}
                  {{ key.creation_time | format_datetime }}
                {% else %}
                  &mdash;
                {% endif %}
              </div>
            </div>
            <!-- Actions -->
            <div class="flex-shrink-0">
              <ButtonConfirm class="btn btn-outline-danger btn-sm rdw-btn-delete-sshkey"
                             icon="bi-trash"
                             :label="_('Delete')"
                             target="#rdw-delete-sshkey-modal"
                             :disabled="disable_ssh_keys"
                             :data-fingerprint="key.fingerprint" />
            </div>
          </div>
        </div>
      {% else %}
        <RdwEmpty icon="bi-key" :title="{{ _("No SSH keys added yet") }}" class="p-5">
          <p>
            <button class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#rdw-add-sshkey-modal">
              <RdwIcon value="bi-plus-lg" class="me-1" />
              {%- trans %}Add your first SSH Key{% endtrans %}
            </button>
          </p>
        </RdwEmpty>
      {% endfor %}
    </div>
    {# Add SSH Key Modal #}
    <form method="post" action="{{ url_for('prefs', 'sshkeys', 'add') }}">
      <ModalDialog id="rdw-add-sshkey-modal"
                   class="modal-lg"
                   :title="_('Add SSH key')"
                   :submit="_('Add SSH key')"
                   :show="form.error_message">
        <div class="alert alert-info d-flex gap-2 align-items-start" role="alert">
          <RdwIcon value="bi-info-circle-fill" class="me-1" />
          <div>
            {% trans %}Paste your public key below (e.g. content of ~/.ssh/id_rsa.pub or ~/.ssh/id_ed25519.pub). Never share your private key.{% endtrans %}
          </div>
        </div>
        {% if form.error_message %}<p class="text-danger">{{ form.error_message }}</p>{% endif %}
        <cf:Fields form={{ form }} />
      </ModalDialog>
    </form>
  </div>
  {# Delete Modal #}
  <form method="post" action="{{ url_for('prefs', 'sshkeys', 'delete') }}">
    <ModalConfirm id="rdw-delete-sshkey-modal"
                  :title="_('Delete SSH Key')"
                  :message="_('Are you sure you want to delete this SSH Key?')"
                  :submit="_('Delete Key')"
                  :fields="['fingerprint']">
      <p class="text-muted small mb-0">
        <RdwIcon value="bi-exclamation-triangle-fill" class="text-warning me-1" />
        {%- trans %}Any backup client using this key will lose access immediately.{% endtrans %}
      </p>
    </ModalConfirm>
  </form>
{% endblock %}