<%
	locale = env.get("preferences").as(Preferences).locale
	dark_mode = env.get("preferences").as(Preferences).dark_mode
	current_backend = env.request.cookies["SERVER_ID"]?.try &.value
%>
<!DOCTYPE html>
<html lang="<%= 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 %>">
		<link rel="stylesheet" href="/css/carousel.css?v=<%= ASSET_COMMIT %>">
		<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
	</head>

	<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
		<span style="display:none" id="dark_mode_pref"><%= dark_mode %></span>
		<div class="pure-g">
			<div class="pure-u-1 pure-u-xl-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">Invidious</a>
						</div>
						<div class="pure-u-1 pure-u-md-12-24 searchbar">
							<% autofocus = false %><%= rendered "components/search_box" %>
						</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" title="<%= translate(locale, "toggle_theme") %>">
									<% if 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(Invidious::User).notifications.size %>
									<% if CONFIG.enable_user_notifications && 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" style="overflow: hidden; white-space: nowrap;">
									<span id="user_name"><%= HTML.escape(env.get("user").as(Invidious::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="<%= HTML.escape(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" title="<%= translate(locale, "toggle_theme") %>">
									<% if 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.backends.empty? %>
				<div class="h-box">
					<b>Switch Backend:</b>
					<% CONFIG.backends.each do | backend | %>
					<% backend = backend.split(CONFIG.backends_delimiter) %>
					<% if current_backend == backend[0] %>
						<a href="/switchbackend?backend_id=<%= backend[0] %>" style="text-decoration-line: underline; display: inline-block;">
							Backend<%= HTML.escape(backend[0]) %>
					<% if backend.size == 2 %>
							<%= HTML.escape(backend[1]) %>
                    <% end %>
						</a> <span> | </span>
                    <% else %>
						<a href="/switchbackend?backend_id=<%= backend[0] %>" style="display: inline-block;">
							Backend<%= HTML.escape(backend[0]) %>
					<% if backend.size == 2 %>
							<%= HTML.escape(backend[1]) %>
                    <% end %>
						</a> <span> | </span>
                    <% end %>
                    <% end %>
				</div>
				<% end %>

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

				<%= content %>

            <% if buffer_footer %>
                <div id="footer_buffer"></div>
            <% end %>

        </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>
        <% if CONFIG.enable_user_notifications %>
        <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
        <% end %>
    <% end %>

    <footer class="pure-g">
        <div class="pure-u-1 pure-u-md-2-24"></div>
        <div class="h-box pure-u-1 pure-u-md-20-24" id="footer-content-container">
            <div class="pure-u-1 footer-content">
                <div class="footer-section pure-u-1-4" id="footer-custom-text">
                    <b>Invidious</b>
                    <% if CONFIG.footer %>
                        <p><%=CONFIG.footer%></p>
                    <% else %>
                        <p><%=translate(locale, "default_invidious_footer_text")%></p>
                    <% end %>
                    
                </div>
                <div class="footer-section">
                    <b class="footer-section-header"><%= translate(locale, "footer_navigation_section_header")%></b>
                    <ul class="pure-menu-list footer-section-list">
                        <li class="pure-menu-item footer-section-item">
                            <a href="/" title="<%= translate(locale, "footer_home_link")%>">
                                <%= translate(locale, "footer_home_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="/feed/popular" title="<%= translate(locale, "Popular")%>">
                                <%= translate(locale, "Popular") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="/feed/trending" title="<%= translate(locale, "Trending")%>" style="">
                                <%= translate(locale, "Trending") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="/search" title="<%= translate(locale, "Search")%>">
                                <%= translate(locale, "Search") %>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-section">
                    <b class="footer-section-header">Invidious</b>
                    <ul class="pure-menu-list footer-section-list">
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://invidious.io" title="<%= translate(locale, "footer_project_homepage_link")%>">
                                <%= translate(locale, "footer_project_homepage_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://github.com/iv-org/invidious" title="<%= translate(locale, "footer_source_code_link")%>">
                                <%= translate(locale, "footer_source_code_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://github.com/iv-org/invidious/issues" title="<%= translate(locale, "footer_issue_tracker_link")%>" style="">
                                <%= translate(locale, "footer_issue_tracker_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://instances.invidious.io" title="<%= translate(locale, "footer_public_instances_link")%>">
                                <%= translate(locale, "footer_public_instances_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://invidious.io/donate" title="<%= translate(locale, "footer_donate_link")%>">
                                <%= translate(locale, "footer_donate_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://matrix.to/#/#invidious:matrix.org" title="<%= translate(locale, "footer_matrix_link")%>">
                                <%= translate(locale, "footer_matrix_link") %>
                            </a>
                        </li>

                    </ul>                
                </div>
                <% if CONFIG.instance_maintainer_email || CONFIG.modified_source_code_url || CONFIG.footer_instance_tos_link || CONFIG.footer_instance_privacy_policy_link %>
                    <div class="footer-section">
                        <b class="footer-section-header">
                            <% if CONFIG.modified_source_code_url %>
                                <%= translate(locale, "footer_instance_section_header_modified_source")%>
                            <% else %>
                                <%= translate(locale, "footer_instance_section_header")%>
                            <% end %>
                        </b>
                        <ul class="pure-menu-list footer-section-list">
                            <% if CONFIG.instance_maintainer_email %>
                                <li class="pure-menu-item footer-section-item">
                                    <a href="<%=HTML.escape("mailto:#{CONFIG.instance_maintainer_email.not_nil!}")%>" title="<%= translate(locale, "footer_contact_link")%>">
                                        <%= translate(locale, "footer_contact_link") %>
                                    </a>
                                </li>
                            <% end %>
                            <% if CONFIG.modified_source_code_url %>
                                <li class="pure-menu-item footer-section-item">
                                    <a href="<%=HTML.escape(CONFIG.modified_source_code_url.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_modified_source_code")%>">
                                        <%= translate(locale, "footer_instance_section_modified_source_code") %>
                                    </a>
                                </li>
                            <% end %>
                            <% if CONFIG.footer_instance_tos_link %>
                                <li class="pure-menu-item footer-section-item">
                                    <a href="<%=HTML.escape(CONFIG.footer_instance_tos_link.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_tos")%>">
                                        <%= translate(locale, "footer_instance_section_tos") %>
                                    </a>
                                </li>
                            <% end %>
                            <% if CONFIG.footer_instance_privacy_policy_link %>
                                <li class="pure-menu-item footer-section-item">
                                    <a href="<%=HTML.escape(CONFIG.footer_instance_privacy_policy_link.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_privacy_policy")%>">
                                        <%= translate(locale, "footer_instance_section_privacy_policy") %>
                                    </a>
                                </li>
                            <% end %>

                            <% if CONFIG.footer_instance_donate_link %>
                                <li class="pure-menu-item footer-section-item">
                                    <a href="<%=HTML.escape(CONFIG.footer_instance_donate_link.not_nil!)%>" title="<%= translate(locale, "footer_instance_section_donate")%>">
                                        <%= translate(locale, "footer_instance_section_donate") %>
                                    </a>
                                </li>
                            <% end %>

                            <% CONFIG.footer_instance_section_custom_fields.each do | field | %>
                                <li class="pure-menu-item footer-section-item">
                                    <a href="<%=HTML.escape(field[1])%>" title="<%= HTML.escape(field[0]) %>">
                                        <%= HTML.escape(field[0]) %>
                                    </a>
                                </li>
                            <% end %>
                        </ul>
                    </div>
                <% end %>

                <div class="footer-section">
                    <b class="footer-section-header"><%= translate(locale, "footer_support_section_header")%></b>
                    <ul class="pure-menu-list footer-section-list">
                        <li class="pure-menu-item footer-section-item">
                            <a href="https://github.com/iv-org/invidious/issues/new" title="<%= translate(locale, "footer_report_bug_link")%>">
                                <%= translate(locale, "footer_report_bug_link") %>
                            </a>
                        </li>
                        <li class="pure-menu-item footer-section-item">
                            <a href="#" title="<%= translate(locale, "footer_faq_link")%>" style="">
                                <%= translate(locale, "footer_faq_link") %>
                            </a>
                        </li>
                    </ul>                
                </div>
            </div>
            <hr/>
            <div class="footer-footer">
			<div class="box">You are currently using Backend: <%= current_backend %></p>
                <span class="left">
                    <% if CONFIG.modified_source_code_url %>
                        <%= translate(locale, "footer_current_version_modified") %>
                    <% else %>
                        <%= translate(locale, "Current version: ") %>
                    <% end %>
                    
                    <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>
                </span>
                <div class="right">
                    <a href="/privacy" title="<%= translate(locale, "footer_privacy_policy_link")%>"><%= translate(locale, "footer_privacy_policy_link") %></a>
                    <span> | </span>
                    <a href="/licenses" title="<%= translate(locale, "footer_licences_link")%>"><%= translate(locale, "footer_licences_link") %></a>
                </div>
            </div>
        </div>
        </div>
        <div class="pure-u-1 pure-u-md-2-24"></div>
    </footer>
</body>

</html>
