<!doctype html>
<html lang="fr" data-theme="light">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title><%= config.siteName %> :: <%= page.title %></title>

        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#2b5797">
        <meta name="theme-color" content="#ffffff">

        <link href="/css/main.css" rel="stylesheet" />

        <script src="/js/libs.js"></script>
        <script defer src="/js/main.js"></script>

        <% if ( config.matomoUrl ) { %>
        <!-- Matomo -->
        <script>
            var _paq = window._paq = window._paq || [];
            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
            (function() {
                var u="<%= config.matomoUrl %>";
                _paq.push(['setTrackerUrl', u+'matomo.php']);
                _paq.push(['setSiteId', <%= config.matomoId %>]);
                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
            })();
        </script>
        <!-- End Matomo Code -->
        <% } %>
    </head>
    <body>
        <nav class="navbar">
            <nav class="navbar container" aria-label="Navigation principale">
                <div class="navbar-brand">
                    <a class="navbar-item" href="/">
                        <img src="/img/logo.png" alt="Logo MusicTopus">
                        <span>MusicTopus</span>
                    </a>

                    <a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>

                <div id="navbar" class="navbar-menu">
                    <% if ( user ) { %>
                    <div class="navbar-start">
                        <div class="navbar-item">
                            <div class="buttons">
                                <a class="button is-primary" href="/ajouter-un-album">
                                    <i class="icon-plus"></i>
                                    <span>
                                        Ajouter un album
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <% } %>

                    <ul class="navbar-end">
                        <li class="navbar-item">
                            <a href="/nous-contacter">
                                Nous contacter
                            </a>
                        </li>
                        <li class="navbar-item has-dropdown">
                            <a class="navbar-link">
                                <i class="icon-adjust theme-system icon-theme hidden"></i>
                                <i class="icon-sun theme-light icon-theme hidden"></i>
                                <i class="icon-moon theme-dark icon-theme hidden"></i>
                                <span>
                                    Thème
                                </span>
                            </a>

                            <ul class="navbar-dropdown">
                                <li>
                                    <button class="navbar-item theme" data-value="system">
                                        <i class="icon-adjust"></i>
                                        <span>
                                            Système
                                        </span>
                                    </button>
                                </li>
                                <li>
                                    <button class="navbar-item theme" data-value="light">
                                        <i class="icon-sun"></i>
                                        <span>
                                            Clair
                                        </span>
                                    </button>
                                </li>
                                <li>
                                    <button class="navbar-item theme" data-value="dark">
                                        <i class="icon-moon"></i>
                                        <span>
                                            Sombre
                                        </span>
                                    </button>
                                </li>
                            </ul>
                        </li>
                        <% if ( user ) { %>
                        <li class="navbar-item has-dropdown">
                            <a class="navbar-link">
                                <i class="icon-user"></i>
                                <span>
                                    <%= user.username %>
                                </span>
                            </a>

                            <ul class="navbar-dropdown">
                                <li>
                                    <a class="navbar-item" href="/mon-compte">
                                        Mon compte
                                    </a>
                                </li>
                                <li><hr /></li>
                                <li>
                                    <a class="navbar-item" href="/ma-collection">Ma collection</a>
                                    <ul>
                                        <li>
                                            <a class="navbar-item" href="/ma-collection/on-air">
                                                On air
                                            </a>
                                        </li>
                                        <li>
                                            <a class="navbar-item" href="/ma-collection/statistiques">
                                                Statistiques
                                            </a>
                                        </li>
                                        <li>
                                            <a class="navbar-item" href="/ma-collection/exporter">
                                                Exporter
                                            </a>
                                        </li>
                                        <li>
                                            <a class="navbar-item" href="/ma-collection/importer">
                                                Importer
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li><hr /></li>
                                <li>
                                    <a class="navbar-item" href="/ma-liste-de-souhaits">
                                        Ma liste de souhaits
                                    </a>
                                    <ul>
                                        <li>
                                            <a class="navbar-item" href="/ajouter-a-ma-liste-de-souhaits">
                                                Ajouter
                                             </a>
                                        </li>
                                        <li>
                                            <a class="navbar-item" href="/ma-liste-de-souhaits/exporter">
                                                Exporter
                                            </a>
                                        </li>
                                        <li>
                                            <a class="navbar-item" href="/ma-liste-de-souhaits/importer">
                                                Importer
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li><hr /></li>
                                <li>
                                    <a class="navbar-item is-danger" href="/se-deconnecter">
                                        Déconnexion
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <% } %>
                        <% if ( !user ) { %>
                        <li class="navbar-item">
                            <div class="buttons">
                                <a class="button is-primary" href="/connexion">
                                    <strong>Connexion</strong>
                                </a>
                            </div>
                        </li>
                        <% } %>
                    </ul>
                </div>
            </nav>
        </nav>

        <div id="toastr">
            <button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button>
            <span></span>
        </div>

        <%
            if ( flash.error.length > 0 ) {
                for ( let i = 0 ; i < flash.error.length ; i += 1 ) {
        %>
                    <div class="flash">
                        <div class="header">
                            Erreur
                        </div>
                        <div class="body">
                            <%= flash.error[i].replace('Error: ', '') %>
                        </div>
                    </div>
        <%
                }
            }
            if ( flash.info.length > 0 ) {
                for ( let i = 0 ; i < flash.info.length ; i += 1 ) {
        %>
                    <div class="flash info">
                        <div class="header">
                            Information
                        </div>
                        <div class="body">
                            <%= flash.info[i] %>
                        </div>
                    </div>
        <%
                }
            }
            if ( flash.success.length > 0 ) {
                for ( let i = 0 ; i < flash.success.length ; i += 1 ) {
        %>
                    <div class="flash success">
                        <div class="header">
                            Succès
                        </div>
                        <div class="body">
                            <%= flash.success[i] %>
                        </div>
                    </div>
        <%
                }
            }
        %>

        <%- include(viewname) %>

        <footer class="footer layout-hero">
            <p>
                <strong title="Merci Brunus ! 😜">MusicTopus</strong> par <a href="https://www.darkou.link" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon-link"></i></a>.
                Logo réalisé par Brunus avec <a href="https://inkscape.org/fr/" target="_blank" rel="noopener noreferrer">Inkscape <i class="icon-link"></i></a>.
                <br />
                Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a> et disponible sur <a href="https://forge.darkou.fr/contact/MusicTopus" target="_blank">forge.darkou.fr <i class="icon-link"></i></a>.
                <br />
                Fait avec ❤️ à Bordeaux.
            </p>
        </footer>
    </body>
</html>