<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="How far does your echo go?">
    <title>Echo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="icon" href="{{ url_for('static', filename='robots.txt') }}">
    <meta property="og:title" content="Echo" />
    <meta property="og:description" content="How far does your echo go?" />
    <meta property="og:url" content="{{ url_for('index') }}" />
    <meta property="og:image" content="{{ url_for('static', filename='icon.png') }}" />
    <meta name="twitter:card" content="summary_large_image">
</head>

<body>
    <section class="hero is-black is-fullheight">
        <div class="hero-head">
            <nav class="navbar is-fixed-top">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="https://echo.bbrunson.com">
                            <img src="/static/icon.png" width="28" height="28">
                        </a>
                        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenuHeroA">
                            <span aria-hidden="true"></span>
                            <span aria-hidden="true"></span>
                            <span aria-hidden="true"></span>
                          </a>
                    </div>
                    <div id="navbarMenuHeroA" class="navbar-menu">
                        <div class="navbar-end">
                            <a href="{{ url_for('index') }}" class="navbar-item">
                                Home
                            </a>
                            {% if current_user.is_authenticated %}
                            <a href="{{ url_for('profile') }}" class="navbar-item">
                                Profile
                            </a>
                            {% endif %}
                            {% if not current_user.is_authenticated %}
                            <a href="{{ url_for('login') }}" class="navbar-item">
                                Login
                            </a>
                            <div class="buttons navbar-item">
                                <a class="button is-info" href="{{ url_for('signup') }}">
                                    <strong>Signup!</strong>
                                </a>
                            </div>
                            <!-- <a href="{{ url_for('signup') }}" class="navbar-item">
                                Sign Up
                            </a> -->
                            {% endif %}
                            {% if current_user.is_authenticated %}
                            <a href="{{ url_for('logout') }}" class="navbar-item">
                                Logout
                            </a>
                            <!-- <div class="buttons navbar-item">
                                <a class="button is-info" href="{{ url_for('profile') }}">
                                    <strong>Generate!</strong>
                                </a>
                            </div> -->
                            {% endif %}
                            {% if not current_user.is_authenticated %}
                            
                            {% endif %}
                        </div>
                    </div>
                </div>
            </nav>
        </div>

        <div class="hero-body">
            <div class="container has-text-centered">
               {% block content %}
               {% endblock %}
            </div>
        </div>
    </section>
    <script>
        document.addEventListener('DOMContentLoaded', () => {

        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Add a click event on each of them
        $navbarBurgers.forEach( el => {
        el.addEventListener('click', () => {

            // Get the target from the "data-target" attribute
            const target = el.dataset.target;
            const $target = document.getElementById(target);

            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
            el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

        });
        });

        });

        document.addEventListener('DOMContentLoaded', () => {
        // Functions to open and close a modal
        function openModal($el) {
            $el.classList.add('is-active');
        }

        function closeModal($el) {
            $el.classList.remove('is-active');
        }

        function closeAllModals() {
            (document.querySelectorAll('.modal') || []).forEach(($modal) => {
            closeModal($modal);
            });
        }

        // Add a click event on buttons to open a specific modal
        (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
            const modal = $trigger.dataset.target;
            const $target = document.getElementById(modal);

            $trigger.addEventListener('click', () => {
            openModal($target);
            });
        });

        // Add a click event on various child elements to close the parent modal
        (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
            const $target = $close.closest('.modal');

            $close.addEventListener('click', () => {
            closeModal($target);
            });
        });

        // Add a keyboard event to close all modals
        document.addEventListener('keydown', (event) => {
            const e = event || window.event;

            if (e.keyCode === 27) { // Escape key
            closeAllModals();
            }
        });
        });
    </script>
</body>
<!-- <footer class="footer">
</footer> -->

</html>