{% extends 'bootstrap/base.html' %}
{% import 'images.html' as images %}

{% block head %}

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

    {% block csrf %}
        <!-- may be overkill but we want to "protect" every view regarless of having a form -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    {% endblock %}

    {% block title %}
    {% endblock %}
    {% block styles %}
        <link rel="stylesheet" href="https://clipboardjs.com/bower_components/primer-css/css/primer.css">
        <link rel="stylesheet" href="https://clipboardjs.com/bower_components/highlightjs/styles/github.css">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    {% endblock %}

    {% block onload %}
        <script type="text/javascript" src="{{ url_for('static', filename='scripts/check_theme.js') }}"></script>
    {% endblock %}

{% endblock %}

{% block body %}
    {% block navbar %}
    {% endblock %}

    {% block header %}
        <span class="header">
            <a class="image-link" href="{{ url_for("home") }}">{{ images.site_icon() }}</a>
            <a class="image-link" href="{{ url_for("home") }}">{{ images.banner()  }}</a>
            <div class="dropdown">
                <a class="quicklink" id="user-icon" href="{{ url_for("login") }}">
                    {% if ghh is defined %}
                        {{ images.user_avatar(ghh) }}
                    {% else %}
                        {{ images.user_blank() }}
                    {% endif %}
                </a>
                <div id="settingsDropdown" class="dropdown-content">
                    <a class="quicklink" href="{{ url_for("login") }}">login</a>
                    <a class="quicklink" href="{{ url_for("logout") }}">logout</a>
                    <button class="theme-pick" onclick="activateLightMode()">
                        {{ images.light_theme() }}
                    </button>
                    <button class="theme-pick" onclick="activateDarkMode()">
                        {{ images.dark_theme() }}
                    </button>
                </div>
            </div>
        </span>
    {% endblock %}

    {% block loading %}
        <div class="loading" id="loading"></div>
    {% endblock %}

    {% block content %}
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <span class=flashes>
                    {% for message in messages %}
                        <p>{{ message }}</p>
                    {% endfor %}
                </span>
            {% endif %}
        {% endwith %}
    {% endblock %}

    {% block error_warning %}
        {% if warning %}
            <div class="warning">
                {{ warning }}
            </div>
        {% endif %}
        {% if error %}
            <div class="error">
                {{ error }}
            </div>
        {% endif %}
    {% endblock %}


    {% block footer %}
        <div class="footer" id="footer">
            <a target="_blank" href="{{ url_for('about', filename='templates/about.html') }}" class="quicklink">about</a> |
            <a href="mailto:support@githubhealth.com" class="quicklink">support</a> |
            <a target="_blank" class="quicklink" href="https://pypi.org/project/GitHubHealth/">pypi</a> |
            <a target="_blank" href="https://www.github.com/ckear1989/github/#contributing" class="quicklink">contribute</a>
        </div>
    {% endblock %}

    {% block scripts %}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega@5.21.0"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.8.1"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.4"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='scripts/base.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='scripts/plots.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='scripts/buttons.js') }}"></script>
    {% endblock %}

{% endblock %}
