{% load static %}
{% load taglinks %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            {% block title %}
                {% if own_acct %}
                    brutaldon ('{{ own_acct.username }}')
                {% else %}
                    brutaldon
                {% endif %}
            {% endblock %}</title>
            <link rel="manifest" href="{% static 'manifest.webmanifest' %}">
            {% if not preferences %}
                <link rel="stylesheet"
                      href="{% static 'css/bulma.min.css' %}">
                <link rel="stylesheet"
                      href="{% static 'css/fork-awesome.min.css' %}">
                <link rel="stylesheet"
                      href="{% static 'css/bulma-badge.min.css' %}">
                <link rel="stylesheet"
                      href="{% static 'css/bulma-tooltip.min.css' %}">
                <link rel="stylesheet"
                      href="{% static 'css/magnific-popup.css' %}">
                <link rel="stylesheet" href="{% static "css/brutaldon.css" %}">
            {% else  %}
                <link rel="stylesheet"
                      href="{% static preferences.theme.main_css %}">
                <link rel="stylesheet" href="{% static preferences.theme.tweaks_css %}">
                <link rel="stylesheet"
                      href="{% static 'css/magnific-popup.css' %}">
                {% if not preferences.theme.is_brutalist %}
                    <link rel="stylesheet"
                          href="{% static 'css/fork-awesome.min.css' %}">
                    <link rel="stylesheet"
                          href="{% static 'css/bulma-badge.min.css' %}">
                    <link rel="stylesheet"
                          href="{% static 'css/bulma-tooltip.min.css' %}">
                {% endif %}
                {% if not preferences.no_javascript %}
                    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
                    <script type="text/javascript" src="{% static 'js/intercooler.js' %}"></script>
                    <script type="application/javascript" src="{% static 'js/mousetrap.min.js' %}"></script>
                    <script type="text/javascript" src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
                    <script type="text/javascript" src="{% static 'js/loading-attribute-polyfill.min.js' %}"></script>
                    <script type="text/javascript" src="{% static 'js/brutaldon-enhancements.js' %}"></script>
                    {% block page_scripts %}
                    {% endblock %}
                {% endif %}
            {% endif %}
            {% if own_acct %}
                <link rel="icon" href="{{ own_acct.avatar_static }}">
            {% else %}
                <link rel="icon" href="{% static "images/brutaldon.png" %}" type="image/png">
            {% endif %}

            <meta name="twitter:card" content="summary">
            <meta property="og:type" content="website">
            <meta name="twitter:site" content="@jfmcbrayer">
            <meta name="twitter:url" property="og:url" content="{% url "about" %}">
            <meta name="twitter:title" property="og:title" content="Brutaldon">
            <meta name="twitter:image" property="og:image"
                  content="{% static "images/brutaldon.png" %}">
            <meta name="twitter:description" property="og:description"
                  content="A brutalist, web-1.0 web client for Mastodon and Pleroma. Supports text-only browsers like Lynx, older browsers, as well as the latest mainstream browsers. All JavaScript is completely optional and progressively enhances the core application.">




    </head>
    <body ic-global-include='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
        <div id="page-load-indicator"></div>
        <div id="new-toot-modal" class="modal"></div>
        {% block navbar %}
            <nav class="navbar is-primary" role="navigation"
                 aria-label="main navigation" id="main-nav-bar">
                <div class="navbar-brand">
                    <a class="navbar-item" href="{% url "home" %}">
                        {% if own_acct %}
                        <img src="{{ own_acct.avatar_static }}"
                             class="image is-32x32 avatar"
                             alt="Brutaldon ('{{ own_acct.username }}')">
                        {% else %}
                        <img loading="lazy" src="{% static "images/brutaldon.png" %}"
                             class="image is-32x32" alt="Brutaldon">
                        {% endif %}
                    </a>
                </div>
                {% if request.session.active_instance and request.session.active_username %}
                    <div class="navbar-menu is-active" id="navMenu">
                        <!-- navbar start, navbar end -->
                        <div class="navbar-start">
                            <a href="{% url "home" %}" class="navbar-item">
                                <span class="fa fa-home"></span>
                                <span>Home</span>
                            </a>
                            <a class="navbar-item" href="{% url "note" %}">
                                <span class="fa fa-bell"></span>
                                {% if preferences.notifications and not preferences.theme.is_brutalist %}
                                    <span ic-src="{% url 'notes_count' %}"
                                          ic-poll="{{ preferences.poll_frequency }}s"
                                          ic-target="this"
                                          ic-select-from-response="#notes-count">
                                        <span
                                            {% if notifications and notifications != '0' %}
                                            class="badge"
                                            {% endif %}
                                            data-badge="{{ notifications }}">
                                            Notifications</span>
                                    </span>
                                {% elif notifications and preferences.notifications %}
                                    <span ic-src="{% url 'notes_count' %}"
                                          ic-poll="{{ preferences.poll_frequency }}s"
                                          ic-target="this"
                                          ic-select-from-response="#notes-count">
                                        <span >Notifications ({{ notifications }})</span>
                                    </span>
                                {% else %}
                                    <span >Notifications</span>
                                {% endif %}
                            </a>
                            <a class="navbar-item" href="{% url "local" %}">
                                <span class="fa fa-community"></span>
                                <span >Local</span>
                            </a>
                            <a class="navbar-item" href="{% url "fed" %}">
                                <span class="fa fa-globe"></span>
                                <span >Federated</span>
                            </a>
                            <a class="navbar-item" href="{% url "toot" %}"
                               ic-get-from="{% url "toot" %}"
                               ic-target="#new-toot-modal"
                               ic-on-complete="$('#new-toot-modal').toggleClass('is-active');">
                                <span class="fa fa-edit"> </span>
                                <span >New Toot</span>
                            </a>
                            <a class="navbar-item" href="{% url "search" %}"
                               ic-get-from="{% url "search" %}"
                               ic-target="#new-toot-modal"
                               ic-on-complete="$('#new-toot-modal').toggleClass('is-active');">
                                <span class="fa fa-search"> </span>
                                <span >Search</span>
                            </a>
                        </div>
                        <div class="navbar-end" >
                            <a class="navbar-item" href="{% url "settings" %}">
                                <span class="fa fa-gear"></span>
                                <span >Settings</span>
                            </a>
                            <a class="navbar-item" href="{% url "accounts" %}">
                                <span class="fa fa-id-card-o"> </span>
                                <span >Accounts</span>
                            </a>
                        </div>
                    </div>
                {% endif %}
            </nav>
        {% endblock %}

        <main id="main" class="section">
            <div class="container">
                {% block content %}
                    <h1 class="title">
                        Title
                    </h1>
                    <p class="subtitle">
                        Brutaldon is totally a thing.
                    </p>
                {% endblock %}
            </div>
        </main>

        <footer class="footer">
            <div class="level">
                <div class="level-left">
                    <a class="level-item is-size-7" href="{% url "about" %}">
                        About
                    </a>
                    <a class="level-item is-size-7" href="https://github.com/jfmcbrayer/brutaldon">
                        Source
                    </a>
                </div>
                <div class="level-right">
                    {% if preferences.theme.is_brutalist %}
                        <noscript class="loading-lazy">
                        <img loading="lazy" class="level-item" src="{% static '/images/lynx.gif' %}"
                             alt="Lynx Now!">
                        <img loading="lazy" class="level-item" src="{% static '/images/now9.gif' %}"
                             alt="Netscape Now!">
                        </noscript>
                    {% endif %}
                    <a class="level-item is-size-7" href="{% url "privacy" %}">
                        Privacy
                    </a>
                </div>
            </div>
        </footer>

        {% if not preferences.no_javascript %}

            <script type="application/javascript">
             $(document).ready(function () {
                 menuPrepare();
             });

             {% if preferences.lightbox %}
             Intercooler.ready(function ()
                 {
                     $('.attachments').each(function() {
                         $(this).magnificPopup({
                             delegate: 'figure.attachment-image a',
                             type: 'image',
                             preload: [1, 1],
                             gallery:  {enabled: true },
                             zoom: { enabled: true }
                         });
                     });
                 });
             {% endif %}
            </script>
            {% block page_scripts_inline %}
            {% endblock %}

        {% endif %}
    </body>
</html>
