{% extends "base.html" %}
{% load static %}

{% block title %}Delete Alert Instance - Communications{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'communications:dashboard' %}">Communications</a></li>
    <li class="breadcrumb-item"><a href="{% url 'communications:alert_instance_list' %}">Alert Instances</a></li>
    <li class="breadcrumb-item active">Delete Confirmation</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    Delete Alert Instance
    <small>Confirmation Required</small>
</h1>
<!-- END page-header -->

<div class="row justify-content-center">
    <div class="col-xl-6">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <i class="fa fa-exclamation-triangle text-warning me-2"></i>
                    Confirm Alert Deletion
                </h4>
            </div>
            <div class="panel-body">
                <div class="alert alert-warning">
                    <h6 class="alert-heading">Warning</h6>
                    <p class="mb-0">You are about to delete this alert instance. This action cannot be undone.</p>
                </div>

                <h6>Alert Details:</h6>
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold" width="120">Title:</td>
                        <td>{{ object.title }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Severity:</td>
                        <td>
                            <span class="badge bg-{% if object.severity == 'CRITICAL' %}danger{% elif object.severity == 'HIGH' %}warning{% elif object.severity == 'MEDIUM' %}info{% else %}secondary{% endif %}">
                                {{ object.get_severity_display }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Status:</td>
                        <td>
                            <span class="badge bg-{% if object.status == 'ACTIVE' %}danger{% elif object.status == 'ACKNOWLEDGED' %}warning{% else %}success{% endif %}">
                                {{ object.get_status_display }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Triggered:</td>
                        <td>{{ object.triggered_at|date:"M d, Y H:i" }}</td>
                    </tr>
                </table>

                <form method="post">
                    {% csrf_token %}
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'communications:alert_instance_detail' object.pk %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left me-2"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash me-2"></i>Delete Alert
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
{% endblock %}