{% extends "principal.html" %}

{% block scrihadd %}
<script>
  function verificarPasswords() {
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var errorDiv = document.getElementById("error");

    if (pass1.value != pass2.value) {
      errorDiv.classList.remove("ocultar");
      return false;
    } else {
      errorDiv.classList.add("ocultar");
      document.getElementById("ok").classList.remove("ocultar");
      document.getElementById("login").disabled = true;

      setTimeout(function () {
        location.reload();
      }, 3000);

      return true;
    }
  }
</script>
{% endblock %}

{% block stylehadd %}
<style>
  .ocultar {
    display: none;
  }

  .mostrar {
    display: block;
  }

  .container-form {
    background-color: #7D5197;
    color: white;
  }

  .container-table {
    background-color: #79B4A2;
  }

  .btn-registrar {
    background-color: #1C043B;
  }
</style>
{% endblock %}

{% block contenido %}
<div class="container w-75 ">
  <div id="msg"></div>

  <div id="error" class="alert alert-danger ocultar" role="alert">
    Las Contraseñas no coinciden, vuelve a intentar !
  </div>

  {% with messages = get_flashed_messages() %}
  {% if messages %}
  {% for message in messages %}
  <div class="alert alert-warning alert-dismissable" role="alert">
    {{ message }}
  </div>
  {% endfor %}
  {% endif %}
  {% endwith %}

  <form class="row g-3 mt-3 py-2 text-dark" method="POST" onsubmit="return verifyPasswords()">
    <div class="col-md-6">
      <label for="validationServer01" class="form-label">First Name</label>
      <input type="text" class="form-control" name="Name" required>
    </div>
    <div class="col-md-6">
      <label for="validationServer02" class="form-label">Last Name</label>
      <input type="text" class="form-control" name="LastName" required>
    </div>
    <div class="col-md-6">
      <label for="validationServerUsername" class="form-label">ID Document</label>
      <div class="input-group has-validation">
        <span class="input-group-text" id="inputGroupPrepend3">Citizen 🆔</span>
        <input type="number" class="form-control" name="CitizenID" required>
      </div>
    </div>
  
    <div class="col-md-6">
      <label for="validationServer04" class="form-label">Peer Node</label>
      <select class="form-select" name="Role" required>
        {% set cant = (data['qtynodos'] | int) + 1 %}
        {% for n in range(1, cant) %}
        {% set valor = "Nodo " + (n | string) %}
        <option>{{ data[valor] }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-6">
      <label for="validationServer05" class="form-label">Password</label>
      <input type="password" class="form-control" name="password" id="pass1" required>
    </div>
    <div class="col-md-6">
      <label for="validationServer05" class="form-label">Confirm Password</label>
      <input type="password" class="form-control" name="password1" id="pass2" required>
    </div>
    <div class="col-12 text-center">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" required>
        <label class="form-check-label" for="invalidCheck3">I agree that I have completed my information correctly</label>
      </div>
    </div>
    <div class="col-12 text-center">
      <button class="btn btn-primary btn-lg btn-registrar"><b>REGISTER</b></button>
    </div>
  </form>
    
</div>
{% endblock %}

{% block diploma %}{% endblock %}
{% block bdblock %}
<div class="container my-3 p-4 container-table">
  <table id="tablax" class="table table-striped table-bordered" style="width:100%">
    <thead>
    <th>Block N°</th>
          <th>Date and Time</th>
          <th>Block Hash</th>
          <th>Previous Hash</th>
    </thead>
    <tbody>
      {% for col in datablock %}
      <tr>
        <td>{{ col['block']['metadata']['index'] }}</td>
        <td>{{ col['block']['metadata']['timestamp'] }}</td>
        <td>{{ col['hash1'] }}</td>
        <td>{{ col['metadata']['previous_hash'] }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}