{% set page_title = title %}
{% extends "base.html" %}
{% block style %}
    ul {
        background-color: var(--interface-color);
        padding: 20px;
        width: 400px;
        max-width: 100%;
        margin: auto;
        margin-top: 20px;
    }
        li {
            margin-bottom: 10px;
        }
    .recommended {
        max-width: 1200px;
        margin: 40px auto;
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }
    .video-card {
        background: var(--interface-color);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        width: 320px;
        overflow: hidden;
        text-align: left;
        transition: box-shadow 0.2s;
    }
    .video-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.16);
    }
    .video-thumb {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
    }
    .video-info {
        padding: 12px 16px;
    }
    .video-title {
        font-size: 1.1em;
        font-weight: bold;
        margin-bottom: 6px;
        color: var(--text-color);
        text-decoration: none;
    }
    .video-meta {
        color: #888;
        font-size: 0.95em;
    }
{% endblock style %}
{% block main %}
    <ul>
        <li><a href="/youtube.com/playlists">Local playlists</a></li>
        <li><a href="/youtube.com/subscriptions">Subscriptions</a></li>
        <li><a href="/youtube.com/subscription_manager">Subscription Manager</a></li>
        <li><a href="/youtube.com/settings">Settings</a></li>
    </ul>
    {% if recommended_videos %}
    <h2 style="text-align:center;margin-top:40px;">Recommended Videos</h2>
    <div class="recommended">
        {% for video in recommended_videos %}
        <div class="video-card">
            <a href="/watch?v={{ video.videoId }}">
                <img class="video-thumb" src="{{ video.thumbnail.thumbnails[-1].url }}" alt="Thumbnail">
            </a>
            <div class="video-info">
                <a class="video-title" href="/watch?v={{ video.videoId }}">{{ video.title.runs[0].text }}</a>
                <div class="video-meta">
                    {{ video.ownerText.runs[0].text }}<br>
                    {{ video.viewCountText.simpleText if video.viewCountText else '' }}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
{% endblock main %}