<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{ title }}</title>
  <base href="{{ base }}"/>
  {% if description %}
    <meta name="description" content="{{ description }}"/>
  {% endif %}
  {% if keywords %}
    <meta name="keywords" content="{{ keywords }}"/>
  {% endif %}
  <script src="{{ jquery }}" type="text/javascript"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment.min.js"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment-with-locales.min.js"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/daterangepicker.js"></script>
  <link href="catalog/view/javascript/jquery/datetimepicker/daterangepicker.css" rel="stylesheet" type="text/css"/>
  <script src="catalog/view/javascript/common.js" type="text/javascript"></script>
  {% for style in styles %}
    <link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}"/>
  {% endfor %}
  {% for script in scripts %}
    <script src="{{ script.href }}" type="text/javascript"></script>
  {% endfor %}
  {% for link in links %}
    <link href="{{ link.href }}" rel="{{ link.rel }}"/>
  {% endfor %}
  {% for analytic in analytics %}
    {{ analytic }}
  {% endfor %}

  <!-- Stylesheets -->
	<link rel="stylesheet" type="text/css" href="catalog/view/custom_assets/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="catalog/view/custom_assets/css/all.min.css">
	<link rel="stylesheet" type="text/css" href="catalog/view/custom_assets/css/swiper-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="catalog/view/custom_assets/css/lightgallery-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="catalog/view/custom_assets/css/main.css">

	<!-- Favicon -->
	<link rel="icon" type="image/icon" href="catalog/view/custom_assets/images/header_logo.svg"/>

  <title>Alvies</title>
</head>
<body>
<div id="alert" class="toast-container position-fixed top-0 end-0 p-3"></div>

    <!-- Header Top Announcement Bar -->
    <div class="header-top-bar">
        <div class="container">
            <div class="header-top-inner">
                <span class="header-top-item header-top-left">Join Our Reward Club</span>
                <span class="header-top-item header-top-center gold_color">Great Deals Upto 60% Off!</span>
                <span class="header-top-item header-top-right">Free Shipping Over 50£</span>
            </div>
        </div>
    </div>

    <!-- Main Navbar -->
    <nav class="navbar navbar-expand-lg header-navbar py-3">
        <div class="container">
            <a class="navbar-brand header-logo mb-0" href="{{ home }}">
                <img src="catalog/view/custom_assets/images/header_logo.svg" alt="ALVIES London" class="logo">
            </a>

            <button class="navbar-toggler header-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNavbar">
                <ul class="navbar-nav header-nav mx-auto mb-2 mb-lg-0">
                    {% for category in categories %}
                        {% if category.children %}
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle"
                                    href="{{ category.href }}"
                                    id="cat{{ loop.index }}"
                                    role="button"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    {{ category.name }}
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="cat{{ loop.index }}">
                                    {% for child in category.children %}
                                        <li><a class="dropdown-item" href="{{ child.href }}">{{ child.name }}</a></li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a class="nav-link" href="{{ category.href }}">{{ category.name }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ contact }}">Contact</a>
                    </li>
                </ul>

                <div class="nav-icons d-flex align-items-center gap-3">
                    <div class="dropdown">
                      <a href="{{ account }}"
                        class="dropdown-toggle header-icon d-flex align-items-center"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="{{ text_account }}">
                          <img src="catalog/view/custom_assets/images/user.svg" alt="Account">
                      </a>
                      <ul class="dropdown-menu dropdown-menu-end">
                          {% if not logged %}
                              <li><a href="{{ register }}" class="dropdown-item">{{ text_register }}</a></li>
                              <li><a href="{{ login }}" class="dropdown-item">{{ text_login }}</a></li>
                          {% else %}
                              <li><a href="{{ account }}" class="dropdown-item">{{ text_account }}</a></li>
                              <li><a href="{{ logout }}" class="dropdown-item">{{ text_logout }}</a></li>
                          {% endif %}
                      </ul>
                    </div>
                    <a href="index.php?route=product/search" class="header-icon" aria-label="Search">
                        <img src="catalog/view/custom_assets/images/search.svg" alt="Search">
                    </a>
                    {{ cart }}
                </div>
            </div>
        </div>
    </nav>
<main>
