<% content_for "header" do %>
<title><%= playlist.title %> - Invidious</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" />
<% end %>

<div class="pure-g h-box">
    <div class="pure-u-2-3">
        <h3><%= playlist.title %></h3>
    </div>
    <div class="pure-u-1-3" style="text-align:right">
        <h3>
            <a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a>
        </h3>
    </div>
</div>

<div class="pure-g h-box">
    <div class="pure-u-1-3">
        <a href="https://www.youtube.com/playlist?list=<%= playlist.id %>">
            <%= translate(locale, "View playlist on YouTube") %>
        </a>
        <div class="pure-u-1 pure-md-1-3">
            <a href="/channel/<%= playlist.ucid %>">
                <b><%= playlist.author %></b>
            </a>
        </div>
    </div>
    <div class="pure-u-1-2"></div>
</div>

<div class="h-box">
    <p><%= playlist.description_html %></p>
</div>

<div class="h-box">
    <hr>
</div>

<div class="pure-g">
    <% videos.each_slice(4) do |slice| %>
        <% slice.each do |item| %>
            <%= rendered "components/item" %>
        <% end %>
    <% end %>
</div>

<div class="pure-g h-box">
    <div class="pure-u-1 pure-u-lg-1-5">
        <% if page > 1 %>
            <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
                <%= translate(locale, "Previous page") %>
            </a>
        <% end %>
    </div>
    <div class="pure-u-1 pure-u-lg-3-5"></div>
    <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
        <% if videos.size == 100 %>
            <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
                <%= translate(locale, "Next page") %>
            </a>
        <% end %>
    </div>
</div>
