{% extends "layouts/base.html" %}

{% load static %}
{% load i18n %}

{% block title %}{{ zone.name }} - {% trans "Zone Details" %}{% endblock %}

{% block extra_css %}
<style>
    .zone-header {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }
    
    .zone-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        transform: translate(30px, -30px);
    }
    
    .zone-stats {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .stat-card {
        text-align: center;
        padding: 20px 15px;
        border-radius: 10px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid #e9ecef;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    }
    
    .stat-card .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        font-size: 1.5rem;
    }
    
    .info-card {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 25px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .info-card .card-header {
        background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
        border-bottom: 1px solid #dee2e6;
        padding: 15px 20px;
    }
    
    .info-item {
        padding: 15px 20px;
        border-bottom: 1px solid #f1f3f4;
        transition: background-color 0.2s ease;
    }
    
    .info-item:hover {
        background-color: #f8f9fa;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 140px;
        display: inline-block;
    }
    
    .zone-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    .zone-timezone {
        font-size: 0.85rem;
        color: #6c757d;
        background: #f8f9fa;
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid #e9ecef;
    }
    
    .action-buttons .btn {
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 500;
    }
    
    .quick-action-card {
        text-align: center;
        padding: 20px 15px;
        border-radius: 10px;
        transition: all 0.2s ease;
        text-decoration: none;
        display: block;
        height: 100%;
    }
    
    .quick-action-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        text-decoration: none;
    }
    
    .health-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
        animation: pulse 2s infinite;
    }
    
    .health-good { background-color: #28a745; }
    .health-warning { background-color: #ffc107; }
    .health-error { background-color: #dc3545; }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    .metric-trend {
        font-size: 0.75rem;
        margin-top: 5px;
    }
    
    .trend-up { color: #28a745; }
    .trend-down { color: #dc3545; }
    .trend-stable { color: #6c757d; }
    
    @media (max-width: 768px) {
        .zone-header {
            padding: 20px;
            text-align: center;
        }
        
        .action-buttons {
            text-align: center;
        }
        
        .info-label {
            display: block;
            margin-bottom: 5px;
            min-width: auto;
        }
        
        .stat-card {
            margin-bottom: 15px;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{% trans "Zone Details" %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">{% trans "Dashboard" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">{% trans "Channels" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:zone_list' %}">{% trans "Zones" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ zone.name }}</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<!-- Zone Header -->
<div class="zone-header">
    <div class="row align-items-center">
        <div class="col-md-8">
            <div class="d-flex align-items-center mb-3">
                <i class="fe fe-map-pin fe-2x me-3"></i>
                <div>
                    <div class="d-flex align-items-center mb-2">
                        <h2 class="mb-0 me-3">{{ zone.name }}</h2>
                        <div class="zone-status">
                            {% if zone.is_active %}
                            <span class="health-indicator health-good"></span>
                            <span class="badge bg-success">{% trans "Active" %}</span>
                            {% else %}
                            <span class="health-indicator health-error"></span>
                            <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                        {% if zone.code %}
                        <span class="badge bg-light text-dark">
                            <i class="fe fe-hash me-1"></i>{{ zone.code }}
                        </span>
                        {% endif %}
                        {% if zone.timezone %}
                        <span class="zone-timezone">
                            <i class="fe fe-clock me-1"></i>{{ zone.timezone }}
                        </span>
                        {% endif %}
                    </div>
                    <div class="d-flex align-items-center text-light opacity-75">
                        <i class="fe fe-tv me-2"></i>
                        <span>{{ zone.channels_count|default:0 }} {% trans "channel" %}{{ zone.channels_count|pluralize }}</span>
                        <span class="mx-2">•</span>
                        <span>{{ zone.relations_count|default:0 }} {% trans "relation" %}{{ zone.relations_count|pluralize }}</span>
                    </div>
                </div>
            </div>
            {% if zone.description %}
            <p class="mb-0 opacity-90">{{ zone.description }}</p>
            {% endif %}
        </div>
        <div class="col-md-4 text-md-end">
            <div class="action-buttons">
                <a href="{% url 'channels:zone_update' zone.id %}" class="btn btn-light">
                    <i class="fe fe-edit me-1"></i> {% trans "Edit Zone" %}
                </a>
                <div class="btn-group">
                    <button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="fe fe-more-horizontal me-1"></i> {% trans "More" %}
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" onclick="exportZone('{{ zone.id }}', 'json')">
                            <i class="fe fe-download me-2"></i>{% trans "Export JSON" %}
                        </a></li>
                        <li><a class="dropdown-item" href="#" onclick="exportZone('{{ zone.id }}', 'csv')">
                            <i class="fe fe-file-text me-2"></i>{% trans "Export CSV" %}
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="#" onclick="deleteZone('{{ zone.id }}')">
                            <i class="fe fe-trash-2 me-2"></i>{% trans "Delete Zone" %}
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Zone Statistics -->
<div class="zone-stats">
    <div class="row g-4">
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                    <i class="fe fe-tv"></i>
                </div>
                <h4 class="mb-1 fw-bold">{{ zone.channels_count|default:0 }}</h4>
                <p class="text-muted mb-0">{% trans "Channels" %}</p>
                <div class="metric-trend trend-stable">
                    <i class="fe fe-minus"></i> {% trans "No change" %}
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon bg-info bg-opacity-10 text-info">
                    <i class="fe fe-settings"></i>
                </div>
                <h4 class="mb-1 fw-bold">{{ zone.relations_count|default:0 }}</h4>
                <p class="text-muted mb-0">{% trans "Relations" %}</p>
                <div class="metric-trend trend-up">
                    <i class="fe fe-trending-up"></i> {% trans "Active" %}
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon bg-success bg-opacity-10 text-success">
                    <i class="fe fe-activity"></i>
                </div>
                <h4 class="mb-1 fw-bold">
                    {% if zone.is_active %}
                    {% trans "Online" %}
                    {% else %}
                    {% trans "Offline" %}
                    {% endif %}
                </h4>
                <p class="text-muted mb-0">{% trans "Status" %}</p>
                <div class="metric-trend {% if zone.is_active %}trend-up{% else %}trend-down{% endif %}">
                    {% if zone.is_active %}
                    <i class="fe fe-check-circle"></i> {% trans "Operational" %}
                    {% else %}
                    <i class="fe fe-x-circle"></i> {% trans "Inactive" %}
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                    <i class="fe fe-clock"></i>
                </div>
                <h4 class="mb-1 fw-bold">{{ zone.updated_at|timesince }}</h4>
                <p class="text-muted mb-0">{% trans "Last Updated" %}</p>
                <div class="metric-trend trend-stable">
                    <i class="fe fe-calendar"></i> {{ zone.updated_at|date:"M d" }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Zone Information -->
    <div class="col-lg-6">
        <div class="info-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fe fe-info me-2"></i>{% trans "Zone Information" %}
                </h5>
            </div>
            <div class="card-body p-0">
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-map-pin text-primary me-1"></i>{% trans "Name" %}:
                    </span>
                    <span class="fw-semibold">{{ zone.name }}</span>
                </div>
                
                {% if zone.code %}
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-hash text-info me-1"></i>{% trans "Code" %}:
                    </span>
                    <span class="fw-semibold">{{ zone.code }}</span>
                </div>
                {% endif %}
                
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-activity text-success me-1"></i>{% trans "Status" %}:
                    </span>
                    <div class="zone-status">
                        {% if zone.is_active %}
                        <span class="health-indicator health-good"></span>
                        <span class="badge bg-success">{% trans "Active" %}</span>
                        {% else %}
                        <span class="health-indicator health-error"></span>
                        <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                        {% endif %}
                    </div>
                </div>
                
                {% if zone.timezone %}
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-clock text-warning me-1"></i>{% trans "Timezone" %}:
                    </span>
                    <span class="zone-timezone">{{ zone.timezone }}</span>
                </div>
                {% endif %}
                
                {% if zone.description %}
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-file-text text-muted me-1"></i>{% trans "Description" %}:
                    </span>
                    <span>{{ zone.description }}</span>
                </div>
                {% endif %}
                
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-calendar text-primary me-1"></i>{% trans "Created" %}:
                    </span>
                    <span>{{ zone.created_at|date:"F d, Y \a\t g:i A" }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">
                        <i class="fe fe-clock text-info me-1"></i>{% trans "Updated" %}:
                    </span>
                    <span>{{ zone.updated_at|date:"F d, Y \a\t g:i A" }}</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Associated Channels -->
    <div class="col-lg-6">
        <div class="info-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fe fe-tv me-2"></i>{% trans "Associated Channels" %}
                    <span class="badge bg-primary ms-2">{{ zone.channels_count|default:0 }}</span>
                </h5>
            </div>
            <div class="card-body p-0">
                {% if zone.associated_channels %}
                    {% for channel in zone.associated_channels %}
                    <div class="info-item">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="fe fe-tv text-primary me-2"></i>
                                <div>
                                    <div class="fw-semibold">
                                        <a href="{% url 'channels:channel_detail' channel.id %}" class="text-decoration-none">
                                            {{ channel.display_name|default:channel.name }}
                                        </a>
                                    </div>
                                    {% if channel.description %}
                                    <small class="text-muted">{{ channel.description|truncatechars:50 }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                {% if channel.is_active %}
                                <span class="badge bg-success">{% trans "Active" %}</span>
                                {% else %}
                                <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                <div class="info-item text-center py-4">
                    <i class="fe fe-tv text-muted fe-2x mb-2"></i>
                    <p class="text-muted mb-0">{% trans "No channels associated with this zone" %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Zone Relations and Configurations -->
<div class="row mt-4">
    <div class="col-12">
        <div class="info-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fe fe-settings me-2"></i>{% trans "Zone Relations & Configurations" %}
                    <span class="badge bg-info ms-2">{{ zone.relations_count|default:0 }}</span>
                </h5>
            </div>
            <div class="card-body">
                {% if zone.zone_relations %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>{% trans "Channel" %}</th>
                                <th>{% trans "Stream URL" %}</th>
                                <th>{% trans "Codec" %}</th>
                                <th>{% trans "VPN Config" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for relation in zone.zone_relations %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <i class="fe fe-tv text-primary me-2"></i>
                                        <div>
                                            <div class="fw-semibold">{{ relation.channel.display_name|default:relation.channel.name }}</div>
                                            <small class="text-muted">{{ relation.channel.id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if relation.zone_stream_url %}
                                    <code class="small">{{ relation.zone_stream_url|truncatechars:30 }}</code>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if relation.codec_override %}
                                    <span class="badge bg-info">{{ relation.codec_override }}</span>
                                    {% else %}
                                    <span class="text-muted">{% trans "Default" %}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        {% if relation.use_ipsec %}
                                        <span class="badge bg-primary">IPSec</span>
                                        {% endif %}
                                        {% if relation.use_openvpn %}
                                        <span class="badge bg-success">OpenVPN</span>
                                        {% endif %}
                                        {% if relation.use_wireguard %}
                                        <span class="badge bg-warning">WireGuard</span>
                                        {% endif %}
                                        {% if not relation.use_ipsec and not relation.use_openvpn and not relation.use_wireguard %}
                                        <span class="text-muted">{% trans "None" %}</span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    {% if relation.is_active %}
                                    <span class="badge bg-success">{% trans "Active" %}</span>
                                    {% else %}
                                    <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary" title="{% trans 'View Details' %}">
                                            <i class="fe fe-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-warning" title="{% trans 'Edit Configuration' %}">
                                            <i class="fe fe-edit"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fe fe-settings text-muted fe-3x mb-3"></i>
                    <h6 class="text-muted">{% trans "No zone relations configured" %}</h6>
                    <p class="text-muted mb-3">{% trans "Zone relations define how channels are configured within this zone." %}</p>
                    <button class="btn btn-primary">
                        <i class="fe fe-plus me-1"></i>{% trans "Add Relation" %}
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-zap me-2"></i>{% trans "Quick Actions" %}
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-2 col-6">
                        <a href="{% url 'channels:zone_update' zone.id %}" class="btn btn-primary w-100">
                            <i class="fe fe-edit me-2"></i>
                            <div>{% trans "Edit" %}</div>
                            <small class="opacity-75">{% trans "Modify details" %}</small>
                        </a>
                    </div>
                    <div class="col-md-2 col-6">
                        <a href="{% url 'channels:zone_list' %}" class="btn btn-info w-100">
                            <i class="fe fe-list me-2"></i>
                            <div>{% trans "All Zones" %}</div>
                            <small class="opacity-75">{% trans "Browse zones" %}</small>
                        </a>
                    </div>
                    <div class="col-md-2 col-6">
                        <button class="btn btn-success w-100" onclick="duplicateZone('{{ zone.id }}')">
                            <i class="fe fe-copy me-2"></i>
                            <div>{% trans "Duplicate" %}</div>
                            <small class="opacity-75">{% trans "Clone zone" %}</small>
                        </button>
                    </div>
                    <div class="col-md-2 col-6">
                        <button class="btn btn-secondary w-100" onclick="exportZoneData('{{ zone.id }}')">
                            <i class="fe fe-download me-2"></i>
                            <div>{% trans "Export" %}</div>
                            <small class="opacity-75">{% trans "Download data" %}</small>
                        </button>
                    </div>
                    <div class="col-md-2 col-6">
                        <button class="btn btn-warning w-100" onclick="toggleZoneStatus('{{ zone.id }}', {{ zone.is_active|yesno:'true,false' }})">
                            <i class="fe fe-power me-2"></i>
                            <div>
                                {% if zone.is_active %}
                                    {% trans "Deactivate" %}
                                {% else %}
                                    {% trans "Activate" %}
                                {% endif %}
                            </div>
                            <small class="opacity-75">{% trans "Toggle status" %}</small>
                        </button>
                    </div>
                    <div class="col-md-2 col-6">
                        <button class="btn btn-outline-danger w-100" onclick="deleteZone('{{ zone.id }}')">
                            <i class="fe fe-trash-2 me-2"></i>
                            <div>{% trans "Delete" %}</div>
                            <small class="opacity-75">{% trans "Remove permanently" %}</small>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Activity Log -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-activity me-2"></i>{% trans "Recent Activity" %}
                    <span class="badge bg-secondary ms-2">{{ zone.activity_logs.count|default:0 }}</span>
                </h5>
            </div>
            <div class="card-body">
                {% if zone.activity_logs %}
                <div class="timeline">
                    {% for log in zone.activity_logs|slice:":10" %}
                    <div class="timeline-item d-flex mb-3">
                        <div class="timeline-marker me-3">
                            {% if log.action == 'created' %}
                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fe fe-plus text-white"></i>
                            </div>
                            {% elif log.action == 'updated' %}
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fe fe-edit text-white"></i>
                            </div>
                            {% elif log.action == 'deleted' %}
                            <div class="bg-danger rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fe fe-trash-2 text-white"></i>
                            </div>
                            {% elif log.action == 'activated' %}
                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fe fe-check text-white"></i>
                            </div>
                            {% elif log.action == 'deactivated' %}
                            <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fe fe-x text-white"></i>
                            </div>
                            {% else %}
                            <div class="bg-info rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                <i class="fe fe-info text-white"></i>
                            </div>
                            {% endif %}
                        </div>
                        <div class="timeline-content flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">{{ log.get_action_display|title }}</h6>
                                    <p class="text-muted mb-1">{{ log.description }}</p>
                                    {% if log.user %}
                                    <small class="text-muted">
                                        <i class="fe fe-user me-1"></i>{{ log.user.get_full_name|default:log.user.username }}
                                    </small>
                                    {% endif %}
                                </div>
                                <small class="text-muted">{{ log.created_at|timesince }} {% trans "ago" %}</small>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% if zone.activity_logs.count > 10 %}
                <div class="text-center mt-3">
                    <button class="btn btn-outline-primary btn-sm" onclick="loadMoreActivity()">
                        <i class="fe fe-more-horizontal me-1"></i>{% trans "Load More" %}
                    </button>
                </div>
                {% endif %}
                {% else %}
                <div class="text-center py-4">
                    <i class="fe fe-activity text-muted" style="font-size: 3rem;"></i>
                    <h6 class="text-muted mt-3">{% trans "No activity recorded" %}</h6>
                    <p class="text-muted mb-0">{% trans "Zone activity will appear here as actions are performed." %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block modals %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fe fe-alert-triangle text-warning" style="font-size: 3rem;"></i>
                </div>
                <h6 class="text-center mb-3">Delete Zone "{{ zone.name }}"?</h6>
                <p class="text-center text-muted mb-3">This action will permanently delete this zone and cannot be undone.</p>
                
                <div class="alert alert-warning">
                    <h6 class="alert-heading">Warning!</h6>
                    <p class="mb-0">Deleting this zone will:</p>
                    <ul class="mb-0 mt-2">
                        <li>Remove all zone configurations</li>
                        <li>Delete associated zone data</li>
                        <li>This action cannot be reversed</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fe fe-x me-1"></i> Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="fe fe-trash-2 me-1"></i> Delete Zone
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock modals %}

{% block extra_js %}
<script>
// Delete zone function
function deleteZone(zoneId) {
    $('#deleteModal').modal('show');
    
    $('#confirmDelete').off('click').on('click', function() {
        // Show loading state
        $(this).prop('disabled', true).html('<i class="fe fe-loader me-1"></i> Deleting...');
        
        $.ajax({
            url: '/channels/zones/' + zoneId + '/delete/',
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            success: function(response) {
                // Redirect to zones list
                window.location.href = '{% url "channels:zone_list" %}';
            },
            error: function(xhr) {
                $('#deleteModal').modal('hide');
                
                // Reset button state
                $('#confirmDelete').prop('disabled', false).html('<i class="fe fe-trash-2 me-1"></i> Delete Zone');
                
                // Show error message
                let errorMessage = 'Delete failed. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                
                // Create and show alert
                const alertHtml = `
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fe fe-alert-circle me-2"></i>
                        <strong>Error:</strong> ${errorMessage}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;
                
                $('.zone-header').before(alertHtml);
                
                // Auto-dismiss after 5 seconds
                setTimeout(function() {
                    $('.alert').fadeOut();
                }, 5000);
            }
        });
    });
}

// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap tooltips if available
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
{% endblock extra_js %}