<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Font Awesome -->
    <script
      src="https://kit.fontawesome.com/f82df14a80.js"
      crossorigin="anonymous"
    ></script>

    <!-- Bootstrap bootstrap@5.2.0 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/general-styles.css" />
    <link rel="stylesheet" href="/css/dashboard-styles.css" />
    <link rel="icon" href="/images/icon.png" />
    <title>CRM Genie</title>
  </head>

  <body>
    <!--**********  NAVBAR TOP SECTION ***********-->
    <%- include ('../partials/dashboard-top')%>

  <!--**********  DASHBOARD SECTION *********-->
  <section class="container-fluid" id="dashboard">
    <div id="dashboard-container">
      <!-- LEFT DASHBOARD ICONS -->
      <!-- <div class="col-2 col-md-2" id="sidebar-container"> -->
      <div class="sidebar-container">
        <%- include('../partials/sidebar') %>
      </div>

      <!-- RIGHT DASHBOARD RESULTS -->
      <!-- <main class="dashboard-main height col-10 col-md-10 mt-3"> -->
      <main class="dashboard-main height mt-3">
        <%- include('../partials/flash') %>
        <%- body %>
      </main>
    </div>
  </section>
<%- include('../partials/footer')%>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <!-- <script src="/scripts.js" crossorigin="anonymous"></script> -->
  <script>
    let menuToggle = document.querySelector(".toggle");
    let navigation = document.querySelector(".navigation");
    menuToggle.onclick = function () {
      menuToggle.classList.toggle("active");
      navigation.classList.toggle("active");
    };

    // add active class in selected list item
    let list = document.querySelectorAll(".list");
    for (let i = 0; i < list.length; i++) {
      list[i].onclick = function () {
        let j = 0;
        while (j < list.length) {
          list[j++].className = "list";
        }
        list[i].className = "list active";
      };
    }
  </script>

</body>

</html>
