{# TOP BAR - timer, cancel, info, FAQ, help, language #}
<div class="ck-topbar ck-fi">
    <button type="button" data-action="open-modal" data-target="mCancel" class="ck-icon-btn" aria-label="Cancel payment">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A84A0" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>

    {# Note: no |default(true) here - Twig's default() filter treats an explicit `false` as
       "empty" and silently substitutes the fallback, which masked a genuinely-disabled timer
       (config.timeoutEnabled is always set explicitly by the controller, never left unset). #}
    {% if config.timeoutEnabled %}
    <div class="ck-timer" role="timer" aria-live="polite">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A84A0" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        <span id="timer" class="ck-timer-text">{{ '%02d'|format((config.timeoutRemaining ?? config.timeoutSeconds ?? 600) // 60) }}:{{ '%02d'|format((config.timeoutRemaining ?? config.timeoutSeconds ?? 600) % 60) }}</span>
    </div>
    {% endif %}

    <div class="ck-topbar-actions">
        <button type="button" data-action="open-modal" data-target="mInfo" class="ck-icon-btn" aria-label="Info">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A84A0" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        </button>
        {% if show_faq|default(true) %}
        <button type="button" data-action="open-modal" data-target="mFaq" class="ck-icon-btn" aria-label="FAQ">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A84A0" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        </button>
        {% endif %}
        <button type="button" data-action="open-modal" data-target="mHelp" class="ck-icon-btn" aria-label="Support">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#7A84A0" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        </button>
    </div>
</div>
