<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<title> Responsive Sidebar Menu  | CodingLab </title>-->
    <link rel="stylesheet" href="style.css">
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro</title>
</head>
<body>
    
    <form action="/cadastro" method="POST">
        <div class="sidebar">
            <div class="logo-details">
              <i class='bx bxs-bot icon'></i>
                <div class="logo_name">E-COMM</div>
                <i class='bx bx-menu' id="btn" ></i>
            </div>
            <ul class="nav-list">
              <li>
                  <i class='bx bx-search' ></i>
                 <input type="text" placeholder="Buscar...">
                 <span class="tooltip">Buscar</span>
              </li>
              <li>
                <a href="/">
                  <i class='bx bx-home'></i>
                  <span class="links_name">Homepage</span>
                </a>
                 <span class="tooltip">Homepage</span>
              </li>
              <li>
               <a href="/login">
                 <i class='bx bx-log-in' ></i>
                 <span class="links_name">Login</span>
               </a>
               <span class="tooltip">Login</span>
             </li>
             <li>
               <a href="/cadastro">
                 <i class='bx bx-user-plus' ></i>
                 <span class="links_name">Cadastro</span>
               </a>
               <span class="tooltip">Cadastro</span>
             </li>
             <!--<li class="profile">
                 <div class="profile-details">
                   <img src="profile.jpg" alt="profileImg">
                   <div class="name_job">
                     <div class="name">Prem Shahi</div>
                     <div class="job">Web designer</div>
                   </div>
                 </div>
                 <i class='bx bx-log-out' id="log_out" ></i>
             </li>-->
            </ul>
          </div>
          <section class="home-section" id="box-cadastro">
            <!--<header id="saudacao"> Página de Cadastro</header>-->
              <!--<div class="text">Homepage</div>-->
              <% if(msg != "") {  %>
                <section id="msg">
                    <p><%= msg %></p> <span id="close">&times;</span>
                </section>
              <% }  %>
          <script>
          let sidebar = document.querySelector(".sidebar");
          let closeBtn = document.querySelector("#btn");
          let searchBtn = document.querySelector(".bx-search");
        
          closeBtn.addEventListener("click", ()=>{
            sidebar.classList.toggle("open");
            menuBtnChange();//calling the function(optional)
          });
        
          searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
            sidebar.classList.toggle("open");
            menuBtnChange(); //calling the function(optional)
          });
        
          // following are the code to change sidebar button(optional)
          function menuBtnChange() {
           if(sidebar.classList.contains("open")){
             closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
           }else {
             closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
           }
          }
          </script> 
            <section class="cadastro">
                <form method="POST">
                  <!--<section class="bodybox">
                    <form class="box" method="post">
                      <img id="img-login" src="../img/icone-header.png" alt="icone em desenho da máscara f society da série Mister Robot" width="150px" height="150px">
                      <h1>Login</h1>
                      <input type="text" name="email" placeholder="email">
                      <input type="password" name="senha" placeholder="senha">
                      <input type="submit" name="" value="Login">
                    </form>-->
                  </section>
                <section class="cadbox" id="cad">
                  <img id="img-login" src="../img/icone-header.png" alt="icone em desenho da máscara f society da série Mister Robot" width="150px" height="150px">
                  <h3>cadastre-se</h3>
                  <div>
                        <input type="text" name="nome_completo" id="nome_completo" placeholder="Nome completo" required>
                    </div>
                    <div>
                        <input type="password" name="senha" id="senha" placeholder="Senha de acesso" required>
                    </div>
                    <div>
                        <input type="text" name="email" id="email" placeholder="Seu melhor e-mail" required>
                    </div>
                    <div>
                        <input type="tel" name="telefone" id="telefone" placeholder="Seu número de telefone" required>
                    </div>
                </br>
                    <button id="btn-cad" type="submit">Cadastrar</button>
                  </section>
                  </form>
            </section>
        </section>
    </form>    
    </br>
        <footer>Todos os direitos reservados para Leonardo Fleck e Frederico Lima 2021 ®</footer>
</body>
</html>