<% content_for "header" do %>
<title><%= translate(locale, "Subscriptions") %> - Invidious</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/private?token=<%= token %>" />
<% end %>

<%= rendered "components/feed_menu" %>

<div class="pure-g h-box">
    <div class="pure-u-1-3">
        <h3>
            <a href="/subscription_manager"><%= translate(locale, "Manage subscriptions") %></a>
        </h3>
    </div>
    <div class="pure-u-1-3" style="text-align:center">
        <h3>
            <a href="/feed/history"><%= translate(locale, "Watch history") %></a>
        </h3>
    </div>
    <div class="pure-u-1-3" style="text-align:right">
        <h3>
            <a href="/feed/private?token=<%= token %>"><i class="icon ion-logo-rss"></i></a>
        </h3>
    </div>
</div>

<center>
    <%= translate(locale, "`x` unseen notifications", "#{notifications.size}") %>
</center>

<% if !notifications.empty? %>
    <div class="h-box">
        <hr>
    </div>
<% end %>

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

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

<script id="watched_data" type="application/json">
<%=
{
    "csrf_token" => URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "")
}.to_pretty_json
%>
</script>
<script src="/js/watched_widget.js"></script>

<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="/feed/subscriptions?page=<%= page - 1 %><% if env.params.query["max_results"]? %>&max_results=<%= max_results %><% end %>">
                <%= 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 + notifications.size) == max_results %>
            <a href="/feed/subscriptions?page=<%= page + 1 %><% if env.params.query["max_results"]? %>&max_results=<%= max_results %><% end %>">
                <%= translate(locale, "Next page") %>
            </a>
        <% end %>
    </div>
</div>
