<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{if $ch_title}{$ch_title}{elseif $usr_dname}{$usr_dname}{else}{$usr_user}{/if} - EasyStream</title>
    <link rel="stylesheet" href="{$main_url}/f_templates/tpl_frontend/css/channel.css">
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; background: #f8f9fa; }
        .header { background: #fff; border-bottom: 1px solid #e1e5e9; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
        .logo { font-size: 1.5rem; font-weight: bold; color: #007bff; text-decoration: none; }
        .nav { display: flex; gap: 2rem; }
        .nav a { color: #495057; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: all 0.2s; }
        .nav a:hover { background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .channel-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 0; margin-bottom: 2rem; }
        .channel-info { display: flex; align-items: center; gap: 2rem; }
        .channel-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; object-fit: cover; }
        .channel-details h1 { margin: 0 0 0.5rem 0; font-size: 2rem; }
        .channel-details p { margin: 0 0 1rem 0; opacity: 0.9; }
        .channel-stats { display: flex; gap: 2rem; margin-bottom: 1rem; }
        .stat { text-align: center; }
        .stat-number { font-size: 1.5rem; font-weight: bold; }
        .stat-label { font-size: 0.875rem; opacity: 0.8; }
        .subscribe-btn { background: #cc0000; color: white; border: none; padding: 0.75rem 2rem; border-radius: 25px; cursor: pointer; font-weight: 500; }
        .subscribe-btn:hover { background: #aa0000; }
        .channel-nav { background: white; border-radius: 8px; padding: 1rem; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .nav-tabs { display: flex; gap: 2rem; }
        .nav-tab { padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; color: #495057; transition: all 0.2s; }
        .nav-tab:hover, .nav-tab.active { background: #007bff; color: white; }
        .channel-content { background: white; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <a href="{$main_url}" class="logo">🎬 EasyStream</a>
            <nav class="nav">
                <a href="{$main_url}">Home</a>
                <a href="{$main_url}/videos">Videos</a>
                <a href="{$main_url}/upload">Upload</a>
                <a href="{$main_url}/search">Search</a>
                {if $smarty.session.USER_ID}
                    <a href="{$main_url}/account">Account</a>
                {else}
                    <a href="{$main_url}/signin">Sign In</a>
                {/if}
            </nav>
        </div>
    </header>

    <div class="channel-header">
        <div class="container">
            <div class="channel-info">
                <img src="{if $usr_photo}{$usr_photo}{else}{$main_url}/f_templates/tpl_frontend/img/default-avatar.png{/if}" 
                     alt="{if $ch_title}{$ch_title}{else}{$usr_user}{/if}" class="channel-avatar">
                
                <div class="channel-details">
                    <h1>{if $ch_title}{$ch_title}{elseif $usr_dname}{$usr_dname}{else}{$usr_user}{/if}</h1>
                    <p>@{$usr_user}</p>
                    
                    <div class="channel-stats">
                        <div class="stat">
                            <div class="stat-number">{if $usr_subscribers}{$usr_subscribers|number_format}{else}0{/if}</div>
                            <div class="stat-label">Subscribers</div>
                        </div>
                        <div class="stat">
                            <div class="stat-number">{if $total_videos}{$total_videos|number_format}{else}0{/if}</div>
                            <div class="stat-label">Videos</div>
                        </div>
                        <div class="stat">
                            <div class="stat-number">{if $total_views}{$total_views|number_format}{else}0{/if}</div>
                            <div class="stat-label">Views</div>
                        </div>
                    </div>
                    
                    {if $smarty.session.USER_ID and $smarty.session.USER_ID neq $usr_id}
                    <button class="subscribe-btn" data-user-id="{$usr_id}">
                        {if $user_issub}Subscribed{else}Subscribe{/if}
                    </button>
                    {/if}
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="channel-nav">
            <div class="nav-tabs">
                <a href="?tab=home" class="nav-tab {if !$smarty.get.tab or $smarty.get.tab eq 'home'}active{/if}">
                    🏠 Home
                </a>
                {if $video_module}
                <a href="?tab=videos" class="nav-tab {if $smarty.get.tab eq 'videos'}active{/if}">
                    📹 Videos
                </a>
                {/if}
                {if $short_module}
                <a href="?tab=shorts" class="nav-tab {if $smarty.get.tab eq 'shorts'}active{/if}">
                    🎬 Shorts
                </a>
                {/if}
                {if $live_module}
                <a href="?tab=live" class="nav-tab {if $smarty.get.tab eq 'live'}active{/if}">
                    📺 Live
                </a>
                {/if}
                {if $image_module}
                <a href="?tab=images" class="nav-tab {if $smarty.get.tab eq 'images'}active{/if}">
                    🖼️ Images
                </a>
                {/if}
                {if $audio_module}
                <a href="?tab=audio" class="nav-tab {if $smarty.get.tab eq 'audio'}active{/if}">
                    🎵 Audio
                </a>
                {/if}
                <a href="?tab=about" class="nav-tab {if $smarty.get.tab eq 'about'}active{/if}">
                    ℹ️ About
                </a>
            </div>
        </div>

        <div class="channel-content">
            {generate_html type="channel_layout" bullet_id="ct-bullet1" entry_id="ct-entry-details1" section="files" bb="1"}
        </div>
    </div>

    <script type="text/javascript">
        var current_url  = '{$main_url}/';
        var menu_section = '{href_entry key="channel"}';
        var fe_mask      = 'on';

        // Enhanced channel interactions
        document.addEventListener('DOMContentLoaded', function() {
            // Subscribe functionality
            const subscribeBtn = document.querySelector('.subscribe-btn');
            if (subscribeBtn) {
                subscribeBtn.addEventListener('click', function() {
                    const userId = this.dataset.userId;
                    // Integration with existing EasyStream subscription system
                    console.log('Subscribe to user:', userId);
                });
            }

            // Tab interactions
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-1px)';
                });
                tab.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>

    {insert name="swiperJS" for="tnav"}
    {if $video_module}{insert name="swiperJS" for="video"}{/if}
    {if $short_module}{insert name="swiperJS" for="short"}{/if}
    {if $live_module}{insert name="swiperJS" for="live"}{/if}
    {if $image_module}{insert name="swiperJS" for="image"}{/if}
    {if $audio_module}{insert name="swiperJS" for="audio"}{/if}
    {if $document_module}{insert name="swiperJS" for="doc"}{/if}
    {if $blog_module}{insert name="swiperJS" for="blog"}{/if}
</body>
</html>
