{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>AdFusion - Where creativity meets innovation.</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="keywords" />
    <meta content="" name="description" />

    <!-- Favicon -->
    {% comment %} <link href="{% static 'img/useradfusion.png' %}" rel="icon" /> {% endcomment %}

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500&family=Jost:wght@500;600;700&display=swap" rel="stylesheet" />

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Libraries Stylesheet -->
    <link href="{% static 'lib/animate/animate.min.css' %}" rel="stylesheet" />
    <link href="{% static 'lib/owlcarousel/assets/owl.carousel.min.css' %}" rel="stylesheet" />
    <link href="{% static 'lib/lightbox/css/lightbox.min.css' %}" rel="stylesheet" />

    <!-- Customized Bootstrap Stylesheet -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" />

    <!-- Template Stylesheet -->
    <link href="{% static 'css/style.css' %}" rel="stylesheet" />
  </head>

  <body>
    <div class="container-xxl bg-white p-0">
      <!-- Spinner Start -->
      <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <!-- Spinner End -->

      <!-- Navbar & Hero Start -->
      <div class="container-xxl position-relative p-0 ">
        <nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
          {% comment %} <a href="" class="navbar-brand p-0 "><img src="{% static "img/useradfusion.png" %}" height="200px" width="200px" alt="logo"></a> {% endcomment %}
          <a href="" class="navbar-brand p-0 "><h1>AdFusion</h1></a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" data-bs-animation="false"><span class="fa fa-bars"></span></button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav mx-auto py-0">
              <a href="{% url 'indexview' %}" class="nav-item nav-link active">Home</a>

              <div class="nav-item ">
                <a href="{% url "category_list" %}" class="nav-link " >Category</a>
              </div>

              <a href="{% url "adtemplate_list" %}" class="nav-item nav-link">Template</a>
              <a href="{% url 'contactview' %}" class="nav-item nav-link">Contact</a>
            </div>

            <form class="d-flex" method="GET"  style="margin-right: 100px;" action="{% url 'search_results' %}">
              <input class="form-control me-2" type="search" name="q" placeholder="Search Templates" aria-label="Search" required>
              <button class="btn btn-outline-secondary" type="submit">Search</button>
            </form>

            
            <div class="navbar-nav">
              <a class="nav-item nav-link">Welcome, {{ request.user }}</a>
            </div>

            <div class="navbar-nav">
              {% if request.user.is_authenticated %}
                <!-- Profile Button -->
                <a href="{% url 'profile' %}" class="btn btn-secondary rounded-pill py-2 px-4 ms-3 d-none d-lg-block">Profile</a>

                <!-- Logout Button -->
                <a href="{% url 'logoutview' %}" class="btn btn-secondary rounded-pill py-2 px-4 ms-3 d-none d-lg-block">Logout</a>
              {% else %}
                <a href="{% url 'loginview' %}" class="btn btn-primary rounded-pill py-2 px-4 ms-3 d-none d-lg-block">Login</a>
              {% endif %}
            </div>
          </div>
        </nav>
      </div>
    </div>
        {% block content %}

        {% endblock %}
      

      <!-- Footer Start -->
      <div class="container-fluid bg-primary text-light footer wow fadeIn" data-wow-delay="0.1s">
        <div class="container py-5 px-lg-5">
          <div class="row g-5">
            <div class="col-md-6 col-lg-3">
              <p class="section-title text-white h5 mb-4">
                Contact Us<span></span>
              </p>
              <p>
                <i class="fa fa-map-marker-alt me-3"></i>Ahmedabad, Gujarat
              </p>
              <p>
                <i class="fa fa-phone-alt me-3"></i>+91 123123123
              </p>
              <p>
                <i class="fa fa-envelope me-3"></i>adfusion9@gmail.com
              </p>
            </div>

            {% if request.user.is_authenticated %}
              <div class="col-md-6 col-lg-3">
                <p class="section-title text-white h5 mb-4">
                  Feedback<span></span>
                </p>
                <p>"Share your thoughts and experiences with us. Your feedback helps us improve!"</p>

                <form method="POST" action="{% url 'submit_feedback' %}">
                  {% csrf_token %}
                  <div class="position-relative w-100 mt-3">
                    <input name="message" class="form-control border-0 rounded-pill w-100 ps-4 pe-5" type="text" placeholder="Your Feedback" style="height: 48px;" required />
                    <button type="submit" class="btn shadow-none position-absolute top-0 end-0 mt-1 me-2"><i class="fa fa-paper-plane text-primary fs-4"></i></button>
                  </div>
                </form>
              </div>
            {% endif %}
          </div>
        </div>
        <div class="container px-lg-5 text-center">
          <div class="copyright">
            <div class="row">
              <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                &copy; <a class="border-bottom text-light" href="#">AdFusion</a>, All Rights Reserved.
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer End -->

      <!-- Back to Top -->
      <a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
      

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{% static 'lib/wow/wow.min.js' %}"></script>
    <script src="{% static 'lib/easing/easing.min.js' %}"></script>
    <script src="{% static 'lib/waypoints/waypoints.min.js' %}"></script>
    <script src="{% static 'lib/counterup/counterup.min.js' %}"></script>
    <script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>
    <script src="{% static 'lib/isotope/isotope.pkgd.min.js' %}"></script>
    <script src="{% static 'lib/lightbox/js/lightbox.min.js' %}"></script>

    <!-- Template Javascript -->
    <script src="{% static 'js/main.js' %}"></script>
  </body>
</html>
