<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ammonizioni Marcia</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>

<body>
    <style>
        h1{  font-family: 'Ubuntu', sans-serif;}
        h2{  font-family: 'Ubuntu', sans-serif;}
    </style>

    <form action="/sender" method="POST">
        <h1>Inserimento REAL-TIME</h1>
        <hr width="100%">
        <br>
        <div style=" text-align: center;">
        <h2>Pettorale:</h2>
        <input style="font-size: 60px; text-align: center; width: 300px; height: 70px" required="true" type="number" name="number" />
        <h2>Tipo: </h2>
            <label style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px;  border-style: solid; border-width: 1px; font-size: 40px; font-family: 'Ubuntu', sans-serif;" for="sospensione">
                <input value="~" style="transform: scale(2);" type="radio" id="sospensione" name="type"> <b>~</b> SOSPENSIONE
              </label>
              <br>
              <br>
              <label style=" padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px;  border-style: solid; border-width: 1px; font-size: 40px; font-family: 'Ubuntu', sans-serif;" for="sbloccaggio">
                <input value=">" style="transform: scale(2);" type="radio" id="sbloccaggio" name="type"> <b>></b> SBLOCCAGGIO
              </label>
            <br>
            <br>
        <button style="font-size: 30px; height: 80px; width: 200px;" type="submit">INVIA</button>
    </div>
        <br>
        <h1>Ultima ammonizone</h1>
        <hr>
        <h2>Pettorale: <%-number %></h2>
        <h2>Nome: <%-name %></h2>
        <h2>Società: <%-club %></h2>
        <h2>Gara: <%-race %></h2>
        <h2>Tipo: <%-type %></h1>
      </form>

      <script>
        let error = '<%= error %>';
        let number = '<%= number %>';
        if(error == "matching") {
            alert("ATTENZIONE!\nNon è stato trovato nessun atleta con il pettorale " + number)
        }
      </script>

</body>
</html>