{{define "index"}}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--=============== FAVICON ===============-->
    <link rel="shortcut icon" href="/public/assets/img/toutaloue-logo.jpg" type="image/x-icon" />

    <!--=============== REMIXICONS ===============-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css"
    />

    <title>{{.Title}} - Toutaloue</title>

    <!--=============== SWIPER CSS ===============-->
    <link rel="stylesheet" href="/public/assets/css/swiper-bundle.min.css" />

    <!--=============== CSS ===============-->
    <link rel="stylesheet" href="/public/assets/css/style.css" />

    <!--=============== HTMX ===============-->
    <script src="https://unpkg.com/htmx.org@2.0.8"></script>

    <title>Toutaloue | {{.Title}}</title>
  </head>

  <body>
    <!--==================== HEADER ====================-->
    <header class="header">
      <nav class="nav container">
        <!--<a href="/" class="nav__logo">Toutaloué</a>-->
        <a href="/" class="nav__logo"><img src="/public/assets/img/toutaloue-logo.jpg" alt="logo"></a>

        <div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="dropdownagency__item">
              <div class="dropdown__button">
                Nos agences
                <img
                  src="/public/assets/img/arrow-dropdown.png"
                  alt="image"
                  class="dropdown__arrow"
                />
              </div>
              <div class="dropdownagency__container">
                <div class="dropdownagency__content">
                  <div class="dropdown__group">
                    <span class="dropdown__title">Zones géographiques</span>
                    <ul class="dropdown__list">
                      <li>
                        <a
                          hx-get="/songon"
                          hx-target="#view"
                          hx-push-url="true"
                          class="dropdown__link"
                          onclick="zoneSongon()"
                          >Songon</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Yopougon</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Dabou</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>

            <li class="dropdown__item">
              <div class="dropdown__button">
                Nos produits
                <img
                  src="/public/assets/img/arrow-dropdown.png"
                  alt="image"
                  class="dropdown__arrow"
                />
              </div>
              <div class="dropdown__container">
                <div class="dropdown__content">

                  <div class="dropdown__group">
                    <div class="dropdown__icon">
                      <img
                        src="/public/assets/img/tools/terres-agricoles.jpg"
                        alt="image"
                      />
                    </div>
                    <span class="dropdown__title"
                      >Terres agricoles</span
                    >
                    <ul class="dropdown__list">
                      <li>
                        <a href="#" class="dropdown__link">Terrain Nord</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Terrain Sud</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Terrain Ouest</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Terrain Est</a
                        >
                      </li>
                    </ul>
                  </div>
                  
                  <div class="dropdown__group">
                    <div class="dropdown__icon">
                      <img
                        src="/public/assets/img/tools/mat-construction.jpg"
                        alt="image"
                      />
                    </div>
                    <span class="dropdown__title"
                      >Matériels de construction</span
                    >
                    <ul class="dropdown__list">
                      <li>
                        <a href="#" class="dropdown__link">Pelleteuses</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Marteaux-piqueurs</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Bennes à béton</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Goulottes à matériaux</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Bétonnières</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Burineurs</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Débroussailleuses</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Échafaudage</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Échelle</a>
                      </li>
                    </ul>
                  </div>

                  <div class="dropdown__group">
                    <div class="dropdown__icon">
                      <img
                        src="/public/assets/img/tools/electromenagers.avif"
                        alt="image"
                      />
                    </div>
                    <span class="dropdown__title">Électroménagers</span>
                    <ul class="dropdown__list">
                      <li>
                        <a href="#" class="dropdown__link"
                          >Robots aspirateurs laveur</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Télévisions 4K UHD</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Réfrigérateurs multi portes</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Laves linges séchant</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Sèches linges</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Fours encastrables</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Expressos Broyeurs</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Robots pâtissiers</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Cuisinières à cuisson</a
                        >
                      </li>
                    </ul>
                  </div>

                  <div class="dropdown__group">
                    <div class="dropdown__icon">
                      <img
                        src="/public/assets/img/tools/vehicules.jpg"
                        alt="image"
                      />
                    </div>
                    <span class="dropdown__title">Véhicules</span>
                    <ul class="dropdown__list">
                      <li>
                        <a href="#" class="dropdown__link"
                          >Voitures électriques</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Utilitaires</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Camions bennes</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Motos</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Chariots élévateurs</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Camions</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Bateaux moteurs</a>
                      </li>
                    </ul>
                  </div>

                  <div class="dropdown__group">
                    <div class="dropdown__icon">
                      <img
                        src="/public/assets/img/tools/salles-evenementielles.jpg"
                        alt="image"
                      />
                    </div>
                    <span class="dropdown__title">Salles événementielles</span>
                    <ul class="dropdown__list">
                      <li>
                        <a href="#" class="dropdown__link"
                          >Vêtements d'événementiel</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Barres son</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Chaises</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Vaisselles</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Lots de lumières</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Tables personnalisées</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Bâches sur mesure</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Groupes électrogènes</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Lieux privatisés</a>
                      </li>
                    </ul>
                  </div>

                  <div class="dropdown__group">
                    <div class="dropdown__icon">
                      <img
                        src="/public/assets/img/tools/logements-meubles.jpg"
                        alt="image"
                      />
                    </div>
                    <span class="dropdown__title"
                      >Logements meublés</span
                    >
                    <ul class="dropdown__list">
                      <li>
                        <a href="#" class="dropdown__link">Appartement 3 pièces</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Appartement 2 pièces</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Studio</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link"
                          >Appartement 4 pièces</a
                        >
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Appartement 5 pièces</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Appartement duplex 3 pièces</a>
                      </li>
                      <li>
                        <a href="#" class="dropdown__link">Appartement duplex 4 pièces</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>

            <li>
              <a 
                hx-get="/deposer-annonce" 
                hx-target="#view" 
                hx-push-url="true" 
                class="nav__link slim-button" 
                onclick="deposerAnnonce()">
                Déposer une annonce
              </a>
            </li>
          </ul>

          <!-- Close button -->
          <div class="nav__close" id="nav-close">
            <i class="ri-close-large-line"></i>
          </div>
        </div>

        <div class="nav__actions">
          <!-- Login button -->
          <i class="ri-user-line login-button" id="login-button"></i>
        </div>

        <!-- Toggle button -->
        <div class="nav__toggle" id="nav-toggle">
          <i class="ri-menu-5-line"></i>
        </div>
      </nav>
    </header>

    <!--==================== LOGIN ====================-->
    <div class="login grid" id="login-content">
      <form action="" class="login__form grid">
        <h3 class="login__title">Me connecter</h3>
        <div class="login__group grid">
          <div>
            <label for="login-email" class="login__label">Email</label>
            <input
              type="email"
              placeholder="Entrez votre email"
              id="login-email"
              class="login__input"
            />
          </div>

          <div>
            <label for="login-pass" class="login__label">Mot de passe</label>
            <input
              type="password"
              placeholder="Entrez votre mot de passe"
              id="login-pass"
              class="login__input"
            />
          </div>
        </div>
        <div>
          <span class="login__signup">
            Vous n'avez pas de mot de passe ? <a href="#">S'enregistrer</a>
          </span>
          <a href="#" class="login__forgot"> Mot de passe oublié </a>
          <button type="submit" class="login__button button">
            Se connecter
          </button>
        </div>
      </form>
      <i class="ri-close-line login__close" id="login-close"></i>
    </div>

    <!--==================== BOOKING BY PHONE MODAL ====================-->
    <div class="modal grid" id="modal-content">
      <form action="" class="modal__form grid">
        <h3 class="modal__title">Bienvenue chez Toutaloué</h3>
        <p>Nous contacter au 01 84 21 13 96</p>
      </form>
      <i class="ri-close-line modal__close" id="modal-close"></i>
    </div>

    <!-- The container where HTMX will swap content -->
    <!--==================== MAIN ====================-->
    <main class="main" id="view">
      <!-- Server-side conditional for Full Page Load -->
      {{if eq .Page "home"}} {{template "home" .}} {{end}} {{if eq .Page
      "explore"}} {{template "explore" .}} {{end}} {{if eq .Page "songon"}}
      {{template "songon" .}} {{end}} {{if eq .Page "contact"}} {{template
      "contact" .}} {{end}}
      {{if eq .Page "deposer-annonce"}}
      {{template "deposer-annonce" .}} {{end}}
      {{if eq .Page "inscription"}}
      {{template "inscription" .}} {{end}}
    </main>

    <!--=============== FOOTER ===============-->
    <footer class="footer">
      <div class="footer__container container grid">
        <div>
          <a href="#" class="footer__logo">Toutaloué</a>
          <p class="footer__description">
            Trouve et explore les <br />
            meilleurs produits
          </p>
        </div>
        <div class="footer__data grid">
          <div>
            <h3 class="footer__title">À propos</h3>
            <ul class="footer__links">
              <li>
                <a href="#" class="footer__link">Récompenses</a>
              </li>
              <li>
                <a href="#" class="footer__link">FAQs</a>
              </li>
              <li>
                <a href="#" class="footer__link"
                  >Politique de confidentialité</a
                >
              </li>
              <li>
                <a href="#" class="footer__link">Conditions d'utilisation</a>
              </li>
            </ul>
          </div>

          <div>
            <h3 class="footer__title">Entreprise</h3>
            <ul class="footer__links">
              <li>
                <a href="#" class="footer__link">Blogs</a>
              </li>
              <li>
                <a href="#" class="footer__link">Communauté</a>
              </li>
              <li>
                <a href="#" class="footer__link">Notre équipe</a>
              </li>
              <li>
                <a href="#" class="footer__link">Aide</a>
              </li>
            </ul>
          </div>

          <div>
            <h3 class="footer__title">Contact</h3>
            <ul class="footer__links">
              <li>
                <address class="footer__info">
                  BASSAM MOOSSOU <br />
                  RÉSIDENTIEL LOT 393
                </address>
              </li>
              <li>
                <address class="footer__info">
                  contact@toutaloue.com <br />
                  0987-654-321
                </address>
              </li>
            </ul>
          </div>

          <div>
            <h3 class="footer__title">Social</h3>
            <div class="footer__social">
              <a
                href="https://www.facebook.com/"
                target="_blank"
                class="footer__social-link"
              >
                <i class="ri-facebook-circle-line"></i>
              </a>
              <a
                href="https://www.instagram.com/"
                target="_blank"
                class="footer__social-link"
              >
                <i class="ri-instagram-line"></i>
              </a>
              <a
                href="https://twitter.com/"
                target="_blank"
                class="footer__social-link"
              >
                <i class="ri-twitter-x-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <span class="footer__copy"> &#169; Tous Droits Réservés par JKI </span>
    </footer>

    <!--=============== SCROLLUP ===============-->
    <a href="#" class="scrollup" id="scroll-up">
      <i class="ri-arrow-up-line"></i>
    </a>

    <!--=============== SCROLLREVEAL JS ===============-->
    <script src="/public/assets/js/scrollreveal.min.js"></script>

    <!--=============== SWIPER JS ===============-->
    <script src="/public/assets/js/swiper-bundle.min.js"></script>

    <!--=============== MAIN JS ===============-->
    <script src="/public/assets/js/main.js"></script>
  </body>
</html>
{{end}}
