{% props stay_path: String, sign_out_path: String = "/sign-out", id: String = "timeout-warning", timeout: i64 = 1800, warn: i64 = 120, remaining: String = "2 minutes", mode: String = "", open: bool = false %}
{#- The controller opens it `warn` seconds before a `timeout`-second session ends; “Stay signed in” posts to `stay_path` to extend it. `mode="shared"` is for shared screens: “I'm still here” / “Start again”. -#}
{%- let shared = mode == "shared" %}
<dialog class="ui-dialog" id="{{ id }}" role="alertdialog" aria-labelledby="{{ id }}-title" aria-describedby="{{ id }}-description" data-ui="timeout-warning" data-timeout="{{ timeout }}" data-warn="{{ warn }}"{% if !mode.is_empty() %} data-mode="{{ mode }}"{% end %}{% if open %} open{% end %}>
<div class="ui-dialog-header">
{%- if shared %}
<h2 class="ui-dialog-title" id="{{ id }}-title">Are you still there?</h2>
<p class="ui-dialog-description" id="{{ id }}-description">We'll clear this screen for the next person in <span class="ui-timeout-count">{{ remaining }}</span>.</p>
{%- else %}
<h2 class="ui-dialog-title" id="{{ id }}-title">You'll be signed out soon</h2>
<p class="ui-dialog-description" id="{{ id }}-description">For your security, we'll sign you out in <span class="ui-timeout-count">{{ remaining }}</span> because you haven't done anything for a while. Anything you haven't saved will be lost.</p>
{%- end %}
</div>
<div class="ui-dialog-footer" style="justify-content:flex-start;align-items:center;gap:16px">
{{ form_tag(&stay_path, "post") }}<button class="ui-btn" data-size="lg" autofocus>{% if shared %}I'm still here{% else %}Stay signed in{% end %}</button></form>
<a class="ui-link" href="{{ sign_out_path }}">{% if shared %}Start again{% else %}Sign out{% end %}</a>
</div>
</dialog>