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

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

{% block breadcrumb_items %}
    <li class="breadcrumb-item active" aria-current="page">Channels</li>
{% endblock %}

{% block channels_content %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2"><i class="fas fa-broadcast-tower me-2"></i>Channels Management</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            {% if perms.channels.add_channel %}
            <a href="{% url 'channels:channel_create' %}" class="btn btn-primary me-2">
                <i class="fas fa-plus me-1"></i>Add Channel
            </a>
            {% endif %}
            <div class="btn-group me-2">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-filter me-1"></i>Filter
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="?type=terrestrial">Terrestrial</a></li>
                    <li><a class="dropdown-item" href="?type=satellite">Satellite</a></li>
                    <li><a class="dropdown-item" href="?type=iptv">IPTV</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="?active=true">Active Only</a></li>
                    <li><a class="dropdown-item" href="?">All Channels</a></li>
                </ul>
            </div>
            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#searchModal">
                <i class="fas fa-search me-1"></i>Search
            </button>
        </div>
    </div>

    <!-- Search and Filter Form -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label for="search" class="form-label">Search</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request.GET.search }}" placeholder="Search channels...">
                </div>
                <div class="col-md-2">
                    <label for="type" class="form-label">Type</label>
                    <select class="form-select" id="type" name="type">
                        <option value="">All Types</option>
                        <option value="terrestrial" {% if request.GET.type == 'terrestrial' %}selected{% endif %}>Terrestrial</option>
                        <option value="satellite" {% if request.GET.type == 'satellite' %}selected{% endif %}>Satellite</option>
                        <option value="iptv" {% if request.GET.type == 'iptv' %}selected{% endif %}>IPTV</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="country" class="form-label">Country</label>
                    <select class="form-select" id="country" name="country">
                        <option value="">All Countries</option>
                        {% for country in countries %}
                        <option value="{{ country.code }}" {% if request.GET.country == country.code %}selected{% endif %}>
                            {{ country.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="language" class="form-label">Language</label>
                    <select class="form-select" id="language" name="language">
                        <option value="">All Languages</option>
                        {% for lang in languages %}
                        <option value="{{ lang }}" {% if request.GET.language == lang %}selected{% endif %}>{{ lang }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="active" class="form-label">Status</label>
                    <select class="form-select" id="active" name="active">
                        <option value="">All Status</option>
                        <option value="true" {% if request.GET.active == 'true' %}selected{% endif %}>Active</option>
                        <option value="false" {% if request.GET.active == 'false' %}selected{% endif %}>Inactive</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-1"></i>Search
                    </button>
                    <a href="{% url 'channels:channel_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>Clear
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Channels Grid -->
    {% if channels %}
        <div class="row">
            {% for channel in channels %}
                <div class="col-xl-4 col-lg-6 col-md-6 mb-4">
                    <div class="card channel-card h-100 {% if not channel.is_active %}opacity-75{% endif %}">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                {% if channel.logo %}
                                    <img src="{{ channel.logo.url }}" alt="{{ channel.name }}" 
                                         class="channel-logo me-2" width="40" height="40">
                                {% else %}
                                    <div class="channel-logo-placeholder me-2">
                                        <i class="fas fa-tv"></i>
                                    </div>
                                {% endif %}
                                <div>
                                    <h6 class="mb-0">{{ channel.name }}</h6>
                                    <small class="text-muted">{{ channel.get_channel_type_display }}</small>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary" type="button" 
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{% url 'channels:channel_detail' channel.pk %}">
                                            <i class="fas fa-eye me-2"></i>View Details
                                        </a>
                                    </li>
                                    {% if perms.channels.change_channel %}
                                    <li>
                                        <a class="dropdown-item" href="{% url 'channels:channel_edit' channel.pk %}">
                                            <i class="fas fa-edit me-2"></i>Edit
                                        </a>
                                    </li>
                                    {% endif %}
                                    {% if perms.channels.delete_channel %}
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <a class="dropdown-item text-danger" href="#" 
                                           onclick="confirmDelete('{{ channel.name }}', '{% url 'channels:channel_delete' channel.pk %}')">
                                            <i class="fas fa-trash me-2"></i>Delete
                                        </a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-6">
                                    <small class="text-muted d-block">Country</small>
                                    <span class="badge bg-primary">{{ channel.country.name }}</span>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted d-block">Language</small>
                                    <span class="badge bg-info">{{ channel.language }}</span>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-6">
                                    <small class="text-muted d-block">Content Rating</small>
                                    <span class="badge bg-warning">{{ channel.get_content_rating_display }}</span>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted d-block">Status</small>
                                    <span class="badge bg-{% if channel.is_active %}success{% else %}secondary{% endif %}">
                                        {% if channel.is_active %}Active{% else %}Inactive{% endif %}
                                    </span>
                                </div>
                            </div>
                            
                            {% if channel.description %}
                                <p class="card-text text-muted small">{{ channel.description|truncatewords:15 }}</p>
                            {% endif %}
                            
                            <div class="row text-center border-top pt-3">
                                <div class="col-4">
                                    <div class="h6 mb-0 text-primary">{{ channel.zones_count }}</div>
                                    <small class="text-muted">Zones</small>
                                </div>
                                <div class="col-4">
                                    <div class="h6 mb-0 text-success">{{ channel.jingles_count }}</div>
                                    <small class="text-muted">Jingles</small>
                                </div>
                                <div class="col-4">
                                    <div class="h6 mb-0 text-info">{{ channel.epg_entries.count }}</div>
                                    <small class="text-muted">EPG</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-footer bg-transparent">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    Updated {{ channel.updated_at|timesince }} ago
                                </small>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'channels:channel_detail' channel.pk %}" 
                                       class="btn btn-outline-primary" data-bs-toggle="tooltip" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    {% if perms.channels.change_channel %}
                                    <a href="{% url 'channels:channel_edit' channel.pk %}" 
                                       class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if is_paginated %}
            <nav aria-label="Channels pagination">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.type %}type={{ request.GET.type }}&{% endif %}{% if request.GET.country %}country={{ request.GET.country }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.active %}active={{ request.GET.active }}&{% endif %}page=1">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.type %}type={{ request.GET.type }}&{% endif %}{% if request.GET.country %}country={{ request.GET.country }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.active %}active={{ request.GET.active }}&{% endif %}page={{ page_obj.previous_page_number }}">
                                <i class="fas fa-angle-left"></i>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.type %}type={{ request.GET.type }}&{% endif %}{% if request.GET.country %}country={{ request.GET.country }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.active %}active={{ request.GET.active }}&{% endif %}page={{ num }}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.type %}type={{ request.GET.type }}&{% endif %}{% if request.GET.country %}country={{ request.GET.country }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.active %}active={{ request.GET.active }}&{% endif %}page={{ page_obj.next_page_number }}">
                                <i class="fas fa-angle-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.type %}type={{ request.GET.type }}&{% endif %}{% if request.GET.country %}country={{ request.GET.country }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.active %}active={{ request.GET.active }}&{% endif %}page={{ page_obj.paginator.num_pages }}">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
            
            <div class="text-center text-muted">
                Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} channels
            </div>
        {% endif %}
    {% else %}
        <div class="text-center py-5">
            <i class="fas fa-broadcast-tower fa-4x text-muted mb-4"></i>
            <h4 class="text-muted">No Channels Found</h4>
            <p class="text-muted">{% if request.GET.search %}No channels match your search criteria.{% else %}No channels have been created yet.{% endif %}</p>
            {% if perms.channels.add_channel %}
                <a href="{% url 'channels:channel_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>Create First Channel
                </a>
            {% endif %}
        </div>
    {% endif %}

    <!-- Search Modal -->
    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">
                        <i class="fas fa-search me-2"></i>Advanced Search
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="get">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="modalSearch" class="form-label">Search Term</label>
                            <input type="text" class="form-control" id="modalSearch" name="search" 
                                   value="{{ request.GET.search }}" placeholder="Enter channel name, description, or slug...">
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="modalType" class="form-label">Channel Type</label>
                                    <select class="form-select" id="modalType" name="type">
                                        <option value="">All Types</option>
                                        <option value="terrestrial" {% if request.GET.type == 'terrestrial' %}selected{% endif %}>Terrestrial</option>
                                        <option value="satellite" {% if request.GET.type == 'satellite' %}selected{% endif %}>Satellite</option>
                                        <option value="iptv" {% if request.GET.type == 'iptv' %}selected{% endif %}>IPTV</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="modalActive" class="form-label">Status</label>
                                    <select class="form-select" id="modalActive" name="active">
                                        <option value="">All Status</option>
                                        <option value="true" {% if request.GET.active == 'true' %}selected{% endif %}>Active</option>
                                        <option value="false" {% if request.GET.active == 'false' %}selected{% endif %}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-1"></i>Search
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 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">
                        <i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirm Deletion
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the channel <strong id="deleteChannelName"></strong>?</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        This action cannot be undone. All associated EPG entries, jingles, and zone configurations will also be deleted.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <a href="#" id="deleteConfirmBtn" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Delete Channel
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_footer_js %}
    <script>
        function confirmDelete(channelName, deleteUrl) {
            document.getElementById('deleteChannelName').textContent = channelName;
            document.getElementById('deleteConfirmBtn').href = deleteUrl;
            var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        // Auto-submit search form on filter change
        document.querySelectorAll('#type, #country, #language, #active').forEach(function(select) {
            select.addEventListener('change', function() {
                this.form.submit();
            });
        });

        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
{% endblock %}