<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - My Music Library <% } %></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="#da532c">
        <meta name="theme-color" content="#ffffff">

        <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
            rel="stylesheet"
        />
    
        <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>
            function showToastr(message) {
                let x = document.getElementById("toastr");
                if ( message ) {
                    x.getElementsByTagName("SPAN")[0].innerHTML = message;
                }
                
                x.className = `${x.className} show`;
                setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
            };

            function hideToastr() {
                let x = document.getElementById("toastr");
                
                x.className = x.className.replace("show", "");
            }
    
            document.addEventListener('DOMContentLoaded', () => {
                const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
                if ($navbarBurgers.length > 0) {
                    $navbarBurgers.forEach( el => {
                        el.addEventListener('click', () => {
                            const target = el.dataset.target;
                            const $target = document.getElementById(target);
    
                            el.classList.toggle('is-active');
                            $target.classList.toggle('is-active');
                        });
                    });
                }
            });
        </script>
    </head>
    <body>
        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">
                    <img src="/logo.png" alt="Logo">
                    <span>My Music Library</span>
                </a>
          
                <a role="button" class="navbar-burger" aria-label="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-link" href="/ajouter-un-album">
                                <span class="icon">
                                    <i class="fa-solid fa-plus"></i>
                                </span>
                                <span>
                                    Ajouter un album
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <% } %>
          
                <div class="navbar-end">
                    <% if ( user ) { %>
                    <div class="navbar-item has-dropdown">
                        <a class="navbar-link">
                            <span class="icon">
                                <i class="fa-solid fa-user"></i>
                            </span>
                            <span>
                                <%= user.username %>
                            </span>
                        </a>
          
                        <div class="navbar-dropdown">
                            <a class="navbar-item" href="/ma-collection">
                                Ma collection
                            </a>
                        </div>
                    </div>
                    <% } %>
                    <div class="navbar-item">
                        <div class="buttons">
                            <% if ( !user ) { %>
                            <a class="button is-link" 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()"></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 ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>. 
                Fait avec ❤ à Bordeaux.
                Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
            </p>
        </footer>
    </body>
</html>