{% extends "base.html" %}
{% block title %}Clips{% endblock %}
{% block head %}
<style>
    .clip-thumb {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
</style>
{% endblock %}
{% block content %}
<h1 class="mb-3">Clips</h1>
{% if clips %}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    {% for clip in clips %}
    <div class="col">
        <a href="{{ url_for('/view/' ~ clip.id) }}" class="text-decoration-none">
            <div class="card h-100">
                <img src="{{ url_for('/view/' ~ clip.id ~ '/thumbnail') }}" class="card-img-top clip-thumb" alt="{{ clip.title or 'Clip #' ~ clip.id }}">
                <div class="card-body">
                    <h5 class="card-title">{{ clip.title or 'Clip #' ~ clip.id }}</h5>
                    <p class="card-text text-body-secondary">{{ format_date(clip.created_at) }}</p>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>
{% else %}
<p>No clips have been created yet.</p>
{% endif %}
{% endblock %}