{% props value: String, label: String = "", description: String = "", revealed: bool = false, once: bool = false, heading: String = "Copy your new key now", reveal_path: String = "", roll_path: String = "" %}
{#- Masked unless `revealed` or `once` (just created): the page then holds only the prefix and last 4 characters. `reveal_path`/`roll_path` add Reveal and Roll Form Buttons. -#}
{%- let masked = {
let prefix = value.rfind('_').map_or("", |at| &value[..=at]);
let tail: String = value.chars().rev().take(4).collect::<Vec<_>>().into_iter().rev().collect();
format!("{prefix}{}{tail}", "•".repeat(24))
} %}
{%- if once %}
<div class="ui-secret-once" role="status">
<div class="ui-secret-once-head"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>{{ heading }}</div>
<p>You won't be able to see it again. If you lose it, create a new key.</p>
<div class="ui-secret" data-ui="secret"><code>{{ value }}</code><button class="ui-btn" data-variant="ghost" data-size="sm" type="button" data-ui-part="copy"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>Copy</button></div>
</div>
{%- else %}
<div class="ui-field">
{%- if !label.is_empty() %}
<span class="ui-label">{{ label }}</span>
{%- end %}
<div class="ui-secret" data-ui="secret">
{%- if revealed %}
<code>{{ value }}</code>
{%- else %}
<code aria-label="{% if label.is_empty() %}Secret{% else %}{{ label }}{% end %}, hidden">{{ masked }}</code>
{%- if !reveal_path.is_empty() %}
<.form_button action={reveal_path.clone()} variant="ghost" size="sm"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>Reveal</.form_button>
{%- end %}
{%- end %}
<button class="ui-btn" data-variant="ghost" data-size="sm" type="button" data-ui-part="copy"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>Copy</button>
{%- if !roll_path.is_empty() %}
<.form_button action={roll_path.clone()} variant="ghost" size="sm" confirm="Roll this secret? The old one stops working."><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>Roll</.form_button>
{%- end %}
</div>
{%- if !description.is_empty() %}
<p class="ui-field-description">{{ description }}</p>
{%- end %}
</div>
{%- end %}