{{ template "headersMenu.html" . }}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

<div class="container flex">

  <!-- Slider Section -->
  <div class="hidden relative w-full h-screen lg:w-1/2 lg:block">
    <div class="h-full swiper">
      <div class="swiper-wrapper">
        <div class="flex justify-center items-center swiper-slide">
          <div class="text-center pb-16">
            <div class="holder text-center" style="mask-image: url('/cdn/apps/{{ .domain }}/illus1.webp'); -webkit-mask-image: url('/cdn/apps/{{ .domain }}/illus1.webp')">
              <img src="/cdn/apps/{{ .domain }}/illus1.webp" class="m-0 block">
            </div>
          </div>
        </div>
        <div class="flex justify-center items-center swiper-slide">
          <div class="text-center pb-32">
            <h2 class="mt-8 mb-4 text-4xl font-bold">{{ "Un intégré complet" | t }}</h2>
            <p class="text-xl">{{ "Votre média s'adapte à votre quotidien" | t }}</p>
            <h2 class="mt-8 mb-4 text-4xl font-bold">{{ "Personnalisable à 100%" | t }}</h2>
            <p class="text-xl">{{ "La marque blanche est par défaut sur .PM" | t }}</p>
            <h2 class="mt-8 mb-4 text-4xl font-bold">{{ "Sécurité et vie privée" | t }}</h2>
            <p class="text-xl">{{ "Tout en optimisant les ressources" | t }} ☺️</p>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <!-- Login Form Section -->
  <div id="loginSection" class="block items-center p-8 mt-20 w-full lg:w-1/2 lg:mt-0 lg:flex">
    <div class="mx-auto w-full max-w-md">
      
      <div class="flex justify-center mb-6 space-x-4">
        <button id="passwordTab" class="px-2 pb-2 text-sm font-bold uppercase tab-active">{{ "Connexion" | t }}</button>
        <button id="magicLinkTab" class="px-2 pb-2 text-sm font-bold uppercase">{{ "Inscription" | t }}</button>
      </div>
      
      <form id="loginForm" class="ltr:text-left rtl:text-right" method="post" action="/signin">
        <div class="space-y-4">
          <div>
            <label for="username" class="block mb-1 text-sm font-medium">{{ "E-mail professionnel" | t }}</label>
            <input type="email" id="email" name="email" class="block w-full text-black bg-gray-200 rounded-lg border-2 border dark:text-white dark:bg-gray-800 custom-input sm:text-sm" placeholder="{{ "name@company.com" | t }}" required>
          </div>
          
          <div id="passwordSection">
            <label for="password" class="block mb-1 text-sm font-medium">{{ "Mot de passe" | t }}</label>
            <input type="password" id="password" name="password" class="block w-full bg-gray-200 rounded-lg border-2 border dark:bg-gray-800 custom-input sm:text-sm" autocomplete="false">
            <a href="/forgot-password" class="mt-2 text-sm text-gray-600 dark:text-gray-400 float-right">{{"Mot de passe oublié ?" | t}}</a>
          </div>
        </div>
        <div id="CGU" class="hidden">
          <p class="mt-10 text-xs text-left text-gray-600 dark:text-gray-400">
            <label>
              <input type="checkbox" class="bg-indigo-600" /> {{ "En vous inscrivant, vous acceptez nos" | t }} <a class="underline up-follow" href="/about/terms">{{ "Conditions générales d'utilisation" | t }}</a> {{ "et notre" | t }} <a class="underline up-follow" href="/about/privacy">{{ "politique de confidentialité" | t }}</a>.
            </label>
          </p>
        </div>
        <button type="submit" id="submitButton" class="px-4 py-2 mt-6 w-full text-white bg-black rounded-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-gray-900">
          {{ "Se connecter" | t }}
        </button>
      </form>
      <div class="mt-6">
        <p class="text-xs md:text-sm text-center text-gray-400">
          {{ "Vous pouvez également vous connecter avec" | t }}
        </p>
        <div class="flex justify-center items-center mt-4 gap-3">
      
          <a href="/auth/login/google" class="px-4 py-2 rounded-xl bg-gray-50 border border dark:bg-gray-800 flex items-center mx-1">
            <i class="fab fa-google mr-2"></i>
            <span>Google</span>
          </a>
      
          <a href="/auth/login/github" class="px-4 py-2 rounded-xl bg-gray-50 border border dark:bg-gray-800 flex items-center mx-1">
            <i class="fab fa-github mr-2"></i>
            <span>GitHub</span>
          </a>
      
          <a href="/auth/login/apple" class="px-4 py-2 rounded-xl bg-gray-50 border border dark:bg-gray-800 flex items-center mx-1">
            <i class="fab fa-apple mr-2"></i>
            <span>Apple</span>
          </a>
      
        </div>
      </div>
      <div class="mt-6">
        <p class="text-xs md:text-sm text-center text-gray-400">{{ "Vous pouvez également vous connecter avec" | t }}</p>
        <div class="flex justify-center items-center mt-4">
          <!--
          <button class="flex justify-center items-center px-4 py-2 rounded-md opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
            </svg>
          </button>
          <button class="flex justify-center items-center px-4 py-2 rounded-md opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
            SAML
          </button>
          -->
          {{ if eq .domain "studio" }}
          <a href="https://beta.card.pm/go/to/{{ .domain }}" class="flex justify-center items-center px-4 py-2 rounded-md opacity-50 hover:opacity-100">
            <img src="/cdn/design/logos/card-black.png" class="block h-4 dark:hidden">
            <img src="/cdn/design/logos/card-white.png" class="hidden h-4 dark:block">
          </a>
          {{ else }}
          <a href="https://pm.studio/go/to/{{ .domain }}" class="flex justify-center items-center px-4 py-2 rounded-md opacity-50 hover:opacity-100">
            <img src="/cdn/design/logos/studio-black.png" class="block h-4 dark:hidden">
            <img src="/cdn/design/logos/studio-white.png" class="hidden h-4 dark:block">
          </a>
          {{ if eq .domain "card" }}
          {{ else }}
          <a href="https://beta.card.pm/go/to/{{ .domain }}" class="flex justify-center items-center px-4 py-2 rounded-md opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
            <img src="/cdn/design/logos/card-black.png" class="block h-4 dark:hidden">
            <img src="/cdn/design/logos/card-white.png" class="hidden h-4 dark:block">
          </a>
          {{ end }}
          {{ end }}
        </div>
      </div>
      
      <!--
      <p class="mt-6 text-sm text-center text-gray-400">
        
        <div class="grid grid-cols-1">
          <div class="text-center">
              <span class="text-gray-600 dark:text-gray-400-400 ltr:mr-2 rtl:ml-2">{{"Nouvel arrivant ?" | t}}</span> <a href="/signup" up-follow class="inline-block font-bold text-black dark:text-white">{{"Créez votre compte" | t}}</a>
          </div>
      </div>
      </p>
      -->
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
window.onload = function() {
  // Swiper initialization
  const swiper = new Swiper('.swiper', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    autoplay: {
      delay: 5000,
    },
  });

  // Login form functionality
  function setupLoginForm(formId, passwordTabId, magicLinkTabId, passwordSectionId, submitButtonId) {
    const form = document.getElementById(formId);
    const passwordTab = document.getElementById(passwordTabId);
    const magicLinkTab = document.getElementById(magicLinkTabId);
    const passwordSection = document.getElementById(passwordSectionId);
    const cguSection = document.getElementById("CGU");
    const submitButton = document.getElementById(submitButtonId);

    function switchToPasswordMode() {
      passwordTab.classList.add('tab-active');
      magicLinkTab.classList.remove('tab-active');
      passwordSection.style.display = 'block';
      cguSection.style.display = 'none';
      cguSection.classList.add('hidden');
      submitButton.textContent = 'Se connecter';
    }

    function switchToMagicLinkMode() {
      magicLinkTab.classList.add('tab-active');
      passwordTab.classList.remove('tab-active');
      passwordSection.style.display = 'none';
      cguSection.style.display = 'block';
      cguSection.classList.remove('hidden');
      submitButton.textContent = 'Recevoir l\'email de validation';
    }

    passwordTab.addEventListener('click', switchToPasswordMode);
    magicLinkTab.addEventListener('click', switchToMagicLinkMode);

    form.addEventListener('submit', function(event) {
      const email = form.querySelector('input[type="email"]').value;
      const isMagicLinkMode = magicLinkTab.classList.contains('tab-active');

      if (isMagicLinkMode) {
        event.preventDefault();
        console.log('Envoi d\'un Magic Link à:', email);
        alert('Un Magic Link a été envoyé à votre adresse e-mail. Veuillez vérifier votre boîte de réception.');
      } else {
        return true;
      }
    });
  }

  // Setup desktop login form
  setupLoginForm('loginForm', 'passwordTab', 'magicLinkTab', 'passwordSection', 'submitButton');

}
</script>


{{ template "footer.html" . }}