@extends('layouts.app')
@section('title', 'Alerts')

@section('content')
<div class="space-y-4">
@foreach($alerts as $alert)
    <div class="rounded-3xl border border-slate-200 p-5 flex justify-between items-start gap-4">
        <div>
            <div class="font-bold">{{ $alert->title }}</div>
            <div class="text-sm text-slate-500 mt-1">{{ $alert->message }}</div>
            <div class="text-xs text-slate-400 mt-2">{{ strtoupper($alert->severity) }} • {{ strtoupper($alert->status) }}</div>
        </div>
        <div class="flex gap-2">
            <form method="POST" action="{{ route('alerts.ack', $alert) }}">@csrf<button class="rounded-xl bg-amber-500 text-white px-4 py-2 text-sm">Acknowledge</button></form>
            <form method="POST" action="{{ route('alerts.resolve', $alert) }}">@csrf<button class="rounded-xl bg-emerald-600 text-white px-4 py-2 text-sm">Resolve</button></form>
        </div>
    </div>
@endforeach
</div>
<div class="mt-6">{{ $alerts->links() }}</div>
@endsection