{% extends 'app/base.html' %} 
{% load static %}

{% block content %}
<div class="text-center" id="content">
    <img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50" id="image">
    <br>
    <h1><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h1>
    <br>
    <br>
    <button type="button" class="btn btn-primary mt-5" style="border-radius: 2rem; font-size: 2.5rem; padding: 0rem 0.75rem;" id="button">→</button>
</div>

<div id="new-content" style="display: none;" class="mb-3">
    <h2>Login</h2>
    <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Benutzername</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Passwort</label>
          <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="checkBox">
          <label class="form-check-label" for="exampleCheck1">Eingeloggt bleiben</label>
        </div>
        <!-- <button type="submit" class="btn btn-primary">Login</button> -->
        <a href="/app/home" class="btn btn-primary">Login (Überbrücken)</a>
      </form>
      <br>
      <div class="SideInfos" style="margin-top: 10rem;">
        <p style="font-size: 0.75rem;">
          Noch keinen Account?
          <br><a href="#"><b><u>Registrieren</u></b></a>
          <br>
          <br>Passwort Vergessen?
          <br><a href="#"><b><u>Passwort zurücksetzen</u></b></a>
        </p>
      </div>
</div>

<script>

    document.getElementById('checkBox').addEventListener('change', () => {
      const AllowedSaveData = document.getElementById('checkBox').checked
      console.log("MOIN")
      if (AllowedSaveData) {
        localStorage.setItem('RememberLoginData', "true");
      }
    })

    window.addEventListener('load', () => {
      const IfRememberLoginData = localStorage.getItem('RememberLoginData');
      if (IfRememberLoginData === "true") {
        window.location = './home'
      }
    })

    document.getElementById('button').addEventListener('click', function() {
        // Elemente nach links aus dem Bildschirm bewegen
        document.getElementById('content').classList.add('slide-out');

        setTimeout(function() {
            // Size Up the Header Block
            document.getElementById('header-color-block').classList.replace('bg-white-color', 'bg-blue-color')
            document.getElementById('HeaderText').style.display = 'block';
            document.getElementById('HeaderText').classList.add('fade-in');
            document.getElementById('body').classList.replace('bg-white-color', 'bg-blue-color');
        }, 200);
        
        setTimeout(function(){
            document.getElementById('maincontainer').classList.replace('align-items-center', 'pt-5')
        }, 400);

        // Nach einer Sekunde (Animationsdauer) den neuen Bereich anzeigen
        setTimeout(function() {
            document.getElementById('content').style.display = 'none';
            var newContent = document.getElementById('new-content');
            newContent.style.display = 'block';
            newContent.classList.add('fade-in');
        }, 800); // Dauer der slide-out-Animation (1 Sekunde)
    });
</script>
{% endblock %}