<!DOCTYPE html>
<html lang="en">
<head>
    <%- include ('../partials/head') -%>
    <script type="text/javascript" src="/src/js/loginUtilities.js"></script>
    <script type="text/javascript" src="/src/js/joinUtilities.js"></script>
    <link rel="stylesheet" type="text/css" href="/src/css/generalStyle.css">
</head>
<body>

<header>
    <%- include ('../partials/header') -%>
</header>

<main>
  <div class="jumbotron jumbotron-fluid my-0">
    <div class="container mt-1">
      <div class="text-center">
        <svg width="200" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.00446 87.51195"><defs><style>.cls-1{fill:#4a91f2;}.cls-2{fill:#2136ce;}.cls-3{fill:#4bc9ef;}.cls-4{fill:#4b76ef;}</style></defs><path class="cls-1" d="M168.24886,115.38015,147.511,129.99878l27.75,40.25907c.63388-.158,1.26428-.33561,1.89336-.51926l-2.26445-53.32331Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-2" d="M230.63456,125.10371l10.4596,1.63026a28.56294,28.56294,0,0,0-7.86007-16.11085L228.635,120.77606A20.14,20.14,0,0,1,230.63456,125.10371Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-3" d="M241.09416,126.734l-10.4596-1.63026c2.07067,6.48473.42661,13.39587-4.84875,18.88729-1.61318,1.68731-3.22636,4.05156-1.72423,7.56884-3.09363-1.29425-6.23594-.98421-9.26209-.24143l-5.02309,11.08878a49.60011,49.60011,0,0,0,8.44057-2.2578,4.67628,4.67628,0,0,1,3.03075.21157c2.95661,1.29056,5.83387,2.76089,8.89632,4.32121l8.27225,4.152-2.40126-8.46788c-.9203-3.18944-1.77188-6.13542-2.45945-9.11852a2.79181,2.79181,0,0,1,.29092-1.78241C239.67311,142.31084,242.03255,134.33165,241.09416,126.734Z" transform="translate(-117.28948 -91.91114)"/><polygon class="cls-4" points="50.959 23.469 57.6 24.504 57.365 18.954 50.959 23.469"/><polygon class="cls-4" points="30.221 38.088 50.959 23.469 16.436 18.088 30.221 38.088"/><path class="cls-2" d="M168.24886,115.38015l6.40527-4.51519-.75628-17.81064a49.00546,49.00546,0,0,0-17.60091-.62979c-10.94214,1.59263-19.78774,5.58774-26.47586,11.91009l3.90452,5.66475Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-1" d="M147.511,129.99878,133.7256,109.99937l-7.94933-1.239a45.18891,45.18891,0,0,0-5.95331,10.16009A42.28712,42.28712,0,0,0,118.05118,124.4c-.21688.78819-.42845,1.57617-.6664,2.35371l-.0953,9.59984.15338.7933c.53429,1.35407,1.01029,2.73983,1.4916,4.12559.482,1.387.9837,2.79137,1.52964,4.18286l3.04424,1.46338Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-4" d="M120.4641,145.45529c.36648.93441.76242,1.85768,1.19629,2.766l1.84795-1.30263Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-2" d="M121.66039,148.2213a27.3339,27.3339,0,0,0,1.59528,2.93657c1.85645,2.89843,2.18438,4.97176,1.21653,7.65341a27.55812,27.55812,0,0,0-.88328,3.221l-4.152,17.39078,9.25064-4.24718c4.83433-2.232,9.42529-4.34769,14.05858-6.34177a4.18146,4.18146,0,0,1,2.634-.08467,54.13873,54.13873,0,0,0,27.686,1.99132l-49.55777-23.82213Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-1" d="M192.81152,98.06555c-.8884.13334-1.78323.28-2.69044.45207a3.86857,3.86857,0,0,1-2.16332-.156,52.1156,52.1156,0,0,0-14.05991-5.30726l.75628,17.81064Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-4" d="M129.82108,104.33462a40.29463,40.29463,0,0,0-4.04481,4.42572l7.94933,1.239Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-3" d="M174.88983,116.41528l32.09,5.00161a45.137,45.137,0,0,0-8.05231-14.19069,37.06911,37.06911,0,0,1,10.07052.7616c7.96549,1.69253,13.89988,5.16226,18.14706,10.6048a22.468,22.468,0,0,1,1.48986,2.18346l4.59914-10.15294a36.07739,36.07739,0,0,0-3.06889-2.93677c-10.319-8.67739-22.54271-11.84312-37.35368-9.6208L174.65413,110.865Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-3" d="M147.511,129.99878l-24.00261,16.91989,49.55777,23.82213c.73409-.14766,1.46685-.30145,2.19481-.483Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-4" d="M206.97982,121.41689l-32.09-5.00161.92531,21.78919,29.29668,9.04418Q211.15526,134.1051,206.97982,121.41689Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-2" d="M210.93393,152.43248l-.7617.23806a32.90723,32.90723,0,0,1-8.69539,1.14771,51.8557,51.8557,0,0,0,3.635-6.5696l-29.29668-9.04418,1.33914,31.53412a53.69444,53.69444,0,0,0,14.12515-6.52675,4.19766,4.19766,0,0,1,2.38541-.5078,53.64941,53.64941,0,0,0,16.11156-.29685l5.02309-11.08878C213.48479,151.641,212.18983,152.03686,210.93393,152.43248Z" transform="translate(-117.28948 -91.91114)"/></svg>
      </div>
      <h1 class="text-center mb-3"><%= strings['general']['unirse_tecno'][lang] %></h1>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
          <div id="exteriorJoinForm">
            <form id="joinForm" action="/unirse" method="POST">
              <div id="alertJoinInfo"></div>
              <div class="form-group mb-2">
                <div class="row">
                  <div class="col">
                    <label for="inputJoinName" class="input-label"><%= strings['general']['nom'][lang] %></label>
                    <input type="text" class="form-control" id="inputJoinName" name="name" maxlength="50" required>
                  </div>
                  <div class="col">
                    <label for="inputJoinSurname" class="input-label"><%= strings['general']['cognom'][lang] %></label>
                    <input type="text" class="form-control" id="inputJoinSurname" name="surname" maxlength="50" required>
                  </div>
                </div>
              </div>
              <div class="form-group mb-2">
                <div class="row">
                  <div class="col">
                    <label for="inputJoinEmail" class="input-label"><%= strings['general']['correu'][lang] %></label>
                    <input type="email" class="form-control" id="inputJoinEmail" name="email" maxlength="100" required>
                  </div>
                  <div class="col">
                    <label for="inputTittle" class="input-label"><%= strings['general']['nom_usuari'][lang] %></label>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text">@</span>
                        </div>
                        <input type="Text" class="form-control" id="inputJoinUsername" name="username" maxlength="39" required>
                      </div>
                    </div>
                </div>
              </div>
              <div class="form-group mb-2">
                <label for="inputJoinBio" class="input-label"><%= strings['general']['biografia'][lang] %></label>
                <textarea type="text" class="form-control" id="inputJoinBio" name="description" maxlength="160" rows="2" required></textarea>
              </div>
              <!--<div class="form-group mb-2">
                <label for="inputJoinLink" class="input-label"><%= strings['perfil']['enllaÃ§'][lang] %></label>
                <input type="text" class="form-control" id="inputJoinLink" name="socialLink" maxlength="100" required>
              </div>-->
              <div class="form-group">
                <div class="row">
                  <div class="col">
                    <label for="inputJoinPass" class="input-label"><%= strings['menu']['contrasenya'][lang] %> <small> <%= strings['general']['pass_min_length'][lang] %></small></label>
                    <input type="password" class="form-control" id="inputJoinPass" name="pass" maxlength="100" minlength="8" required>
                  </div>
                  <div class="col">
                    <label for="inputJoinPass2" class="input-label"><%= strings['reset_pass']['repeteix_pass'][lang] %></small></label>
                    <input type="password" class="form-control" id="inputJoinPass2" name="pass" maxlength="100" minlength="8" required>
                  </div>
                </div>
              </div>
              <div class="form-group text-center">
                <button type="submit" class="btn btn-primary"><%= strings['general']['unirse'][lang] %></button>
              </div>
              <div class="form-group text-center">
                <p><%- strings['general']['accepting_termsandconds'][lang] %></p>
              </div>
            </form>
          </div>
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </div>
</main>
</body>
</html>
