@include(snippets/header)
<link rel="stylesheet" href="/s/css/upload.css">

<div class="upload-container">
    <h2>Upload Content</h2>

    <details class="content-guidelines">
        <summary>Content Guidelines (Click to expand)</summary>
        <div class="guidelines-content">
            <p>We want this place to be fun. Keep it cool, keep it legal.</p>
            <div class="guidelines-grid">
                <div class="guidelines-do">
                    <h5>Do's (Vibes & Hypnosis)</h5>
                    <ul>
                        <li>Cool, relaxing, or weird "vibing" content</li>
                        <li>Classic-style loops (Flash era vibes)</li>
                        <li>High-quality, hypnotic edits (PMVs welcome)</li>
                        <li>Interesting, freaky, or just plain cool stuff</li>
                    </ul>
                </div>
                <div class="guidelines-dont">
                    <h5>Don'ts (The Banhammer)</h5>
                    <ul>
                        <li>Political commentary, preaching, or "pol" bait</li>
                        <li>Gore, extreme violence, or animal cruelty (Instant Ban)</li>
                        <li>Illegal content (CP, Terror, etc.) (Instant Ban)</li>
                        <li>Boring, unedited, or lengthy videos</li>
                    </ul>
                </div>
            </div>
        </div>
    </details>

    @if(session)
    <form id="upload-form" class="upload-form" enctype="multipart/form-data">
        <div class="form-section">
            <label>Video File <span class="required">*</span></label>
            <div class="drop-zone" id="drop-zone">
                <input type="file" id="file-input" name="file" accept="video/mp4,video/webm">
                <div class="drop-zone-prompt">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                        style="opacity: 0.7; margin-bottom: 1rem;">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="17 8 12 3 7 8"></polyline>
                        <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                    <p style="font-size: 1.1rem; font-weight: 500;">Drop your video here</p>
                    <p style="font-size: 0.9rem; opacity: 0.6;">(mp4 or webm)</p>
                </div>
                <!-- Preview Container -->
                <div class="file-preview" id="file-preview" style="display: none;">
                    <!-- Video will be injected here via JS -->
                    <div class="file-meta-row">
                        <div class="file-info">
                            <span class="file-name" id="file-name"></span>
                            <span class="file-size" id="file-size"></span>
                        </div>
                        <button type="button" class="btn-remove" id="remove-file" title="Remove File">✕</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <label>Rating <span class="required">*</span></label>
            <div class="rating-options">
                <label class="rating-option">
                    <input type="radio" name="rating" value="sfw" required>
                    <span class="rating-label sfw">SFW</span>
                </label>
                <label class="rating-option">
                    <input type="radio" name="rating" value="nsfw">
                    <span class="rating-label nsfw">NSFW</span>
                </label>
            </div>
        </div>

        <div class="form-section">
            <label>Tags <span class="required">*</span> <span class="tag-count" id="tag-count">(0/3
                    minimum)</span></label>
            <div class="tag-input-container">
                <div class="tags-list" id="tags-list"></div>
                <input type="text" id="tag-input" placeholder="Type a tag and press Enter" autocomplete="off">
                <div class="tag-suggestions" id="tag-suggestions"></div>
            </div>
            <input type="hidden" name="tags" id="tags-hidden">
        </div>

        <div class="form-actions">
            <button type="submit" id="submit-btn" class="btn-upload" disabled>
                <span class="btn-text">Select a file</span>
                <span class="btn-loading" style="display: none;">Uploading...</span>
            </button>
        </div>

        <div class="upload-progress" id="upload-progress" style="display: none;">
            <div class="progress-bar">
                <div class="progress-fill" id="progress-fill"></div>
            </div>
            <span class="progress-text" id="progress-text">0%</span>
        </div>

        <div class="upload-status" id="upload-status"></div>
    </form>
    @else
    <div class="login-required">
        <h3>Authentication Required</h3>
        <p>You must be logged in to upload content to w0bm.</p>
        <a href="/login" class="btn-login">Login</a>
    </div>
    @endif
</div>

<script src="/s/js/upload.js"></script>
@include(snippets/footer)