{{ template "headersLogo.html" . }}

<section class="">
  <form autocomplete="off">
    <div class="container">
      <div class="pt-20 pb-5 mx-2 md:mx-5">
        <h1 class="text-2xl font-bold">{{ "Inscription" | t }}</h1>
        <p class="text-sm">{{ "Vous avez déjà un compte ?" | t }} <a href="/signin" up-follow class="underline">{{ "Connectez-vous" | t }}</a></p>
      </div>
      <div class="grid pb-0 mb-0 md:grid-cols-2">
        <div class="flex flex-col justify-center items-center mx-2 md:mx-5">
          <div class="px-8 pt-6 pb-8 mb-4 w-full max-w-4xl rounded">
            <div class="mb-6">
              <h2 class="mb-6 text-lg font-semibold">{{ "Votre compte client" | t }}</h2>
              <div class="grid grid-cols-2">
                <div class="mb-4">
                  <label class="block mb-2 text-sm font-bold text-gray-700" for="company-name">
                    {{ "Nom de l'entreprise" | t }} *
                  </label>
                  <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="company-name" type="text" autocomplete="off" placeholder="DATAMIX.IO" required>
                </div>
                <div class="mb-4 ml-2">
                  <label class="block mb-2 text-sm font-bold text-gray-700" for="siret">
                    {{ "Numéro de SIRET" | t }}
                  </label>
                  <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="siret" type="text" autocomplete="off" placeholder="809 290 752 00025">
                </div>
              </div>
              <div class="mb-4">
                <label class="block mb-2 text-sm font-bold text-gray-700" for="address">
                  {{ "Adresse" | t }} *
                </label>
                <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="address" type="text" autocomplete="off" placeholder="4 AV NEIL ARMSTRONG" required>
              </div>
              <div class="flex mb-4">
                <div class="w-1/4">
                  <label class="block mb-2 text-sm font-bold text-gray-700" for="postal-code">
                    {{ "Code Postal" | t }} *
                  </label>
                  <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="postal-code" type="text" autocomplete="off" placeholder="33700" required>
                </div>
                <div class="ml-2 w-1/2">
                  <label class="block mb-2 text-sm font-bold text-gray-700" for="city">
                    {{ "Ville" | t }} *
                  </label>
                  <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="city" type="text" autocomplete="off" placeholder="MERIGNAC" required>
                </div>
                <div class="ml-2 w-1/3">
                  <label class="block mb-2 text-sm font-bold text-gray-700" for="country">
                    {{ "Pays" | t }} *
                  </label>
                  <select class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow b-a focus:outline-none focus:shadow-outline" id="country" required>
                    <option value="France">France</option>
                    <!-- Additional countries if needed -->
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center items-center mx-2 md:mx-5">
          <div class="px-8 pt-6 pb-8 mb-4 w-full max-w-4xl rounded">
            <div class="mb-6">
              <h2 class="mb-6 text-lg font-semibold">Informations de connexion</h2>
              <div class="mb-4">
                <label class="block mb-2 text-sm font-bold text-gray-700" for="email">
                  {{ "Adresse email" | t }} *
                </label>
                <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="email" type="email" name="subscribing_email" autocomplete="off" placeholder="exemple@gmail.com" required>
              </div>
              <div class="mb-4">
                <label class="block mb-2 text-sm font-bold text-gray-700" for="password">
                  {{ "Mot de passe" | t }} *
                </label>
                <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="password" type="password" name="subscribing_pass1" autocomplete="off" placeholder="••••••••" required>
              </div>
              <div class="mb-4">
                <label class="block mb-2 text-sm font-bold text-gray-700" for="confirm-password">
                  {{ "Confirmation du mot de passe" | t }} *
                </label>
                <input class="px-3 py-2 w-full leading-tight text-gray-700 rounded shadow appearance-none b-a focus:outline-none focus:shadow-outline" id="confirm-password" type="password" name="subscribing_pass2" autocomplete="off" placeholder="••••••••" required>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block mx-2 md:mx-5" style="margin-top:-40px; text-align:right">
        <button class="text-lg text-white bg-black rounded-md border-indigo-600 backstretch animated btn hover:bg-indigo-700 hover:border-indigo-700" type="button">
          {{ "Continuer" | t }}
        </button>
      </div>
    </div>
  </form>
</section>

{{ template "footer.html" . }}