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

{% block title %}{% if object %}Edit Alert Instance{% else %}Create Alert Instance{% endif %} - 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">{% if object %}Edit{% else %}Create{% endif %}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {% if object %}Edit Alert Instance{% else %}Create Alert Instance{% endif %}
    <small>{% if object %}{{ object.title }}{% else %}New Alert{% endif %}</small>
</h1>
<!-- END page-header -->

<form method="post" id="alert-form">
    {% csrf_token %}
    
    <div class="row">
        <div class="col-xl-8">
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Alert Information</h4>
                </div>
                <div class="panel-body">
                    <div class="mb-3">
                        <label class="form-label">Alert Rule <span class="text-danger">*</span></label>
                        {{ form.alert_rule }}
                        {% if form.alert_rule.errors %}
                        <div class="text-danger">{{ form.alert_rule.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        {{ form.title }}
                        {% if form.title.errors %}
                        <div class="text-danger">{{ form.title.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Message <span class="text-danger">*</span></label>
                        {{ form.message }}
                        {% if form.message.errors %}
                        <div class="text-danger">{{ form.message.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Severity <span class="text-danger">*</span></label>
                                {{ form.severity }}
                                {% if form.severity.errors %}
                                <div class="text-danger">{{ form.severity.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                {{ form.status }}
                                {% if form.status.errors %}
                                <div class="text-danger">{{ form.status.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Triggered At</label>
                                {{ form.triggered_at }}
                                {% if form.triggered_at.errors %}
                                <div class="text-danger">{{ form.triggered_at.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Acknowledged At</label>
                                {{ form.acknowledged_at }}
                                {% if form.acknowledged_at.errors %}
                                <div class="text-danger">{{ form.acknowledged_at.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Acknowledged By</label>
                        {{ form.acknowledged_by }}
                        {% if form.acknowledged_by.errors %}
                        <div class="text-danger">{{ form.acknowledged_by.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Resolution Notes</label>
                        {{ form.resolution_notes }}
                        {% if form.resolution_notes.errors %}
                        <div class="text-danger">{{ form.resolution_notes.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- END panel -->
        </div>

        <div class="col-xl-4">
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Form Actions</h4>
                </div>
                <div class="panel-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fa fa-save me-2"></i>
                            {% if object %}Update Alert{% else %}Create Alert{% endif %}
                        </button>
                        
                        <a href="{% if object %}{% url 'communications:alert_instance_detail' object.pk %}{% else %}{% url 'communications:alert_instance_list' %}{% endif %}" class="btn btn-secondary">
                            <i class="fa fa-times me-2"></i>Cancel
                        </a>
                        
                        {% if object %}
                        <hr>
                        <a href="{% url 'communications:alert_instance_delete' object.pk %}" class="btn btn-danger">
                            <i class="fa fa-trash me-2"></i>Delete Alert
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- END panel -->
        </div>
    </div>
</form>
{% endblock %}