{% extends 'base.html' %}

{% block title %}Shorts | LIVE VERSE{% endblock %}

{% block extra_css %}
<style>
    .shorts-container {
        max-width: 450px;
        margin: 0 auto;
        height: calc(100vh - 100px);
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
    }
    .shorts-container::-webkit-scrollbar { display: none; }
    
    .short-viewer-card {
        height: 100%;
        scroll-snap-align: start;
        position: relative;
        background: #000;
        border-radius: 24px;
        overflow: hidden;
        margin-bottom: 20px;
        border: 1px solid var(--lv-border);
    }
    
    .short-video-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(45deg, #111, #222);
    }
    
    .short-controls {
        position: absolute;
        right: 15px;
        bottom: 100px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        z-index: 10;
    }
    
    .control-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .control-btn:hover {
        background: var(--lv-accent);
        transform: scale(1.1);
    }
    
    .short-info-overlay {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 80px;
        z-index: 10;
    }
</style>
{% endblock %}

{% block content %}
<div class="shorts-container">
    {% for short in shorts %}
    <div class="short-viewer-card">
        <div class="short-video-placeholder">
            {% if short.thumbnail %}
            <img src="{{ short.thumbnail.url }}" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;">
            {% endif %}
            <div class="position-absolute">
                <i class="fas fa-play fa-4x text-white opacity-25"></i>
            </div>
        </div>
        
        <div class="short-controls">
            <div class="control-btn"><i class="fas fa-heart"></i></div>
            <div class="small fw-bold">12K</div>
            <div class="control-btn"><i class="fas fa-comment-dots"></i></div>
            <div class="small fw-bold">842</div>
            <div class="control-btn"><i class="fas fa-share"></i></div>
            <div class="control-btn"><i class="fas fa-ellipsis-v"></i></div>
        </div>
        
        <div class="short-info-overlay">
            <div class="d-flex align-items-center gap-2 mb-3">
                <div class="rounded-circle bg-danger" style="width: 36px; height: 36px;"></div>
                <div class="fw-bold">@{{ short.channel.handle }}</div>
                <button class="btn btn-outline-light btn-sm rounded-pill px-3">Subscribe</button>
            </div>
            <h5 class="fw-semibold">{{ short.title }}</h5>
            <p class="small text-muted mb-0">Original Sound - Space Melodies</p>
        </div>
    </div>
    {% empty %}
    <div class="text-center py-5">
        <i class="fas fa-bolt fa-4x mb-3 text-muted"></i>
        <h3>No Shorts Orbiting Yet</h3>
        <p class="text-muted">Start uploading 9:16 cosmic content!</p>
    </div>
    {% endfor %}
</div>
{% endblock %}
