{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
        <link href="{% static 'store/css/layout.css' %}" rel="stylesheet">

        <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
        <title>{% block title %}{% endblock %}</title>
        {% block style %}{% endblock %}
    </head>
    <body>
        {% include 'store/layout/header.html' %}
        {% include 'store/includes/messages.html' with messages=messages %}
        {% block body %}{% endblock %}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.js" integrity="sha512-c7SfJeKRl8g7wgL+zMGX78faYVGp+NZVQ587mRLrqeLySX/qHCQOKw/iZ5Pp64DaPjvedixWC/Fe73upnhBaRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <!-- Bootstrap Tooltip -->
        <script>
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
        </script>
        <!-- Bootstrap Popover -->
        <script>
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
            const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
        </script>
        <script src="{% static 'store/js/layout.js' %}"></script>
        {% include 'store/handlebars/layout.html' %}
        {% block script %}{% endblock %}

        <!-- Cart Offcanvas  -->
        <div style="display: none;">
            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#CartOffcanvas" aria-controls="CartOffcanvas" id="cartOffcanvasDisplayBtn">
                Button Cart Offcanvas
            </button>
        </div>
        <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="CartOffcanvas" aria-labelledby="CartOffcanvasLabel">
            <div class="offcanvas-header bg-dark text-white">
                <h5 class="offcanvas-title" id="CartOffcanvasLabel">Cart</h5>
                <button type="button" class="btn-close btn-close-white" id="cartOffcanvasCloseBtn" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" id="cartOffcanvasBody"></div>
        </div>
    </body>
</html>