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

{% block title %}Channels Management - {{ block.super }}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'channels/css/channels.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.css">
{% endblock %}

{% block extra_js %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.js"></script>
    <script src="{% static 'channels/js/channels.js' %}"></script>
{% endblock %}

{% block sidebar %}
    <!-- Channels Navigation Sidebar -->
    <div class="sidebar-section">
        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span><i class="fas fa-tv me-2"></i>Channels Management</span>
        </h6>
        <nav class="nav nav-pills flex-column">
            <a class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" 
               href="{% url 'channels:dashboard' %}">
                <i class="fas fa-tachometer-alt me-2"></i>Dashboard
            </a>
            
            <!-- Channels Section -->
            <div class="nav-section">
                <h6 class="nav-section-title px-3 mt-3 mb-1 text-muted">
                    <i class="fas fa-broadcast-tower me-2"></i>Channels
                </h6>
                <a class="nav-link {% if 'channel' in request.resolver_match.url_name and 'list' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:channel_list' %}">
                    <i class="fas fa-list me-2"></i>All Channels
                </a>
                {% if perms.channels.add_channel %}
                <a class="nav-link {% if 'channel' in request.resolver_match.url_name and 'create' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:channel_create' %}">
                    <i class="fas fa-plus me-2"></i>Add Channel
                </a>
                {% endif %}
            </div>
            
            <!-- Zones Section -->
            <div class="nav-section">
                <h6 class="nav-section-title px-3 mt-3 mb-1 text-muted">
                    <i class="fas fa-globe me-2"></i>Distribution Zones
                </h6>
                <a class="nav-link {% if 'zone' in request.resolver_match.url_name and 'list' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:zone_list' %}">
                    <i class="fas fa-list me-2"></i>All Zones
                </a>
                {% if perms.channels.add_zone %}
                <a class="nav-link {% if 'zone' in request.resolver_match.url_name and 'create' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:zone_create' %}">
                    <i class="fas fa-plus me-2"></i>Add Zone
                </a>
                {% endif %}
            </div>
            
            <!-- Shows Section -->
            <div class="nav-section">
                <h6 class="nav-section-title px-3 mt-3 mb-1 text-muted">
                    <i class="fas fa-film me-2"></i>Shows & Programs
                </h6>
                <a class="nav-link {% if 'show' in request.resolver_match.url_name and 'list' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:show_list' %}">
                    <i class="fas fa-list me-2"></i>All Shows
                </a>
                {% if perms.channels.add_show %}
                <a class="nav-link {% if 'show' in request.resolver_match.url_name and 'create' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:show_create' %}">
                    <i class="fas fa-plus me-2"></i>Add Show
                </a>
                {% endif %}
            </div>
            
            <!-- EPG Section -->
            <div class="nav-section">
                <h6 class="nav-section-title px-3 mt-3 mb-1 text-muted">
                    <i class="fas fa-calendar-alt me-2"></i>Electronic Program Guide
                </h6>
                <a class="nav-link {% if 'epg' in request.resolver_match.url_name and 'list' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:epg_list' %}">
                    <i class="fas fa-calendar me-2"></i>EPG Schedule
                </a>
                {% if perms.channels.add_epgentry %}
                <a class="nav-link {% if 'epg' in request.resolver_match.url_name and 'create' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:epg_create' %}">
                    <i class="fas fa-plus me-2"></i>Add EPG Entry
                </a>
                <a class="nav-link {% if 'bulk_import' in request.resolver_match.url_name %}active{% endif %}" 
                   href="{% url 'channels:bulk_epg_import' %}">
                    <i class="fas fa-upload me-2"></i>Bulk Import
                </a>
                {% endif %}
                <a class="nav-link" href="{% url 'channels:export_epg_csv' %}">
                    <i class="fas fa-download me-2"></i>Export EPG
                </a>
            </div>
            
            <!-- API Section -->
            <div class="nav-section">
                <h6 class="nav-section-title px-3 mt-3 mb-1 text-muted">
                    <i class="fas fa-code me-2"></i>API & Integration
                </h6>
                <a class="nav-link" href="{% url 'channels:channel_zones_api' channel_id=1 %}" target="_blank">
                    <i class="fas fa-plug me-2"></i>API Documentation
                </a>
            </div>
        </nav>
    </div>
{% endblock %}

{% block breadcrumb %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:dashboard' %}">Channels</a></li>
            {% block breadcrumb_items %}{% endblock %}
        </ol>
    </nav>
{% endblock %}

{% block content %}
    <div class="channels-content">
        {% if messages %}
            <div class="messages-container mb-4">
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        <i class="fas fa-{% if message.tags == 'success' %}check-circle{% elif message.tags == 'error' %}exclamation-triangle{% elif message.tags == 'warning' %}exclamation-circle{% else %}info-circle{% endif %} me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
        
        {% block channels_content %}{% endblock %}
    </div>
{% endblock %}

{% block footer_js %}
    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
        
        // Initialize popovers
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl)
        })
        
        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 5000);
    </script>
    {% block extra_footer_js %}{% endblock %}
{% endblock %}