{% import "pilotes/_macro_pilotes.html" as pilote with context %}
{% import "decks/_macro_decks.html"     as deck   with context %}
{% import "matchs/_macro_matchs.html"   as match  with context %}

{% macro separateur() -%}
<div class="col-6 ms-auto me-auto">
    <div style="clear:both;"></div>
    <div class="w-100 border-bottom border-secondary border-opacity-50 border-1 mt-2"></div>
</div>
{%- endmacro %}

<!DOCTYPE html>
<html lang="fr">

<head>
    <!-- Data Crawling -->
    <meta name="robots" content="all">
    <!-- Preload -->
    {% block preload %}
    <link rel="stylesheet preload" href="{{ url_for('static', filename='css/header.css') }}" as="style">
    <link rel="stylesheet preload" href="{{ url_for('static', filename='css/body.css') }}" as="style">
    <link rel="stylesheet preload" href="{{ url_for('static', filename='css/footer.css') }}" as="style">
	<link rel="stylesheet preload" href="{{ url_for('static', filename='css/fonts.css') }}" as="style">
    <!-- Sublevel Dropdown Menu -->
    <link rel="stylesheet preload" href="{{ url_for('static', filename='css/dropdown_menu.css') }}" as="style">
    {% endblock %}
    <!-- OG handling -->
    <meta property="og:title" content="{{ title() }}" />
    {% if lang == "fr" %}
    <meta name="description" content="Ressources stratégiques pour le Duel Commander">
    <meta property="og:description"
        content="{{ og_description|default(self.ogdesc()) }}" />
    {% elif lang == "en" %}
    <meta name="description" content="Strategical resources for Duel Commander">
    <meta property="og:description"
        content="{{ og_description|default('Strategical resources for Duel Commander') }}" />
    {% endif %}
    <meta property="og:image" content="{{ og_image|default(url_for('static', filename='img/codex.jpg')) }}" />
    <meta property="og:image:url" content="{{ og_image|default(url_for('static', filename='img/codex.jpg')) }}" />
    {% if og_image_dimensions %}
    <meta property="og:image:width" content="{{ og_image_dimensions[0] }}" />
    <meta property="og:image:height" content="{{ og_image_dimensions[1] }}" />
    {% endif %}
    <!-- General Purpose tags -->
    <meta charset="UTF-8" />
    <meta name="keywords" content="Magic: the Gathering, MtG, Duel Commander, Commander, Duel, EDH">
    <!-- Icon -->
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
    <link rel="icon" href="{{ url_for('static', filename='img/icons/codex.svg') }}">
    <!-- Style Sheets -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Title -->
    <title>{{ title() }}</title>
    <!-- Boostrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <!-- Sublevel Dropdown Menu -->
    <style type="css">
        /* ============ desktop view ============ */
        @media all and (min-width: 992px) {

            .dropdown-menu li{
                position: relative;
            }
            .dropdown-menu .submenu{
                display: none;
                position: absolute;
                left:100%; top:-7px;
            }
            .dropdown-menu .submenu-left{
                right:100%; left:auto;
            }

            .dropdown-menu > li:hover{ background-color: #f1f1f1 }
            .dropdown-menu > li:hover > .submenu{
                display: block;
            }
        }
        /* ============ desktop view .end// ============ */

        /* ============ small devices ============ */
        @media (max-width: 991px) {

            .dropdown-menu .dropdown-menu{
                    margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
            }

        }
        /* ============ small devices .end// ============ */
    </style>
    <script type="text/text/javascript">
        //	window.addEventListener("resize", function() {
        //		"use strict"; window.location.reload();
        //	});
        document.addEventListener("DOMContentLoaded", function(){
            /////// Prevent closing from click inside dropdown
            document.querySelectorAll('.dropdown-menu').forEach(function(element){
                element.addEventListener('click', function (e) {
                  e.stopPropagation();
                });
            })

            // make it as accordion for smaller screens
            if (window.innerWidth < 992) {
                // close all inner dropdowns when parent is closed
                document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
                    everydropdown.addEventListener('hidden.bs.dropdown', function () {
                        // after dropdown is hidden, then find all submenus
                          this.querySelectorAll('.submenu').forEach(function(everysubmenu){
                            // hide every submenu as well
                            everysubmenu.style.display = 'none';
                          });
                    })
                });

                document.querySelectorAll('.dropdown-menu a').forEach(function(element){
                    element.addEventListener('click', function (e) {

                        let nextEl = this.nextElementSibling;
                        if(nextEl && nextEl.classList.contains('submenu')) {
                            // prevent opening link if link needs to open dropdown
                            e.preventDefault();
                            console.log(nextEl);
                            if(nextEl.style.display == 'block'){
                                nextEl.style.display = 'none';
                            } else {
                                nextEl.style.display = 'block';
                            }

                        }
                    });
                })
            }
            // end if innerWidth
        });
        // DOMContentLoaded  end
    </script>
</head>

<body>
    <!-- Menu -->
    {% include "menu/menu.html" %}
    <!-- Fin Menu -->

    {% block banner %}{% endblock %}

    {% block article %}
	<article class="col-8 ms-auto me-auto my-4">
		{% block content %}{% endblock %}
	</article>
	{% endblock %}

	<footer class="d-block bg-light mt-6 w-100">
		{% block footer %}
		<nav role="navigation" class="text-reset" style="background-color: #e3e7e9 !important;">
			{{ prev() }}
			{{ top() }}
			{{ next() }}
		</nav>
        {% endblock %}
        <div class="d-flex flex-row justify-content-around align-items-center py-3" style="background-color: #99A5C5 !important;width:100%">
            <p class="">
            	<strong>Barrin's Codex</strong> est un contenu de fan non officiel
            	<br>autorisé dans le cadre de la Politique des contenus de fans.
            	<br>Ni approuvé, ni promu par
                {{ external("https://magic.wizards.com/en", "Wizards of the Coast", _class="text-reset") }}.
            </p>
            <p class="mb-1">
            	Certaines parties des matériaux utilisés sont la propriété de Wizards of the Coast.
            	<br>© {{ external("https://magic.wizards.com/en", "Wizards of the Coast", _class="text-reset") }} LLC.
                <br>Version actuelle :
                <a href="https://pypi.org/project/barrins-codex/{{ version }}" class="text-reset" target="_blank" rel="noreferrer">{{ version }}</a>
            </p>
        </div>
        <div class="ms-auto me-auto py-2 d-block" style="background-color: #e3e7e9 !important;"><p>
            Si vous souhaitez nous faire part d'un retour, n'hésitez pas à utiliser le formulaire suivant : {{ external("https://forms.gle/Up6fSZauNpXJHZGM8", "Formulaire de contact") }}
        </p></div>
	</footer>
</body>
<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</html>
