<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">

        
        {% block stylesheets %}
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}
    </head>
    <body>
        {% block header %}
            <div class="header-wrap container-fluid p-0">
                <div class="header-top">
                    <div class="container ">
                        <div style="height:100%" class="row d-flex justify-content-between">
                            <div class="col d-flex align-items-center text-start"><p class=" m-0"><span class="text-white-50">Mon-Thu:</span>  9:00 AM - 5:30 PM</p></div>
                            <div class="col-6 d-flex align-items-center justify-content-center text-center">
                                <div>
                                     <p class=" m-0 d-inline text-white-50">Visit our showroom in 1234 Street Adress City Address, 1234</p>
                                     <a class=" m-0 d-inline ms-2 link-header " href="#">Contact Us </a>
                                </div>
                            </div>
                            <div class="col text-end  d-flex align-items-center justify-content-end">
                                <p class=" m-0"> Call Us: (00) 1234 5678</p>
                                <a class="ms-2" href="#"><img src="{{ asset('images/ant-design_facebook-filled.png') }}" alt=""></a>
                                <a class="ms-1" href="#"><img src="{{ asset('images/ant-design_instagram-filled.png') }}" alt=""></a>
                            </div>
                         </div>
                    </div>
                </div>

                <div class="header-bottom container">
                    <div class="row">
                        <div class="col-1">
                            <img src="{{ asset('images/Logo.png')}}" alt="" class="header-logo">
                        </div>
                        <div class="col-9 d-flex align-items-center">
                            <nav class="d-flex mw-100 justify-content-between">
                                <a href="">Laptops</a>
                                <a href="">Desktop PCs</a>
                                <a href="">Networking Devices</a>
                                <a href="">Printers & Scanners</a>
                                <a href="">PC Parts</a>
                                <a href="">All Other Products</a>
                                <a href="">Repairs</a>
                            </nav>
                        </div>
                        <div class="col-3"></div>
                    </div>
                </div>
            </div>
        {% endblock %}


        {% block body %}
        
        {% endblock %}

        {% block footer %}
            
        {% endblock %}
    </body>
</html>
