{% extends "base.html" %}
{% block title %}Videos — {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><i class="bi bi-play-btn"></i> Published Videos</h2>
    <a href="{{ url_for('post.new_post') }}" class="btn text-light"
       style="background: linear-gradient(90deg, var(--tt-pink), var(--tt-cyan));">
        <i class="bi bi-plus-square"></i> New Post
    </a>
</div>

{% if videos %}
<div class="row g-3">
    {% for v in videos %}
    <div class="col-12">
        <div class="card bg-dark border-secondary post-card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="me-3">
                        <p class="mb-1">{{ v.title or v.video_description or '(no caption)' }}</p>
                        <span class="text-secondary small">
                            <i class="bi bi-calendar3"></i> {{ v.create_time|tiktok_date }}
                            · <i class="bi bi-film"></i> {{ (v.duration or 0) }}s
                        </span>
                    </div>
                    <div class="text-end">
                        <span class="text-secondary small">
                            <i class="bi bi-eye"></i> {{ '{:,}'.format(v.view_count or 0) }}
                            <i class="bi bi-heart ms-2"></i> {{ '{:,}'.format(v.like_count or 0) }}
                            <i class="bi bi-chat ms-2"></i> {{ '{:,}'.format(v.comment_count or 0) }}
                            <i class="bi bi-share ms-2"></i> {{ '{:,}'.format(v.share_count or 0) }}
                        </span>
                        <div class="mt-2">
                            <a href="https://www.tiktok.com/@me/video/{{ v.id }}" target="_blank" rel="noopener"
                               class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-box-arrow-up-right"></i> Open
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if has_more %}
<div class="text-center mt-4">
    <a href="{{ url_for('post.posts', cursor=cursor) }}" class="btn btn-outline-secondary">
        Older videos <i class="bi bi-arrow-down"></i>
    </a>
</div>
{% endif %}
{% else %}
<div class="text-center py-5">
    <i class="bi bi-play-btn text-secondary" style="font-size: 3rem;"></i>
    <h4 class="text-secondary mt-3">No published videos</h4>
    <a href="{{ url_for('post.new_post') }}" class="btn text-light mt-2"
       style="background: linear-gradient(90deg, var(--tt-pink), var(--tt-cyan));">Create the first post</a>
</div>
{% endif %}
{% endblock %}