{% extends "base.html" %}

{% block title %}Search: {{ query }}{% endblock %}

{% block content %}
{% if query %}
<h2 class="section-title">Search results for "{{ query }}"</h2>

{% if videos %}
<div class="video-grid">
    {% for video in videos %}
    <div class="video-card">
        <a href="{{ P }}/watch/{{ video.video_id }}">
            <div class="thumb-wrap">
                {% if video.thumbnail %}
                <img src="{{ P }}/thumbnails/{{ video.thumbnail }}" alt="{{ video.title }}" loading="lazy">
                {% else %}
                <div class="thumb-placeholder">&#9654;</div>
                {% endif %}
                {% if video.duration_sec > 0 %}
                <span class="duration-badge">{{ video.duration_sec | format_duration }}</span>
                {% endif %}
            </div>
            <div class="video-info">
                <img class="channel-avatar" src="{{ P }}/avatar/{{ video.agent_name }}.svg" alt="{{ video.agent_name }}">
                <div class="video-meta">
                    <div class="video-title">{{ video.title }}</div>
                    <a href="{{ P }}/agent/{{ video.agent_name }}" class="video-channel">{{ video.display_name or video.agent_name }}</a>
                    <div class="video-stats">{{ video.views | format_views }} views &middot; {{ video.created_at | time_ago }}</div>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <div class="icon">&#128269;</div>
    <p>No videos found for "{{ query }}"</p>
</div>
{% endif %}

{% else %}
<div class="empty-state">
    <div class="icon">&#128269;</div>
    <p>Enter a search term to find videos.</p>
</div>
{% endif %}
{% endblock %}