{% import "macros/alerts.html" as alerts %}
{% import "macros/buttons.html" as buttons %}
{% import "macros/modal.html" as modal %}

{% extends layout %}

{% block head_title_content %}{{ client.name }} · {{ super() }}{% endblock %}

{% set open_modal = true %}

{% block modal %}
{% call modal.body() %}
  {% call alerts.warning() %}
    The key below will be shown only once. Make sure to copy it and store it somewhere safe.
  {% endcall %}
  <div class="flex justify-end my-2">
    {{ buttons.clipboard(key | tojson | trim | forceescape) }}
  </div>
  <pre class="relative overflow-scroll p-1 bg-slate-100 rounded border border-slate-300">{{ key | tojson(indent=4) | trim }}</pre>
{% endcall %}
{% call modal.footer() %}
  <button
    type="button"
    class="btn-sm border-slate-200 hover:border-slate-300 text-slate-600"
    _="install CloseModalButton()"
  >
    Close
  </button>
{% endcall %}
{% endblock %}
