{% extends 'base.html' %}
{% block title %}Videos{% endblock %}
{% block content %}
<header class="board-head"><div><p class="eyebrow">STATION MEDIA</p><h1>Videos</h1></div>{% if g.user and g.station.videos_mode == 'community' %}<a class="button" href="{{ url_for('videos.upload') }}">UPLOAD VIDEO +</a>{% endif %}</header>
<form method="get" action="{{ url_for('videos.index') }}" class="video-search"><label>Search videos by title<input type="search" name="q" value="{{ query }}" maxlength="100"></label><button>SEARCH</button>{% if query %}<a href="{{ url_for('videos.index') }}">CLEAR</a>{% endif %}</form>
<section class="video-grid" aria-label="Videos">
{% for video in videos %}
<article class="terminal-card video-card"><a href="{{ url_for('videos.view',video_id=video.id) }}" aria-label="Watch {{ video.title }}">{% if video.id in thumbnail_ids %}<img src="{{ url_for('videos.thumbnail',video_id=video.id) }}" alt="" loading="lazy">{% else %}<video preload="metadata" muted playsinline src="{{ url_for('videos.media',video_id=video.id) }}#t=0.1"></video>{% endif %}<h2>{{ video.title }}</h2></a><small>{% if g.station.videos_mode == 'community' %}{{ g.station.name if video.station_post else video.username }} / {% endif %}<time datetime="{{ video.created_at|replace(' ', 'T') }}Z" data-local-time>{{ video.created_at }} UTC</time></small></article>
{% else %}<div class="empty-state"><h2>No videos found.</h2></div>{% endfor %}
</section>
{% if pages > 1 %}<nav class="subnav" aria-label="Video pages">{% if page > 1 %}<a href="{{ url_for('videos.index',q=query,page=page-1) }}">PREVIOUS</a>{% endif %}<span>PAGE {{ page }} OF {{ pages }}</span>{% if page < pages %}<a href="{{ url_for('videos.index',q=query,page=page+1) }}">NEXT</a>{% endif %}</nav>{% endif %}
{% endblock %}