{% extends 'base.html' %}

{% block title %}Live Studio | LIVE VERSE{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="section-header">
        <h2 class="section-title">Creator Studio</h2>
        <div class="d-flex gap-2">
            <button class="action-btn"><i class="fas fa-signal"></i> Go Live</button>
            <a href="{% url 'upload_video' %}" class="action-btn text-decoration-none"><i class="fas fa-plus"></i> New Upload</a>
        </div>
    </div>

    <div class="row g-4">
        <!-- Analytics Overview -->
        <div class="col-md-4">
            <div class="card h-100" style="background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: 20px;">
                <div class="card-body p-4 text-center">
                    <div class="text-muted small text-uppercase mb-2">Total Broadcast Reach</div>
                    <div class="display-6 fw-bold text-danger mb-3">1.2M</div>
                    <div class="d-flex justify-content-center gap-4 border-top border-secondary pt-3 mt-3">
                        <div>
                            <div class="small text-muted">Subscribers</div>
                            <div class="fw-bold">45.2K</div>
                        </div>
                        <div>
                            <div class="small text-muted">Avg. Views</div>
                            <div class="fw-bold">8.4K</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Content -->
        <div class="col-md-8">
            <div class="card" style="background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: 20px;">
                <div class="card-header bg-transparent border-secondary p-4">
                    <h5 class="mb-0">Recent Transmissions</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0 align-middle">
                            <thead class="text-muted small">
                                <tr>
                                    <th class="ps-4">Content</th>
                                    <th>Status</th>
                                    <th>Views</th>
                                    <th>Comments</th>
                                    <th class="pe-4 text-end">Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for video in videos %}
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="{{ video.thumbnail.url }}" style="width: 80px; height: 45px; border-radius: 8px; object-fit: cover;">
                                            <div class="fw-semibold">{{ video.title }}</div>
                                        </div>
                                    </td>
                                    <td><span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3">Public</span></td>
                                    <td>{{ video.views }}</td>
                                    <td>42</td>
                                    <td class="pe-4 text-end text-muted">{{ video.created_at|date:"M d, Y" }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">No transmissions found in your vault.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
