{% extends "base.html" %}

{% block title %}Video Search{% endblock %}

{% block content %}
<div class="min-h-full">
    {% include "nav.html" %}

    <div class="py-10">
        <header>
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 px-4 flex items-center justify-between flex-warp sm:flex-nowrap ">
                <h1 class="text-3xl font-bold leading-6 text-gray-900">Videos</h1>
            </div>
        </header>
        <main>
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="px-4 py-8 sm:px-0">
                    <ul role="list"
                        class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
                        {% for video in videos %}
                        <li class="relative">
                            <div class="group block w-full aspect-w-10 aspect-h-7 rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-gray-100 focus-within:ring-indigo-500 overflow-hidden">
                                <img src="{{video.thumbnail_key|content_url_opt}}" alt="{{video.title}}" class="object-cover pointer-events-none group-hover:opacity-75">
                                <a href="/video/{{video.id}}" class="absolute inset-0 focus:outline-none">
                                    <span class="sr-only">View details for {{video.title}}</span>
                                </a>
                            </div>
                            <p class="mt-2 block text-sm font-medium text-gray-900 truncate pointer-events-none">{{video.title}}</p>
                            <p class="block text-sm font-medium text-gray-500 pointer-events-none">Audio: {{ video.lang }}</p>
                            <p class="block text-sm font-medium text-gray-500 pointer-events-none">Subtitle: {{ video.subtitles|join(", ") }}</p>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <!-- /End replace -->
            </div>
        </main>
    </div>
</div>
{% endblock %}