<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload {if $smarty.get.t eq "video"}Videos{elseif $smarty.get.t eq "short"}Shorts{elseif $smarty.get.t eq "image"}Images{elseif $smarty.get.t eq "audio"}Audio{elseif $smarty.get.t eq "document"}Documents{else}Content{/if} - EasyStream</title>
    <link rel="stylesheet" href="{$main_url}/f_templates/tpl_frontend/css/upload.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; }
        .upload-header { text-align: center; margin-bottom: 3rem; }
        .upload-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: #212529; }
        .upload-subtitle { color: #6c757d; margin: 0 0 2rem 0; font-size: 1.1rem; }
        .upload-types { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
        .upload-type { padding: 0.75rem 1.5rem; border: 2px solid #dee2e6; border-radius: 25px; background: white; color: #495057; text-decoration: none; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; }
        .upload-type:hover, .upload-type.active { background: #007bff; color: white; border-color: #007bff; }
        .upload-area { background: white; border-radius: 12px; padding: 3rem; box-shadow: 0 4px 16px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .verification-notice { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 2rem; margin-bottom: 2rem; text-align: center; }
        .verification-form { max-width: 400px; margin: 0 auto; }
        .form-group { margin-bottom: 1.5rem; }
        .form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #495057; }
        .form-input { width: 100%; padding: 0.75rem; border: 1px solid #dee2e6; border-radius: 4px; font-size: 1rem; }
        .form-button { background: #007bff; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: all 0.2s; }
        .form-button:hover { background: #0056b3; }
        .captcha-group { display: flex; gap: 1rem; align-items: center; }
        .error-message, .notice-message { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; cursor: pointer; }
        .error-message { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .notice-message { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
        .upload-stats { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .stats-title { margin: 0 0 1rem 0; color: #495057; display: flex; align-items: center; gap: 0.5rem; }
        .info-message { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
    </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}/broadcasts">Live</a>
                <a href="{$main_url}/upload" class="active">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">
        {if $usr_verified eq "0"}
            <div class="upload-header">
                <h1 class="upload-title">📧 Email Verification Required</h1>
                <p class="upload-subtitle">Please verify your email address to start uploading content</p>
            </div>
            
            <div class="verification-notice">
                <h3 style="margin: 0 0 1rem 0; color: #856404;">Verification needed for: {$usr_mail}</h3>
                <p style="margin: 0 0 1.5rem 0; color: #856404;">{lang_entry key="upload.err.mail.ver1"}</p>
                <p style="margin: 0; color: #856404;">{lang_entry key="upload.err.mail.ver2"}</p>
            </div>

            <div id="verify-response"></div>

            <div class="verification-form">
                <form id="verify-form" name="verify_form" method="post" action="">
                    <div class="form-group">
                        <label class="form-label" for="verification-captcha">{lang_entry key="upload.text.ver.code"}</label>
                        <div class="captcha-group">
                            <input type="text" id="verification-captcha" name="verification_captcha" class="form-input" style="flex: 1;" />
                            <img id="c-image" src="{$main_url}/{href_entry key="captcha"}?t={$c_rand}" alt="Captcha" style="border-radius: 4px;" />
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" class="form-button resend-verification" name="send_verification" style="width: 100%;">
                            {lang_entry key="upload.text.ver.send"}
                        </button>
                    </div>
                    <input type="hidden" name="verify_email" value="{$usr_mail}" />
                </form>
            </div>

            <script type="text/javascript">
                $(document).ready(function(){ldelim}
                    $(".resend-verification").click(function(){ldelim}
                        $(".container").css('opacity', '0.6');
                        $.post("{$main_url}/{href_entry key="upload"}{if $smarty.get.t eq ""}?do=reverify{else}?t={$smarty.get.t|sanitize}&do=reverify{/if}", $("#verify-form").serialize(), function(data){ldelim}
                            $("#verify-response").html(data);
                            $(".container").css('opacity', '1');
                        {rdelim});
                    {rdelim});
                {rdelim});
            </script>
        {else}
            {if $perm_err eq "" and $smarty.session.USER_KEY ne ""}
                <div class="upload-header">
                    <h1 class="upload-title">
                        {if $smarty.get.t eq "video"}📹 Upload Videos
                        {elseif $smarty.get.t eq "short"}🎬 Upload Shorts
                        {elseif $smarty.get.t eq "image"}🖼️ Upload Images
                        {elseif $smarty.get.t eq "audio"}🎵 Upload Audio
                        {elseif $smarty.get.t eq "document"}📄 Upload Documents
                        {else}📤 Upload Content
                        {/if}
                    </h1>
                    <p class="upload-subtitle">
                        {if $smarty.get.t eq "video"}Share your videos with the world
                        {elseif $smarty.get.t eq "short"}Create engaging short-form content
                        {elseif $smarty.get.t eq "image"}Share your photos and artwork
                        {elseif $smarty.get.t eq "audio"}Upload music, podcasts, and audio content
                        {elseif $smarty.get.t eq "document"}Share documents and written content
                        {else}Choose what type of content you want to upload
                        {/if}
                    </p>
                </div>

                <div class="upload-types">
                    {if $video_module eq 1 and $video_uploads eq 1}
                        <a href="{$main_url}/{href_entry key="upload"}?t=video" class="upload-type {if $smarty.get.t eq "video"}active{/if}">
                            📹 <span>Videos</span>
                        </a>
                    {/if}
                    {if $video_module eq 1 and $video_uploads eq 1}
                        <a href="{$main_url}/{href_entry key="upload"}?t=short" class="upload-type {if $smarty.get.t eq "short"}active{/if}">
                            🎬 <span>Shorts</span>
                        </a>
                    {/if}
                    {if $image_module eq 1 and $image_uploads eq 1}
                        <a href="{$main_url}/{href_entry key="upload"}?t=image" class="upload-type {if $smarty.get.t eq "image"}active{/if}">
                            🖼️ <span>Images</span>
                        </a>
                    {/if}
                    {if $audio_module eq 1 and $audio_uploads eq 1}
                        <a href="{$main_url}/{href_entry key="upload"}?t=audio" class="upload-type {if $smarty.get.t eq "audio"}active{/if}">
                            🎵 <span>Audio</span>
                        </a>
                    {/if}
                    {if $document_module eq 1 and $document_uploads eq 1}
                        <a href="{$main_url}/{href_entry key="upload"}?t=document" class="upload-type {if $smarty.get.t eq "document"}active{/if}">
                            📄 <span>Documents</span>
                        </a>
                    {/if}
                    {if $import_yt eq 1 or $import_dm eq 1 or $import_vi eq 1}
                        <a href="{$main_url}/{href_entry key="import"}?t=video" class="upload-type">
                            🔗 <span>Import</span>
                        </a>
                    {/if}
                </div>

                {if $smarty.get.r ne ""}{insert name="uploadResponse"}{/if}

                {if $error_message ne ""}
                    <div class="error-message" id="error-message" onclick="$(this).fadeOut();">
                        <p>{$error_message}</p>
                    </div>
                {/if}

                {if $smarty.get.t eq "short"}
                    <div class="info-message">
                        <p>{lang_entry key="upload.text.info.shorts"}</p>
                    </div>
                {/if}

                <div class="upload-area">
                    <div id="cb-response-wrap" style="display: none;">
                        <div id="cb-response">
                            <div class="notice-message" id="notice-message" onclick="$(this).parent().parent().fadeOut();">
                                <p>{lang_entry key="upload.text.public"}</p>
                            </div>
                        </div>
                    </div>

                    <form id="upload-form" method="post" action="{href_entry key="be_submit"}?t={$smarty.get.t|sanitize}{if $smarty.get.r ne ""}&r={$smarty.get.r|sanitize}{/if}">
                        <div id="uploader" class="frontend">
                            <p style="text-align: center; color: #6c757d; padding: 2rem;">Loading Upload Panel...</p>
                        </div>
                        
                        <div id="options-wrapper" style="display: none;">
                            <div class="upload-options">
                                <span>{$file_category}</span>
                                <span id="upload-category">{$upload_category}</span>
                            </div>
                        </div>

                        <input type="hidden" name="UFSUID" value="{$smarty.session.USER_KEY}" />
                        <input type="hidden" name="UFUID" value="{$smarty.session.USER_ID}" />
                        <input type="hidden" name="UFNAME" id="UFNAME" value="" />
                        <input type="hidden" name="UFSIZE" id="UFSIZE" value="" />
                    </form>
                </div>

                {if $paid_memberships eq "1"}
                    <div class="upload-stats" id="fsUploadStats" style="display: none;">
                        <h3 class="stats-title">
                            👤 {lang_entry key="upload.text.mem.limit"}
                        </h3>
                        <div id="the-stats">
                            {$the_stats}
                        </div>
                        <div style="display: none;">
                            <input type="hidden" id="total-uploads" name="total_uploads" value="0" />
                            <input type="hidden" id="type-uploads" name="type_uploads" value="{$smarty.get.t[0]|sanitize}" />
                            <span id="replace-uploads">{lang_entry key="upload.err.msg.9.1"}</span>
                        </div>
                    </div>
                {/if}

            {elseif $error_message ne ""}
                <div class="upload-header">
                    <h1 class="upload-title">⚠️ Access Restricted</h1>
                </div>
                <div class="error-message">
                    <p>{$error_message}</p>
                </div>
            {/if}
        {/if}
    </div>

    <script>
        // Enhanced upload UI interactions
        document.addEventListener('DOMContentLoaded', function() {
            // Smooth transitions for upload types
            const uploadTypes = document.querySelectorAll('.upload-type');
            uploadTypes.forEach(type => {
                type.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-2px)';
                });
                type.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });

            // Auto-hide messages after 5 seconds
            setTimeout(() => {
                const messages = document.querySelectorAll('.error-message, .notice-message');
                messages.forEach(msg => {
                    if (msg.style.display !== 'none') {
                        msg.style.opacity = '0.7';
                    }
                });
            }, 5000);
        });
    </script>
</body>
</html>
