<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
<head>
  <meta charset="UTF-8"/>
  <title>{{ title }}</title>
  <base href="{{ base }}"/>
  {% if description %}
    <meta name="description" content="{{ description }}"/>
  {% endif %}
  {% if keywords %}
    <meta name="keywords" content="{{ keywords }}"/>
  {% endif %}
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <link href="{{ bootstrap }}" rel="stylesheet" media="screen"/>
  <link href="{{ icons }}" rel="stylesheet" type="text/css"/>
  <link href="{{ stylesheet }}" rel="stylesheet" type="text/css"/>
  <script src="{{ jquery }}" type="text/javascript"></script>
  <script type="text/javascript" src="view/javascript/jquery/datetimepicker/moment.min.js"></script>
  <script type="text/javascript" src="view/javascript/jquery/datetimepicker/moment-with-locales.min.js"></script>
  <script type="text/javascript" src="view/javascript/jquery/datetimepicker/daterangepicker.js"></script>
  <link href="view/javascript/jquery/datetimepicker/daterangepicker.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="view/javascript/common.js"></script>
  {% for style in styles %}
    <link type="text/css" href="{{ style.href }}" rel="{{ style.rel }}" media="{{ style.media }}"/>
  {% endfor %}
  {% for link in links %}
    <link href="{{ link.href }}" rel="{{ link.rel }}"/>
  {% endfor %}
  {% for script in scripts %}
    <script type="text/javascript" src="{{ script.href }}"></script>
  {% endfor %}
</head>
<body>
<div id="container">
  <div id="alert" class="toast-container position-fixed top-0 end-0 p-3"></div>
  <header id="header" class="navbar navbar-expand navbar-light bg-light">
    <div class="container-fluid">
      <a href="{{ home }}" class="navbar-brand d-none d-lg-block header-logo"><img src="view/image/logo.png" alt="{{ heading_title }}" class="img-fluid" title="{{ heading_title }}"/></a>
      {% if logged %}
        <button type="button" id="button-menu" class="btn btn-link d-inline-block d-lg-none"><i class="fa-solid fa-bars"></i></button>
        <ul class="nav navbar-nav">
          <li id="nav-notification" class="nav-item dropdown">
            <a href="#" data-bs-toggle="dropdown" class="nav-link dropdown-toggle"><i class="fa-regular fa-bell"></i>{% if notification_total %} <span class="badge bg-danger">{{ notification_total }}</span>{% endif %}</a>
            <div class="dropdown-menu dropdown-menu-end">
              {% if notifications %}
                {% for notification in notifications %}
                  <a href="{{ notification.href }}" data-bs-toggle="modal" class="dropdown-item">{{ notification.title }}</a>
                {% endfor %}
                <a href="{{ notification_all }}" class="dropdown-item text-center text-primary">{{ text_notification_all }}</a>
              {% else %}
                <span class="dropdown-item text-center">{{ text_no_results }}</span>
              {% endif %}
            </div>
          </li>
          <li id="nav-language" class="nav-item dropdown">{{ language }}</li>
          <li id="nav-profile" class="nav-item dropdown">
            <a href="#" data-bs-toggle="dropdown" class="nav-link dropdown-toggle"><img src="{{ image }}" alt="{{ firstname }} {{ lastname }}" title="{{ username }}" class="rounded-circle"/><span class="d-none d-md-inline d-lg-inline">&nbsp;&nbsp;&nbsp;{{ firstname }} {{ lastname }} <i class="fa-solid fa-caret-down fa-fw"></i></span></a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a href="{{ profile }}" class="dropdown-item"><i class="fa-solid fa-user-circle fa-fw"></i> {{ text_profile }}</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><h6 class="dropdown-header">{{ text_store }}</h6></li>
              {% for store in stores %}
                <a href="{{ store.href }}" target="_blank" class="dropdown-item">{{ store.name }}</a>
              {% endfor %}
              <li><hr class="dropdown-divider"></li>
              <li><h6 class="dropdown-header">{{ text_help }}</h6></li>
              <li><a href="https://www.opencart.cn" target="_blank" class="dropdown-item"><i class="fa-brands fa-opencart fa-fw"></i> {{ text_homepage }}</a></li>
              <li><a href="http://docs.opencart.com" target="_blank" class="dropdown-item"><i class="fa-solid fa-file fa-fw"></i> {{ text_documentation }}</a></li>
              <li><a href="https://forum.opencart.com" target="_blank" class="dropdown-item"><i class="fa-solid fa-comments fa-fw"></i> {{ text_support }}</a></li>
            </ul>
          </li>
          <li id="nav-logout" class="nav-item"><a href="{{ logout }}" class="nav-link"><i class="fa-solid fa-sign-out"></i> <span class="d-none d-md-inline">{{ text_logout }}</span></a></li>
        </ul>
      {% endif %}
    </div>
  </header>
