{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon/favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon/favicon-16x16.png' %}">
    <link rel="manifest" href="{% static 'favicon/site.webmanifest' %}">
    <link rel="mask-icon" href="{% static 'favicon/safari-pinned-tab.svg' %}" color="#01202e">
    <link rel="shortcut icon" href="{% static 'favicon/favicon.ico' %}">
    <meta name="apple-mobile-web-app-title" content="TubeArchivist">
    <meta name="application-name" content="TubeArchivist">
    <meta name="msapplication-TileColor" content="#01202e">
    <meta name="msapplication-config" content="{% static 'favicon/browserconfig.xml' %}">
    <meta name="theme-color" content="#01202e">
    {% if title %}
        <title>TA | {{ title }}</title>
    {% else %}
        <title>TubeArchivist</title>
    {% endif %}
    {% if colors == "dark" %}
        <link rel="stylesheet" href="{% static 'css/dark.css' %}">
    {% else %}
        <link rel="stylesheet" href="{% static 'css/light.css' %}">
    {% endif %}
    <script type="text/javascript" src="{% static 'script.js' %}"></script>
    {% if cast %}
        <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
        <script id="cast-script" type="text/javascript" src="{% static 'cast-videos.js' %}"></script>
    {% endif %}
</head>
<body>
    <div class="main-content">
        <div class="boxed-content">
            <div class="top-banner">
                <a href="{% url 'home' %}">
                    {% if colors == 'dark' %}
                        <img src="{% static 'img/banner-tube-archivist-dark.png' %}" alt="tube-archivist-banner">
                    {% endif %}
                    {% if colors == 'light' %}
                        <img src="{% static 'img/banner-tube-archivist-light.png' %}" alt="tube-archivist-banner">
                    {% endif %}
                </a>
            </div>
            <div class="top-nav">
                <div class="nav-items">
                    <a href="{% url 'home' %}">
                        <div class="nav-item">home</div>
                    </a>
                    <a href="{% url 'channel' %}">
                        <div class="nav-item">channels</div>
                    </a>
                    <a href="{% url 'playlist' %}">
                        <div class="nav-item">playlists</div>
                    </a>
                    <a href="{% url 'downloads' %}">
                        <div class="nav-item">downloads</div>
                    </a>
                </div>
                <div class="nav-icons">
                    <a href="{% url 'search' %}">
                        <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" title="Search">
                    </a>
                    <a href="{% url 'settings' %}">
                        <img src="{% static 'img/icon-gear.svg' %}" alt="gear-icon" title="Settings">
                    </a>
                    <a href="{% url 'logout' %}">
                        <img class="alert-hover" src="{% static 'img/icon-exit.svg' %}" alt="exit-icon" title="Logout">
                    </a>
                </div>
            </div>
        </div>
        {% block content %}{% endblock %}
        <div class="boxed-content">
            <div class="pagination">
                {% if pagination %}
                    {% if pagination.current_page > 1 %}
                        {% if pagination.params %}
                        <a class="pagination-item" href="{{ request.path }}?{{ pagination.params }}">First</a>
                        {% else %}
                        <a class="pagination-item" href="{{ request.path }}">First</a>
                        {% endif %}
                    {% endif %}
                    {% if pagination.prev_pages %}
                        {% for page in pagination.prev_pages %}
                            {% if pagination.params %}
                            <a class="pagination-item" href="?page={{ page }}&{{ pagination.params }}">{{ page }}</a>
                            {% else %}
                            <a class="pagination-item" href="?page={{ page }}">{{ page }}</a>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    {% if pagination.current_page %}
                    <span>< Page {{ pagination.current_page }}</span>
                    {% endif %}
                    {% if pagination.next_pages %}
                        <span> ></span>
                        {% for page in pagination.next_pages %}
                            {% if pagination.params %}
                            <a class="pagination-item" href="?page={{ page }}&{{ pagination.params }}">{{ page }}</a>
                            {% else %}
                            <a class="pagination-item" href="?page={{ page }}">{{ page }}</a>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    {% if pagination.last_page > 0 %}
                        {% if pagination.params %}
                        <a class="pagination-item" href="?page={{ pagination.last_page }}&{{ pagination.params }}">
                            {% if pagination.max_hits %}
                                Max ({{ pagination.last_page }})
                            {% else %}
                                Last ({{ pagination.last_page }})
                            {% endif %}
                        </a>
                        {% else %}
                        <a class="pagination-item" href="?page={{ pagination.last_page }}">
                            {% if pagination.max_hits %}
                                Max ({{ pagination.last_page }})
                            {% else %}
                                Last ({{ pagination.last_page }})
                            {% endif %}
                        </a>
                        {% endif %}
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="boxed-content">
            <span>© 2021 - <script type="text/javascript">document.write(new Date().getFullYear());</script></span>
            <span>TubeArchivist</span>
            <span>{{ version }}</span>
            {% if ta_update %}
                <span class="danger-zone">{{ ta_update.version }} available{% if ta_update.is_breaking %}<span class="danger-zone">Breaking Changes!</span>{% endif %}</span>
                <span><a href="https://github.com/tubearchivist/tubearchivist/releases/tag/{{ ta_update.version }}" target="_blank">Release Page</a> | </span>
            {% endif %}
            <span><a href="{% url 'about' %}">About</a> | <a href="https://github.com/tubearchivist/tubearchivist" target="_blank">GitHub</a> | <a href="https://hub.docker.com/r/bbilly1/tubearchivist" target="_blank">Docker Hub</a> | <a href="https://www.tubearchivist.com/discord" target="_blank">Discord</a> | <a href="https://www.reddit.com/r/TubeArchivist/">Reddit</a></span>
        </div>
    </div>
</body>
</html>
