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

        <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - MusicTopus <% } %></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="/libs/axios/axios.min.js"></script>
        <script src="/libs/vue/vue.global.prod.js"></script>
        <script src="/js/main.js"></script>
    </head>
    <body>
        <nav class="navbar" 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>
                <% } %>

                <div class="navbar-end">
                    <a class="navbar-item" href="/nous-contacter">
                        Nous contacter
                    </a>
                    <% if ( user ) { %>
                    <div class="navbar-item has-dropdown">
                        <a class="navbar-link">
                            <i class="icon-user"></i>
                            <span>
                                <%= user.username %>
                            </span>
                        </a>

                        <div class="navbar-dropdown">
                            <a class="navbar-item" href="/ma-collection">
                                Ma collection
                            </a>
                            <a class="navbar-item" href="/ma-collection/exporter">
                                Exporter ma collection
                            </a>
                        </div>
                    </div>
                    <% } %>
                    <div class="navbar-item apparence">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
                                <input type="checkbox" id="checkbox" />
                                <div class="slider round"></div>
                          </label>
                        </div>
                    </div>
                    <div class="navbar-item">
                        <div class="buttons">
                            <button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
                                <i class="icon-eye"></i>
                            </button>
                            <% if ( !user ) { %>
                            <a class="button is-primary" href="/connexion">
                                <strong>Connexion</strong>
                            </a>
                            <% } else { %>
                            <a class="button is-danger" href="/se-deconnecter">
                                Déconnexion
                            </a>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

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

        <% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
            <div class="flash">
                <% if ( page.failureFlash ) {%>
                    <div class="header">
                        Erreur
                    </div>
                    <div class="body">
                        <%= page.failureFlash %>
                    </div>
                <% } %>
                <%
                    if (error && error.length > 0) {
                        for( let i = 0 ; i < error.length ; i += 1 ) {
                %>
                <div class="header">
                    Erreur
                </div>
                <div class="body">
                    <%= error %>
                </div>
                <%
                        }
                    }
                %>
            </div>
        <% } %>

        <%- include(viewname) %>

        <footer class="footer layout-hero">
            <p>
                <strong title="Merci Brunus ! 😜">MusicTopus</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon-link"></i></a>.
                Fait avec ❤️ à Bordeaux.
                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>.
            </p>
        </footer>
    </body>
</html>