{% load static tz admin_urls %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Archived Sites</title>
        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="{% static 'admin/css/base.css' %}">
        <link rel="stylesheet" href="{% static 'admin.css' %}">
        <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
        
        <script src="{% static 'jquery.min.js' %}"></script>
        {% block extra_head %}
        {% endblock %}
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="branding">
                    <h1 id="site-name">
                        <a href="{% url 'public-index' %}" class="header-archivebox">
                            <img src="{% static 'archive.png' %}" alt="Logo" style="height: 30px"/>
                            ArchiveBox
                        </a>
                    </h1>
                </div>
                {% include 'navigation.html' %}
               
            </div>
            <div id="content" class="flex">
                {% block body %}

                {% endblock %}
            </div>
            {% block footer %}
                <footer>
                    <br />
                    <center>
                        <small>
                            Archive created using <a href="https://github.com/ArchiveBox/ArchiveBox" title="Github">ArchiveBox</a> version
                            <a href="https://github.com/ArchiveBox/ArchiveBox/releases/tag/v{{VERSION}}" title="Releases">v{{VERSION}}</a>.
                            <br/><br/>
                            {{FOOTER_INFO}}
                        </small>
                    </center>
                    <br />
                </footer>
            {% endblock %}
        </div>
        <script>
            // hide images that fail to load
            document.querySelector('body').addEventListener('error', function (e) {
                e.target.style.opacity = 0;
            }, true)

            // setup timezone
            {% get_current_timezone as TIME_ZONE %}
            window.TIME_ZONE = '{{TIME_ZONE}}'

            window.setCookie = function(name, value, days) {
                let expires = ""
                if (days) {
                    const date = new Date()
                    date.setTime(date.getTime() + (days*24*60*60*1000))
                    expires = "; expires=" + date.toUTCString()
                }
                document.cookie = name + "=" + (value || "")  + expires + "; path=/"
            }

            function setTimeOffset() {
                if (window.GMT_OFFSET) return
                window.GMT_OFFSET = -(new Date).getTimezoneOffset()
                window.setCookie('GMT_OFFSET', window.GMT_OFFSET, 365)
            }

            jQuery(document).ready(function () {
                setTimeOffset();
            });
        </script>
    </body>
</html>
