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

{% block title %}{{ channel_user.username }}'s Channel - YouTube Clone{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Channel Header -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-2 text-center">
                    {% if channel_profile.profile_picture %}
                        <img src="{{ channel_profile.profile_picture.url }}" 
                             class="rounded-circle" width="100" height="100" alt="{{ channel_user.username }}">
                    {% else %}
                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                             style="width: 100px; height: 100px;">
                            <i class="fas fa-user fa-2x text-white"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-8">
                    <h2>{{ channel_user.username }}</h2>
                    <p class="text-muted">{{ channel_profile.subscriber_count }} subscribers</p>
                    {% if channel_profile.bio %}
                        <p>{{ channel_profile.bio }}</p>
                    {% endif %}
                </div>
                <div class="col-md-2 text-center">
                    {% if user.is_authenticated and user != channel_user %}
                        <button class="btn subscribe-btn" 
                                data-user-id="{{ channel_user.id }}"
                                {% if is_subscribed %}class="btn-success"{% endif %}>
                            {% if is_subscribed %}
                                <i class="fas fa-check"></i> Subscribed
                            {% else %}
                                <i class="fas fa-plus"></i> Subscribe
                            {% endif %}
                        </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Videos Section -->
    <div class="card">
        <div class="card-header">
            <h5><i class="fas fa-video"></i> Videos ({{ videos.count }})</h5>
        </div>
        <div class="card-body">
            {% if videos %}
                <div class="row">
                    {% for video in videos %}
                        <div class="col-md-4 col-lg-3 mb-4">
                            <div class="card video-card">
                                <a href="{% url 'videos:video_detail' video.id %}">
                                    {% if video.thumbnail %}
                                        <img src="{{ video.thumbnail.url }}" class="card-img-top" alt="{{ video.title }}">
                                    {% else %}
                                        <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="height: 180px;">
                                            <i class="fas fa-play-circle fa-3x text-white"></i>
                                        </div>
                                    {% endif %}
                                </a>
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <a href="{% url 'videos:video_detail' video.id %}" class="text-decoration-none text-dark">
                                            {{ video.title|truncatechars:50 }}
                                        </a>
                                    </h6>
                                    <p class="card-text text-muted small">
                                        {{ video.views }} views • {{ video.upload_date|timesince }} ago
                                    </p>
                                    <p class="card-text text-muted small">
                                        {{ video.likes }} likes • {{ video.comments.count }} comments
                                    </p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-video fa-3x mb-3 text-muted"></i>
                    <h4>No videos yet</h4>
                    <p class="text-muted">This channel hasn't uploaded any videos yet.</p>
                    {% if user == channel_user %}
                        <a href="{% url 'videos:upload' %}" class="btn btn-primary">
                            <i class="fas fa-upload"></i> Upload Your First Video
                        </a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Subscribe button functionality
    const subscribeBtn = document.querySelector('.subscribe-btn');
    if (subscribeBtn) {
        subscribeBtn.addEventListener('click', function() {
            const userId = this.dataset.userId;
            
            fetch(`/accounts/subscribe/${userId}/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.subscribed) {
                    this.innerHTML = '<i class="fas fa-check"></i> Subscribed';
                    this.classList.remove('btn-primary');
                    this.classList.add('btn-success');
                } else {
                    this.innerHTML = '<i class="fas fa-plus"></i> Subscribe';
                    this.classList.remove('btn-success');
                    this.classList.add('btn-primary');
                }
            });
        });
    }

    // Helper function to get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
});
</script>
{% endblock %}