<!-- HTML omgezet naar ejs en werkend gemaakt door Sindy -->

<!DOCTYPE ejs>
<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">
  <title>Build</title>

  <link href="styles/style.css" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="./images/project_tech_logo_1.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>

<body>
  <%- include('../partials/navHeader'); %>

    <main id="BuildPage">
      <section class="BuildImg">
        <img src="./images/auditt.png" alt="" id="CarBody">
        <img src="./images/auditt.png" alt="" id="CarVelgen">
      </section>

      <section class="CarBuild">
        <h2>Building</h2>
        <figure class="CarWithButtons">
          <div class="swiper-container swiper-no-swiping" id="swiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./images/hatchback-02.png" alt="A picture of a green Audi TT">
              </div>
              <div class="swiper-slide">
                <img src="./images/suv.png" alt="A picture of a red Audi TT">
              </div>
              <div class="swiper-slide">
                <img src="./images/sportcar-02.png" alt="A picture of a blue Audi TT">
              </div>
            </div>
            <div class="swiper-button-prev" onclick="BodyKnopPrev()"></div>
            <div class="swiper-button-next" onclick="BodyKnopNext()"></div>
          </div>
        </figure>

        <figure class="CarWithButtons">
          <div class="swiper-container swiper-no-swiping" id="swiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./images/blue-icon.png" alt="A picture of a blue Audi TT">
              </div>
              <div class="swiper-slide">
                <img src="./images/red-icon.png" alt="A picture of a red Audi TT">
              </div>
              <div class="swiper-slide">
                <img src="./images/green-icon.png" alt="A picture of a green Audi TT">
              </div>
            </div>
            <div class="swiper-button-prev" onclick="VelgKnopPrev()"></div>
            <div class="swiper-button-next" onclick="VelgKnopNext()"></div>
          </div>
        </figure>

        <figure class="CarWithButtons">
          <div class="swiper-container swiper-no-swiping" id="swiper3">
            <div class="swiper-wrapper ">
              <div class="swiper-slide">
                <img src="./images/RoodKleur.png" alt="A picture of a red Audi TT">
              </div>
              <div class="swiper-slide">
                <img src="./images/GroenKleur.png" alt="A picture of a green Audi TT">
              </div>
              <div class="swiper-slide">
                <img src="./images/BlauwKleur.png" alt="A picture of a blue Audi TT">
              </div>
            </div>
            <div class="swiper-button-prev" onclick="KleurKnopPrev()"></div>
            <div class="swiper-button-next" onclick="KleurKnopNext()"></div>
          </div>
        </figure>

        <!-- <button class="OpslaanKnop" onclick="ClickFunction()">Opslaan</button> -->
        <button class="OpslaanKnop" onclick="navigateToResults()">Opslaan</button>

      </section>


    </main>

    <%- include('../partials/navFooter'); %>
      <script src="./scripts/script.js"></script>
      <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
      <script>
        window.onload = build
      </script>
</body>
