<div class="row fade-in mb-4 pb-2 border-bottom">
    <div class="col-md-8">
        <h1 class="h2 fw-bold text-dark mb-1"><i class="fa-solid fa-bell text-warning me-2"></i> Action Matrix</h1>
        <p class="text-secondary mb-0">System alerts, required interventions, and intelligence pulse.</p>
    </div>
</div>

<div class="row fade-in g-4">
    <div class="col-md-8 mx-auto">
        <?php if(empty($notifications)): ?>
            <div class="card border-0 shadow-sm rounded-4 text-center py-5 bg-light">
                <div class="card-body">
                    <i class="fa-regular fa-bell-slash display-4 text-muted opacity-25 mb-3"></i>
                    <h5 class="fw-bold text-dark">No Active Alerts</h5>
                    <p class="text-secondary mb-0">System operations are nominal. No operator intervention required.</p>
                </div>
            </div>
        <?php else: ?>
            <div class="list-group shadow-sm border-0 gap-2">
                <?php foreach($notifications as $notif): 
                    $accent = 'secondary';
                    $icon = 'fa-circle-info';
                    $bg = 'bg-white';
                    
                    if ($notif->type == 'success') { $accent = 'success'; $icon = 'fa-circle-check'; }
                    if ($notif->type == 'warning') { $accent = 'warning'; $icon = 'fa-triangle-exclamation'; $bg = 'bg-warning bg-opacity-10'; }
                    if ($notif->type == 'danger')  { $accent = 'danger'; $icon = 'fa-radiation'; $bg = 'bg-danger bg-opacity-10'; }
                    if ($notif->type == 'pulse')   { $accent = 'primary'; $icon = 'fa-heart-pulse'; }
                ?>
                <div class="list-group-item p-4 border-0 rounded-4 shadow-sm <?= $bg ?> position-relative overflow-hidden" style="border-left: 4px solid var(--bs-<?= $accent ?>) !important;">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="fw-bold text-dark d-flex align-items-center m-0">
                            <i class="fa-solid <?= $icon ?> text-<?= $accent ?> me-2"></i> <?= htmlspecialchars($notif->title) ?>
                        </h5>
                        <small class="text-muted fw-bold font-monospace" dir="ltr"><?= date('H:i | M d', strtotime($notif->created_at)) ?></small>
                    </div>
                    <p class="mb-3 text-secondary ps-4 ms-1" style="font-size: 0.95rem;"><?= nl2br(htmlspecialchars($notif->message)) ?></p>
                    
                    <!-- ACTIONABLE TRIGGERS -->
                    <?php if (!empty($notif->action_type)): ?>
                    <div class="mt-3 pt-3 border-top border-secondary border-opacity-10 ps-4 ms-1 d-flex gap-2">
                        <?php if ($notif->action_type == 'link'): ?>
                            <a href="<?= BASE_URL . $notif->action_target ?>" class="btn btn-sm btn-<?= $accent ?> fw-bold px-3 rounded-pill">Execute Protocol</a>
                        <?php elseif ($notif->action_type == 'resolve'): ?>
                            <form action="<?= BASE_URL ?>/system/resolveAlert" method="POST">
                                <input type="hidden" name="target" value="<?= htmlspecialchars($notif->action_target) ?>">
                                <button class="btn btn-sm btn-dark fw-bold px-3 rounded-pill">Acknowledge</button>
                            </form>
                        <?php else: ?>
                            <a href="<?= BASE_URL . '/system/dismissAlert/' . $notif->id ?>" class="btn btn-sm btn-outline-secondary fw-bold px-3 rounded-pill">Dismiss</a>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>
