.py-1.hover:bg-gray-50[data-controller="notification-drawer-item" data-action="click->notification-drawer-item#markRead" data-notification-drawer-target="item" class=('font-bold' if @signal.state != 'closed') data-notification-drawer-item-signal-state-value="#{@signal.state}" data-notification-drawer-item-signal-id-value="#{@signal.id}"]
    .flex.items-center.px-4.py-2.text-sm.text-gray-500
        .w-6.h-6.mr-1
            - if @signal.kind == "success"
                svg.signum-notification-icon-success[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"]
                    path[stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"]
            - elsif @signal.kind == "error"
                svg.signum-notification-icon-error[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor"]
                    path[stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"]
            - else
                svg.signum-notification-icon-info[xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"]
                    path[stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"]
        p
            = sanitize @signal.text