{% set page_title = title|string + ' - Page ' + parameters_dictionary.get('page', '1') %}
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
    main > * {
        width: 800px;
        margin:auto;
    }
        
    .playlist-metadata{
        display:grid;
        grid-template-columns: 0fr 1fr;
    }
        .playlist-thumbnail{
            grid-row: 1 / span 5;
            grid-column:1;
            justify-self:start;
            width:250px;
            margin-right: 10px;
        }
        .playlist-title{
            grid-row: 1;
            grid-column:2;
        }
        .playlist-author{
            grid-row:2;
            grid-column:2;
        }
        .playlist-stats{
            grid-row:3;
            grid-column:2;
        }

        .playlist-description{
            grid-row:4;
            grid-column:2;
            min-width:0px;
            white-space: pre-line;
        }

    #results{
        margin-top:10px;

        display: grid;
        grid-auto-rows: 0fr;
        grid-row-gap: 10px;
        
    }
{% endblock style %}

{% block main %}
    <div class="playlist-metadata">
        <img class="playlist-thumbnail" src="{{ thumbnail }}">
        <h2 class="playlist-title">{{ title }}</h2>
        <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
        <div class="playlist-stats">
            <div>{{ video_count|commatize }} videos</div>
            <div>{{ view_count|commatize }} views</div>
            <div>Last updated {{ time_published }}</div>
        </div>
        <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
    </div>

    <div id="results">          
        {% for info in video_list %}
            {{ common_elements.item(info) }}
        {% endfor %}
    </div>
    <nav class="page-button-row">
        {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
    </nav>
{% endblock main %}