{#
  Coffee House Flash Messages Component.
  Renders server-side flash messages with proper ARIA roles and dismiss buttons.

  Expected context:
    - flash_messages: list[dict] with .level ("success"|"error"|"warning"|"info") and .message
    - OR: error (str) — shorthand for a single error message (Auth login pattern)
#}
{% if flash_messages is defined and flash_messages %}
<div class="flex flex-col gap-2 mb-4">
    {% for flash in flash_messages %}
    <div role="alert" class="alert alert-{{ flash.level | default('info') }} shadow-sm">
        {% if flash.level == 'success' %}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        {% elif flash.level == 'error' %}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        {% elif flash.level == 'warning' %}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
        {% else %}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        {% endif %}
        <span>{{ flash.message }}</span>
        <button type="button" class="btn btn-ghost btn-xs" aria-label="Dismiss" onclick="this.closest('.alert').classList.add('ch-alert-dismiss');setTimeout(()=>this.closest('.alert').remove(),200)">&times;</button>
    </div>
    {% endfor %}
</div>
{% endif %}

{# Shorthand: single error string (used by Auth login page) #}
{% if error is defined and error %}
<div role="alert" class="alert alert-error shadow-sm mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    <span>{{ error }}</span>
    <button type="button" class="btn btn-ghost btn-xs" aria-label="Dismiss" onclick="this.closest('.alert').classList.add('ch-alert-dismiss');setTimeout(()=>this.closest('.alert').remove(),200)">&times;</button>
</div>
{% endif %}