{% macro value_field(label, rows, hint) -%}
    <div class="field" data-secret-field>
        <label class="field__label" for="secret-value">{{ label }}</label>
        <div class="secret__value">
            <textarea class="secret__input secret__input--masked"
                      id="secret-value"
                      name="value"
                      rows="{{ rows }}"
                      maxlength="8192"
                      autocomplete="off"
                      autocapitalize="off"
                      spellcheck="false"
                      required
                      data-secret-value></textarea>
            <button class="secret__eye"
                    type="button"
                    aria-pressed="false"
                    aria-label="Show the value"
                    data-secret-eye>
                <svg class="secret__eye-off"
                     width="18"
                     height="18"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"
                     stroke-linecap="round"
                     aria-hidden="true">
                    <path d="M3 3l18 18M10.6 6.2A9.8 9.8 0 0 1 12 6c5 0 8.5 4 9.5 6a13 13 0 0 1-2.6 3.4M6.5 7.6A13 13 0 0 0 2.5 12c1 2 4.5 6 9.5 6 1.5 0 2.8-.3 4-.9M9.9 9.9a3 3 0 0 0 4.2 4.2" />
                </svg>
                <svg class="secret__eye-on"
                     width="18"
                     height="18"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"
                     stroke-linecap="round"
                     aria-hidden="true">
                    <path d="M2.5 12c1-2 4.5-6 9.5-6s8.5 4 9.5 6c-1 2-4.5 6-9.5 6s-8.5-4-9.5-6z" />
                    <circle cx="12" cy="12" r="3" />
                </svg>
            </button>
        </div>
        <span class="field__error">required</span>
        <span class="field__hint"
              data-secret-hint
              data-shown="Shown in this browser only: the switch sends nothing, and it starts hidden every time the dialog opens.">{{ hint }}</span>
    </div>
{%- endmacro %}
{% macro expires_field(terms, confirmed, hint) -%}
    <div class="field">
        <label class="field__label" for="secret-term">Expires</label>
        <div class="secret__term">
            <select class="field__box field__select"
                    id="secret-term"
                    name="term"
                    data-secret-term>
                {% for term in terms %}
                    <option value="{{ term.key }}"
                            data-note="{{ term.note }}"
                            {% if term.selected %}selected{% endif %}>{{ term.key }}</option>
                {% endfor %}
            </select>
            <span class="secret__term-note"
                  data-secret-term-note>{{ terms | selectattr("selected") | map(attribute="note") | first }}</span>
        </div>
        <input type="hidden"
               name="never"
               value="{{ "confirmed" if confirmed }}"
               data-secret-never>
        <span class="field__hint">{{ hint }}</span>
    </div>
{%- endmacro %}
{% macro never_confirm(name, note) -%}
    <div data-secret-confirm hidden>
        <div class="overlay__scrim"></div>
        <section class="panel panel--dialog panel--delete"
                 role="alertdialog"
                 aria-label="Never expire">
            <header class="panel__header">
                <div class="panel__title">
                    <h2 class="panel__name">
                        Never expire <span data-secret-confirm-name>{{ name }}</span>?
                    </h2>
                    <button class="panel__close"
                            type="button"
                            aria-label="Close"
                            data-secret-confirm-answer="no">✕</button>
                </div>
                <p class="panel__facts">
                    <span>Expires: never · was <span data-secret-confirm-was></span></span>
                </p>
            </header>
            <div class="dialog">
                <div class="dialog__body">
                    <p class="confirm__question">{{ note }}</p>
                </div>
                <footer class="dialog__footer dialog__footer--end">
                    <div class="dialog__actions">
                        <button class="button button--outline"
                                type="button"
                                data-secret-confirm-answer="no">No</button>
                        <button class="button button--danger"
                                type="button"
                                data-secret-confirm-answer="yes">Yes</button>
                    </div>
                </footer>
            </div>
        </section>
    </div>
{%- endmacro %}