<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Bridgeman Accessible Website">
        <meta name="keywords" content="digital accessibility, accessible events, accessible websites, accessible documents, Bridgeman Accessible">
        <meta name="author" content="Bridgeman Accessible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= title %> - Bridgeman Accessible</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/nav.css">
        <link rel="stylesheet" type="text/css" href="css/accessibility.css">
        <% if (typeof extraStyles !== 'undefined') { %>
            <% if (Array.isArray(extraStyles)) { %>
                <% for (let style of extraStyles) { %>
                    <link rel="stylesheet" type="text/css" href="/css/<%= style %>.css">
                <% } %>
            <% } else { %>
                <link rel="stylesheet" type="text/css" href="/css/<%= extraStyles %>.css">
            <% } %>
        <% } %>
        <!-- == Third Party Scripts == -->
            <!-- -- Analytics -- -->
                <!-- Google Tag Manager (YellowPages) -->
                    <script>
                        (
                            function(w, d, s, l, i) {
                                w[l] = w[l] || [];
                                w[l].push({
                                    'gtm.start': new Date().getTime(),
                                    event: 'gtm.js'
                                });
                                var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
                                j.async = true;
                                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
                                f.parentNode.insertBefore(j, f);
                            }
                        )(window, document, 'script', 'dataLayer', 'GTM-MXV5B954');
                    </script>
                <!-- End: Google Tag Manager -->
                <!-- Matomo (Us/Internal) -->
                    <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="//analytics.bridgemanaccessible.ca/";
                                _paq.push(['setTrackerUrl', u+'matomo.php']);
                                _paq.push(['setSiteId', '1']);
                                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 -->
            <!-- -- End: Analytics -- -->
            <script src="https://kit.fontawesome.com/e4af9e378a.js" crossorigin="anonymous"></script>
        <!-- == End: Third Party Scripts == -->
        <script type="application/javascript" src="js/hamburger.js" defer></script>
        <% if (typeof extraScripts !== 'undefined') { %>
            <% if (Array.isArray(extraScripts)) { %>
                <% for (let script of extraScripts) { %>
                    <% if(typeof script === 'object') { %>
                        <% if(script.script.startsWith('http') || script.script.startsWith('https')) { %>
                            <script type="application/javascript" src="<%= script.script %>"></script>
                        <% } else { %>
                            <script type="application/javascript" src="/js/<%= script.script %>.js" <% if(script.defer) { %>defer<% } %>></script>
                        <% } %>
                    <% } else { %>
                        <% if(script.startsWith('http') || script.startsWith('https')) { %>
                            <script type="application/javascript" src="<%= script %>"></script>
                        <% } else { %>
                            <script type="application/javascript" src="/js/<%= script %>.js" defer></script>
                        <% } %>
                    <% } %>
                <% } %>
            <% } else { %>
                <script type="application/javascript" src="/js/<%= extraScripts %>.js" defer></script>
            <% } %>
        <% } %>
    </head>
    <body>
        <a href="#main-content" class="skip-link">Skip to content</a>
        <div class="content">
            <header>
                <% if(typeof header !== 'undefined') { %>
                    <%- include(header) %>
                <% } else { %>
                    <%- include('includes/header.ejs') %>
                <% } %>
            </header>
            <main role="main" id="main-content">
                <%- include(page) %>
            </main>
            <footer>
                <% if(typeof footer !== 'undefined') { %>
                    <%- include(footer) %>
                <% } else { %>
                    <%- include('includes/footer.ejs') %>
                <% } %>
            </footer>
        </div>
    </body>
</html>