<% content_for "header" do %>
<title><%= search_query.not_nil!.size > 30 ? HTML.escape(query.not_nil![0,30].rstrip(".") + "...") : HTML.escape(query.not_nil!) %> - Invidious</title>
<% end %>

<div class="pure-g h-box v-box">
    <div class="pure-u-1 pure-u-lg-1-5">
        <% if page > 1 %>
            <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&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 count >= 20 %>
            <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page + 1 %>">
                <%= translate(locale, "Next page") %>
            </a>
        <% end %>
    </div>
</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="/search?q=<%= HTML.escape(query.not_nil!) %>&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 count >= 20 %>
            <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page + 1 %>">
                <%= translate(locale, "Next page") %>
            </a>
        <% end %>
    </div>
</div>
