@if(count($riskAlerts))

    <div class="panel"
         style="
            margin-bottom:12px;
            border:1px solid #fee2e2;
            background:#fffafa;
            padding:10px 12px;
         ">

        <!-- ===================================== -->
        <!-- HEADER -->
        <!-- ===================================== -->

        <div style="
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:8px;
            flex-wrap:wrap;
        ">

            <div style="
                display:flex;
                align-items:center;
                gap:7px;
            ">

                <div style="
                    color:#dc2626;
                    font-size:13px;
                    font-weight:900;
                    line-height:1;
                ">

                    ⚠

                </div>

                <div style="
                    color:#7f1d1d;
                    font-size:13px;
                    font-weight:800;
                    line-height:1;
                    letter-spacing:.2px;
                ">

                    Risk Alerts

                </div>

            </div>

            <div style="
                background:#fee2e2;
                color:#991b1b;
                border-radius:999px;
                padding:2px 8px;
                font-size:10px;
                font-weight:800;
                line-height:1.2;
            ">

                {{ count($riskAlerts) }}

            </div>

        </div>

        <!-- ===================================== -->
        <!-- ALERT TAGS -->
        <!-- ===================================== -->

        <div style="
            display:flex;
            flex-wrap:wrap;
            gap:6px;
        ">

            @foreach($riskAlerts as $alert)

                <div style="
                    background:white;
                    border:1px solid #fee2e2;
                    border-radius:999px;
                    padding:5px 9px;
                    font-size:11px;
                    font-weight:700;
                    color:#991b1b;
                    line-height:1.2;
                ">

                    {{ $alert }}

                </div>

            @endforeach

        </div>

        <!-- ===================================== -->
        <!-- TRIAGE NOTES -->
        <!-- ===================================== -->

        @if(!empty($encounter->triage_notes))

            <div style="
                margin-top:10px;
                padding-top:10px;
                border-top:1px dashed #fecaca;
            ">

                <div style="
                    font-size:10px;
                    font-weight:800;
                    color:#991b1b;
                    text-transform:uppercase;
                    letter-spacing:.4px;
                    margin-bottom:5px;
                ">

                    Triage Notes

                </div>

                <div style="
                    font-size:12px;
                    line-height:1.5;
                    color:#7f1d1d;
                ">

                    {{ $encounter->triage_notes }}

                </div>

            </div>

        @endif

    </div>

@endif