{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>{% block title %}{% endblock %}</title>

  <!-- Additional CSS Files -->
  <link rel="stylesheet" type="text/css" href="{% static 'client/css/bootstrap.min.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'client/css/font-awesome.css' %}" />
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"
    rel="stylesheet" />

  <link href="{% static 'client/css/toastr.min.css' %}" rel="stylesheet" />

  <link rel="stylesheet" href="{% static 'client/css/templatemo-hexashop.css' %}" />

  <link rel="stylesheet" href="{% static 'client/css/owl-carousel.css' %}" />

  <link rel="stylesheet" href="{% static 'client/css/lightbox.css' %}" />
  <link rel="stylesheet" href="{% static 'common/css/sweetalert2.min.css' %}" />


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
    integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous" />
  <!-- Tempus Dominus Styles -->
  <link rel="stylesheet" href="{% static 'client/css/tempusdominus-bootstrap-4.min.css' %}" />
  <!-- <link
    href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css"
    rel="stylesheet"> -->

  <link rel="stylesheet" href="{% static 'client/css/dataTables.min.css' %}" />
  <link rel="stylesheet" href="{% static 'client/css/auction.css' %}" />
  {% block css %}

  {% endblock %}
</head>

<body>
  <!-- ***** Preloader Start ***** -->
  <div id="preloader">
    <div class="jumper">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- ***** Preloader End ***** -->

  <!-- header -->
  {% include 'includes/client/header.html' %}

  <!-- for messages -->
  {% include 'includes/common/notification.html' %}


  <!-- all contents here -->
  {% block content %}

  {% endblock %}
  <!-- all contents end -->


  {% include 'includes/client/footer.html' %}


  <!-- include modals here -->
  {% block modal %}

  {% endblock %}
  <!-- modal end -->



  <!-- jQuery -->

  <script src="{% static 'client/js/jquery.min.js' %}"></script>
  <script src="{% static 'client/js/moment.min.js' %}"></script>


  <!-- Bootstrap -->
  <script src="{% static 'client/js/bootstrap.min.js' %}"></script>

  <!-- Popperjs -->
  <script src="{% static 'client/js/popper.js' %}"></script>

  <!-- Plugins -->
  <script src="{% static 'client/js/toastr.min.js' %}"></script>
  <script src="{% static 'client/js/owl-carousel.js' %}"></script>
  <script src="{% static 'client/js/accordions.js' %}"></script>
  <script src="{% static 'client/js/scrollreveal.min.js' %}"></script>
  <script src="{% static 'client/js/waypoints.min.js' %}"></script>
  <script src="{% static 'client/js/jquery.counterup.min.js' %}"></script>
  <script src="{% static 'client/js/imgfix.min.js' %}"></script>
  <script src="{% static 'client/js/slick.js' %}"></script>
  <script src="{% static 'client/js/lightbox.js' %}"></script>
  <script src="{% static 'client/js/isotope.js' %}"></script>
  <script src="{% static 'client/js/dataTables.min.js' %}"></script>
  <script src="{% static 'client/js/dataTables.responsive.js' %}"></script>
  <script src="{% static 'client/js/js.cookie.min.js' %}"></script>
  <script src="https://cdn.tiny.cloud/1/8mi4jqf4ibau77s64pib2osa9gu71r0xtmpszazjn5h9ab4k/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
  <script src="{% static 'common/js/sweetalert2.min.js' %}"></script>
  <!-- Tempus Dominus JavaScript -->
  <script src="{% static 'client/js/tempusdominus-bootstrap-4.min.js' %}"></script>

  <!-- custom form handling: for update/display form data and get data on form on tab click-->
  <script src="{% static 'client/js/custom.js' %}"></script>
  <script src="{% static 'client/js/form-handling.js' %}"></script>
  <script src="{% static 'common/js/auction.js' %}"></script>


  <script>
    $(function () {
      var selectedClass = '';
      $('p').click(function () {
        selectedClass = $(this).attr('data-rel');
        $('#portfolio').fadeTo(50, 0.1);
        $('#portfolio div')
          .not('.' + selectedClass)
          .fadeOut();
        setTimeout(function () {
          $('.' + selectedClass).fadeIn();
          $('#portfolio').fadeTo(50, 1);
        }, 500);
      });
    });
  </script>


  {% block js %} {% endblock %}

  <script>
    const csrftoken = Cookies.get('csrftoken');
    document.addEventListener('DOMContentLoaded', (event) => {
      // DOM loaded
      console.log('domready...');
      const searchInput = document.getElementById('search');
      const searchSubmit = document.getElementById('search-submit');

      const searchForm = document.getElementById('searchItem');

      searchForm.addEventListener('submit', function (event) {
        event.preventDefault();

        const searchQuery = searchInput.value.trim();
        if (searchQuery) {
          const searchUrl = `/search/?query=${encodeURIComponent(searchQuery)}`;
          window.location.href = searchUrl; // Redirect to the search URL
          searchInput.value = ''; // Clear the input field
        }
      });



      searchInput.addEventListener('keypress', function (event) {
        if (event.key === 'Enter') {

          event.preventDefault();
          searchSubmit.click();
        }
      });
      {% block domready %}

      {% endblock %}
    });
  </script>
</body>

</html>