<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browse {if $type_display eq "video"}Videos{elseif $type_display eq "live"}Live Streams{elseif $type_display eq "image"}Images{elseif $type_display eq "audio"}Music{elseif $type_display eq "document"}Documents{elseif $type_display eq "blog"}Blogs{elseif $type_display eq "short"}Shorts{else}Content{/if} - EasyStream</title>
    <link rel="stylesheet" href="{$main_url}/f_templates/tpl_frontend/css/browse.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, .nav a.active { background: #007bff; color: white; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem 20px; }
        .browse-header { margin-bottom: 2rem; }
        .browse-title { font-size: 2rem; margin: 0 0 0.5rem 0; color: #212529; }
        .browse-subtitle { color: #6c757d; margin: 0; }
        .filters { background: white; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .filter-tabs { display: flex; gap: 1rem; flex-wrap: wrap; }
        .filter-tab { padding: 0.5rem 1rem; border: 1px solid #dee2e6; border-radius: 20px; background: white; color: #495057; text-decoration: none; transition: all 0.2s; }
        .filter-tab:hover, .filter-tab.active { background: #007bff; color: white; border-color: #007bff; }
        .content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
        .video-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s; }
        .video-card:hover { transform: translateY(-2px); }
        .video-thumbnail { width: 100%; height: 160px; background: #f8f9fa; position: relative; overflow: hidden; }
        .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
        .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; }
        .video-info { padding: 1rem; }
        .video-title { font-weight: 600; margin: 0 0 0.5rem 0; color: #212529; line-height: 1.3; }
        .video-title a { color: inherit; text-decoration: none; }
        .video-title a:hover { color: #007bff; }
        .video-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
        .channel-avatar { width: 24px; height: 24px; border-radius: 50%; }
        .channel-name { color: #6c757d; font-size: 0.875rem; }
        .video-stats { color: #6c757d; font-size: 0.875rem; }
        .loading { text-align: center; padding: 3rem; color: #6c757d; }
        .no-content { text-align: center; padding: 3rem; }
        .no-content h3 { color: #495057; margin: 0 0 1rem 0; }
        .no-content p { color: #6c757d; margin: 0; }
        .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
        .pagination a, .pagination span { padding: 0.5rem 1rem; border: 1px solid #dee2e6; border-radius: 4px; color: #495057; text-decoration: none; }
        .pagination a:hover { background: #f8f9fa; }
        .pagination .current { background: #007bff; color: white; border-color: #007bff; }
    </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" {if $type_display eq "video"}class="active"{/if}>Videos</a>
                <a href="{$main_url}/broadcasts" {if $type_display eq "live"}class="active"{/if}>Live</a>
                <a href="{$main_url}/shorts" {if $type_display eq "short"}class="active"{/if}>Shorts</a>
                <a href="{$main_url}/pictures" {if $type_display eq "image"}class="active"{/if}>Images</a>
                <a href="{$main_url}/music" {if $type_display eq "audio"}class="active"{/if}>Music</a>
                <a href="{$main_url}/documents" {if $type_display eq "document"}class="active"{/if}>Documents</a>
                <a href="{$main_url}/blogs" {if $type_display eq "blog"}class="active"{/if}>Blogs</a>
                <a href="{$main_url}/upload">Upload</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="container">
        <div class="browse-header">
            <h1 class="browse-title">
                {if $type_display eq "video"}📹 Videos
                {elseif $type_display eq "live"}📺 Live Streams  
                {elseif $type_display eq "image"}🖼️ Images
                {elseif $type_display eq "audio"}🎵 Music
                {elseif $type_display eq "document"}📄 Documents
                {elseif $type_display eq "blog"}📝 Blogs
                {elseif $type_display eq "short"}🎬 Shorts
                {else}📂 Browse Content
                {/if}
            </h1>
            <p class="browse-subtitle">
                {if $type_display eq "video"}Discover amazing videos from creators around the world
                {elseif $type_display eq "live"}Watch live streams and interact with creators
                {elseif $type_display eq "image"}Browse beautiful images and photography
                {elseif $type_display eq "audio"}Listen to music, podcasts, and audio content
                {elseif $type_display eq "document"}Access documents, PDFs, and written content
                {elseif $type_display eq "blog"}Read blogs and articles from our community
                {elseif $type_display eq "short"}Quick, engaging short-form content
                {else}Explore all types of content on EasyStream
                {/if}
            </p>
        </div>

        <div class="filters">
            <div class="filter-tabs">
                <a href="?sort=" class="filter-tab {if !$smarty.get.sort}active{/if}">Latest</a>
                <a href="?sort=featured" class="filter-tab {if $smarty.get.sort eq 'featured'}active{/if}">Featured</a>
                <a href="?sort=views" class="filter-tab {if $smarty.get.sort eq 'views'}active{/if}">Most Viewed</a>
                {if $file_rating eq "1"}
                <a href="?sort=likes" class="filter-tab {if $smarty.get.sort eq 'likes'}active{/if}">Most Liked</a>
                {/if}
                {if $file_comments eq "1"}
                <a href="?sort=comments" class="filter-tab {if $smarty.get.sort eq 'comments'}active{/if}">Most Commented</a>
                {/if}
            </div>
        </div>

        <div id="content-area">
            {generate_html type="browse_layout" bullet_id="ct-bullet1" entry_id="ct-entry-details1" section="browse" bb="0"}
        </div>
    </div>

    <script>
        // Simple AJAX loading for pagination and filters
        document.addEventListener('DOMContentLoaded', function() {
            // Add loading states and smooth transitions
            const contentArea = document.getElementById('content-area');
            
            // Lazy loading for images
            const images = document.querySelectorAll('img[data-src]');
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.removeAttribute('data-src');
                        observer.unobserve(img);
                    }
                });
            });
            
            images.forEach(img => imageObserver.observe(img));
        });
    </script>
</body>
</html>

