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

{% block title %}Configure Alerts{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <div class="container">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'communications:message_list' %}">Messages</a></li>
            <li class="breadcrumb-item active">Configure Alerts</li>
        </ul>
        
        <div class="row align-items-center mb-3">
            <div class="col">
                <h1 class="page-header">Configure Alerts</h1>
                <p class="text-muted">Set up automated alerts and notification rules for system events</p>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createAlertModal">
                    <i class="fa fa-plus me-2"></i>Create Alert Rule
                </button>
            </div>
        </div>
        
        <!-- Alert Categories -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <div class="w-60px h-60px bg-danger bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
                            <i class="fa fa-exclamation-triangle fa-2x text-danger"></i>
                        </div>
                        <h5>Critical Alerts</h5>
                        <div class="fs-24px fw-600 text-danger">{{ critical_alerts_count }}</div>
                        <div class="text-muted small">Active rules</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <div class="w-60px h-60px bg-warning bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
                            <i class="fa fa-exclamation-circle fa-2x text-warning"></i>
                        </div>
                        <h5>Warning Alerts</h5>
                        <div class="fs-24px fw-600 text-warning">{{ warning_alerts_count }}</div>
                        <div class="text-muted small">Active rules</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <div class="w-60px h-60px bg-info bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
                            <i class="fa fa-info-circle fa-2x text-info"></i>
                        </div>
                        <h5>Info Alerts</h5>
                        <div class="fs-24px fw-600 text-info">{{ info_alerts_count }}</div>
                        <div class="text-muted small">Active rules</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <div class="w-60px h-60px bg-success bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
                            <i class="fa fa-check-circle fa-2x text-success"></i>
                        </div>
                        <h5>Success Alerts</h5>
                        <div class="fs-24px fw-600 text-success">{{ success_alerts_count }}</div>
                        <div class="text-muted small">Active rules</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Alert Rules Table -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Alert Rules</h4>
                <div class="card-toolbar">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleAllRules(true)">
                            <i class="fa fa-play me-1"></i>Enable All
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="toggleAllRules(false)">
                            <i class="fa fa-pause me-1"></i>Disable All
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="alertRulesTable">
                        <thead>
                            <tr>
                                <th>Rule Name</th>