{% extends 'base.html' %}

{% block content %}
  <style>
    .status-light {
      /* Background color */
      background-color: gray;
  
      /* Rounded border */
      border-radius: 9999px;
  
      /* Size */
      height: 0.5rem;
      width: 0.5rem;

      display: inline-flex;
      margin-bottom: 0.5rem;


      animation: blink 2s step-start 0s infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0.8;
    }
  }
  </style>

  <section>
    
    <h1><a class="status-light" id="status-light"></a> Čekám až nascanuješ pitíčko</h1> 
    <h5 id="status-message"></h5>
  </section>
  <form action="/checkout" method="post">
    <input id="barcode-input-field" type="text" name="barcode" autofocus>
    <input type="submit" hidden>
  </form> 

  
  <p> Sem by mělo přijít jednoduché info o pokladně </p>
  
  <a href="/admin" role="button" style="position: fixed;  bottom: 10px; right: 10px;">⚙</a>


  <script>
    checkConnection();
    setInterval(checkConnection, 5000);
    function checkConnection() {
      var request = new XMLHttpRequest();  
      request.open('GET', 'https://org.trhlina.org/login', true);
      request.timeout = 500;
      request.onreadystatechange = function(){
        if (request.readyState === 4){
            if (request.status === 200) {  
              document.getElementById("status-light").style.backgroundColor = "#16a34a";
              document.getElementById("status-message").innerHTML = "";
              document.getElementById("barcode-input-field").style.display = "block";
              console.log("Connection to Grocy is OK")
            }  
            else {
              document.getElementById("status-light").style.backgroundColor = "red";
              document.getElementById("status-message").innerHTML = "S pokladnou je něco špatně. Nemůže se připojit k databázi.";
              document.getElementById("barcode-input-field").style.display = "none";
              console.log("Connection to Grocy is not working")
            }
        } 
      };
      request.send();
    }

  </script>
{% endblock %}