<div id="async_flash" hx-swap-oob="true">
  <% f.each do |type, message| %>
    <% if message.present? %>
      <% alert_class = case type.to_sym
                       when :success then 'success'
                       when :notice, :info then 'info'
                       when :warning then 'warning'
                       when :alert, :error, :danger then 'danger'
                       else 'info'
                       end %>
      <% auto_dismiss = [:success, :notice, :info].include?(type.to_sym) %>
      <div class="banner flex-row align-start <%= alert_class %>" role="alert" style="animation: slideInDown 0.3s ease-out;">
        <% case type.to_sym %>
        <% when :success %>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        <% when :notice, :info %>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
        <% when :warning, :alert, :error, :danger %>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
        <% end %>
        <%= message %>
      </div>
      <% if auto_dismiss %>
        <script>
          setTimeout(() => {
            const banners = document.querySelectorAll('#async_flash .banner');
            const el = banners[banners.length - 1];
            if (el) {
              el.style.animation = 'slideOutUp 0.3s ease-in';
              setTimeout(() => { el.remove(); }, 300);
            }
          }, 3000);
        </script>
      <% end %>
    <% end %>
  <% end %>
</div>