<!DOCTYPE html>
<html lang="<%= env.get("preferences").as(Preferences).locale %>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= yield_content "header" %>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=<%= ASSET_COMMIT %>">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=<%= ASSET_COMMIT %>">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=<%= ASSET_COMMIT %>">
    <link rel="manifest" href="/site.webmanifest?v=<%= ASSET_COMMIT %>">
    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=<%= ASSET_COMMIT %>" color="#575757">
    <meta name="msapplication-TileColor" content="#575757">
    <meta name="theme-color" content="#575757">
    <link title="Invidious" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
    <link rel="stylesheet" href="/css/pure-min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
</head>

<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
<% dark_mode = env.get("preferences").as(Preferences).dark_mode %>

<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
    <span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-2-24"></div>
        <div class="pure-u-1 pure-u-md-20-24" id="contents">
            <div class="pure-g navbar h-box">
                <% if navbar_search %>
                    <div class="pure-u-1 pure-u-md-4-24">
                        <a href="/" class="index-link pure-menu-heading">
	<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" y="0" x="0" id="Layer_1" version="1.1" viewBox="-57.15 -21.25 495.3 127.5" style="z-index: 1000;position: absolute;" height="45" width="150"><style id="style7427" type="text/css">.st2{fill:#282828}</style><g id="g7433"><path id="path7429" d="M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z" fill="red"></path><path id="polygon7431" fill="#fff" d="M48.6 24.3v36.4l31.6-18.2z"></path></g><g id="g7451"><g id="g7449"><path id="path7435" d="M176.3 77.4c-2.4-1.6-4.1-4.1-5.1-7.6-1-3.4-1.5-8-1.5-13.6v-7.7c0-5.7.6-10.3 1.7-13.8 1.2-3.5 3-6 5.4-7.6 2.5-1.6 5.7-2.4 9.7-2.4 3.9 0 7.1.8 9.5 2.4 2.4 1.6 4.1 4.2 5.2 7.6 1.1 3.4 1.7 8 1.7 13.8v7.7c0 5.7-.5 10.2-1.6 13.7-1.1 3.4-2.8 6-5.2 7.6-2.4 1.6-5.7 2.4-9.8 2.4-4.2-.1-7.6-.9-10-2.5zm13.5-8.4c.7-1.7 1-4.6 1-8.5V43.9c0-3.8-.3-6.6-1-8.4-.7-1.8-1.8-2.6-3.5-2.6-1.6 0-2.8.9-3.4 2.6-.7 1.8-1 4.6-1 8.4v16.6c0 3.9.3 6.8 1 8.5.6 1.7 1.8 2.6 3.5 2.6 1.6 0 2.7-.8 3.4-2.6z" class="st2"></path><path id="path7437" d="M360.9 56.3V59c0 3.4.1 6 .3 7.7.2 1.7.6 3 1.3 3.7.6.8 1.6 1.2 3 1.2 1.8 0 3-.7 3.7-2.1.7-1.4 1-3.7 1.1-7l10.3.6c.1.5.1 1.1.1 1.9 0 4.9-1.3 8.6-4 11-2.7 2.4-6.5 3.6-11.4 3.6-5.9 0-10-1.9-12.4-5.6-2.4-3.7-3.6-9.4-3.6-17.2v-9.3c0-8 1.2-13.8 3.7-17.5 2.5-3.7 6.7-5.5 12.6-5.5 4.1 0 7.3.8 9.5 2.3 2.2 1.5 3.7 3.9 4.6 7 .9 3.2 1.3 7.6 1.3 13.2v9.1h-20.1zm1.5-22.4c-.6.8-1 2-1.2 3.7-.2 1.7-.3 4.3-.3 7.8v3.8h8.8v-3.8c0-3.4-.1-6-.3-7.8-.2-1.8-.7-3-1.3-3.7-.6-.7-1.6-1.1-2.8-1.1-1.4-.1-2.3.3-2.9 1.1z" class="st2"></path><path id="path7439" d="M147.1 55.3L133.5 6h11.9l4.8 22.3c1.2 5.5 2.1 10.2 2.7 14.1h.3c.4-2.8 1.3-7.4 2.7-14l5-22.4h11.9L159 55.3v23.6h-11.8V55.3z" class="st2"></path><path id="path7441" d="M241.6 25.7V79h-9.4l-1-6.5h-.3c-2.5 4.9-6.4 7.4-11.5 7.4-3.5 0-6.1-1.2-7.8-3.5-1.7-2.3-2.5-5.9-2.5-10.9V25.7h12v39.1c0 2.4.3 4.1.8 5.1s1.4 1.5 2.6 1.5c1 0 2-.3 3-1 1-.6 1.7-1.4 2.1-2.4V25.7z" class="st2"></path><path id="path7443" d="M303.1 25.7V79h-9.4l-1-6.5h-.3c-2.5 4.9-6.4 7.4-11.5 7.4-3.5 0-6.1-1.2-7.8-3.5-1.7-2.3-2.5-5.9-2.5-10.9V25.7h12v39.1c0 2.4.3 4.1.8 5.1s1.4 1.5 2.6 1.5c1 0 2-.3 3-1 1-.6 1.7-1.4 2.1-2.4V25.7z" class="st2"></path><path id="path7445" d="M274.2 15.7h-11.9v63.2h-11.7V15.7h-11.9V6h35.5z" class="st2"></path><path id="path7447" d="M342.8 34.2c-.7-3.4-1.9-5.8-3.5-7.3s-3.9-2.3-6.7-2.3c-2.2 0-4.3.6-6.2 1.9-1.9 1.2-3.4 2.9-4.4 4.9h-.1V3.3h-11.6v75.6h9.9l1.2-5h.3c.9 1.8 2.3 3.2 4.2 4.3 1.9 1 3.9 1.6 6.2 1.6 4.1 0 7-1.9 8.9-5.6 1.9-3.7 2.9-9.6 2.9-17.5v-8.4c-.1-6.1-.4-10.8-1.1-14.1zm-11 21.7c0 3.9-.2 6.9-.5 9.1-.3 2.2-.9 3.8-1.6 4.7-.8.9-1.8 1.4-3 1.4-1 0-1.9-.2-2.7-.7-.8-.5-1.5-1.2-2-2.1V38.1c.4-1.4 1.1-2.6 2.1-3.6 1-.9 2.1-1.4 3.2-1.4 1.2 0 2.2.5 2.8 1.4.7 1 1.1 2.6 1.4 4.8.3 2.3.4 5.5.4 9.6v7z" class="st2"></path></g></g></svg>
			</a>
                    </div>
                    <div class="pure-u-1 pure-u-md-12-24 searchbar">
                        <form class="pure-form" action="/search" method="get">
                            <fieldset>
                                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
                            </fieldset>
                        </form>
                    </div>
                <% end %>

                <div class="pure-u-1 pure-u-md-8-24 user-field">
                    <% if env.get? "user" %>
                        <div class="pure-u-1-4">
                            <a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                <% if env.get("preferences").as(Preferences).dark_mode == "dark" %>
                                    <i class="icon ion-ios-sunny"></i>
                                <% else %>
                                    <i class="icon ion-ios-moon"></i>
                                <% end %>
                            </a>
                        </div>
                        <div class="pure-u-1-4">
                            <a id="notification_ticker" title="<%= translate(locale, "Subscriptions") %>" href="/feed/subscriptions" class="pure-menu-heading">
                                <% notification_count = env.get("user").as(User).notifications.size %>
                                <% if notification_count > 0 %>
                                    <span id="notification_count"><%= notification_count %></span> <i class="icon ion-ios-notifications"></i>
                                <% else %>
                                    <i class="icon ion-ios-notifications-outline"></i>
                                <% end %>
                            </a>
                        </div>
                        <div class="pure-u-1-4">
                            <a title="<%= translate(locale, "Preferences") %>" href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                <i class="icon ion-ios-cog"></i>
                            </a>
                        </div>
                        <% if env.get("preferences").as(Preferences).show_nick %>
                            <div class="pure-u-1-4">
                                <span id="user_name"><%= env.get("user").as(User).email %></span>
                            </div>
                        <% end %>
                        <div class="pure-u-1-4">
                            <form action="/signout?referer=<%= env.get?("current_page") %>" method="post">
                                <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                <a class="pure-menu-heading" href="#">
                                    <input style="all:unset" type="submit" value="<%= translate(locale, "Log out") %>">
                                </a>
                            </form>
                        </div>
                    <% else %>
                        <div class="pure-u-1-3">
                            <a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                <% if env.get("preferences").as(Preferences).dark_mode == "dark" %>
                                    <i class="icon ion-ios-sunny"></i>
                                <% else %>
                                    <i class="icon ion-ios-moon"></i>
                                <% end %>
                            </a>
                        </div>
                        <div class="pure-u-1-3">
                            <a title="<%= translate(locale, "Preferences") %>" href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                <i class="icon ion-ios-cog"></i>
                            </a>
                        </div>
                        <% if CONFIG.login_enabled %>
                            <div class="pure-u-1-3">
                                <a href="/login?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                    <%= translate(locale, "Log in") %>
                                </a>
                            </div>
                        <% end %>
                    <% end %>
                </div>
            </div>

            <% if CONFIG.banner %>
                <div class="h-box">
                    <h3><%= CONFIG.banner %></h3>
                </div>
            <% end %>

            <%= content %>

            <footer>
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-1-3">
                        <a href="https://github.com/iv-org/invidious">
                            <%= translate(locale, "Released under the AGPLv3 on Github.") %>
                        </a>
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <i class="icon ion-ios-wallet"></i>
                        BTC: <a href="bitcoin:bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr">bc1qfhe7rq3lqzuayzjxzyt9waz9ytrs09kla3tsgr</a>
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <i class="icon ion-ios-wallet"></i>
                        XMR: <a href="monero:41nMCtek197boJtiUvGnTFYMatrLEpnpkQDmUECqx5Es2uX3sTKKWVhSL76suXsG3LXqkEJBrCZBgPTwJrDp1FrZJfycGPR">Click here</a>
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <a href="https://github.com/iv-org/documentation">Documentation</a>
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <i class="icon ion-logo-javascript"></i>
                        <a rel="jslicense" href="/licenses">
                            <%= translate(locale, "View JavaScript license information.") %>
                        </a>
                        /
                        <i class="icon ion-ios-paper"></i>
                        <a href="/privacy">
                            <%= translate(locale, "View privacy policy.") %>
                        </a>
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <i class="icon ion-logo-github"></i>
                        <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>
                    </div>
                </div>
            </footer>
        </div>
        <div class="pure-u-1 pure-u-md-2-24"></div>
    </div>
    <script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
    <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
    <% if env.get? "user" %>
        <script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
        <script id="notification_data" type="application/json">
        <%=
        {
            "upload_text" => HTML.escape(translate(locale, "`x` uploaded a video")),
            "live_upload_text" => HTML.escape(translate(locale, "`x` is live"))
        }.to_pretty_json
        %>
        </script>
        <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
    <% end %>
</body>

</html>
