{% extends "principal.html" %}

{% block headadd %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
  .container {
    max-width: 95%;
  }
</style>
{% endblock %}

{% block contenido %}
<div class="bloque-seccion">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="jumbotron p-3">
          <h4 class="mt-3">List of <b>Professional Titles</b></h4>
          <button type="button" class="btn btn-success float-right mb-2" data-toggle="modal"
            data-target="#addAuthorModal">Register Graduate</button>

          <div class="mt-4">
            {% with messages = get_flashed_messages() %}
            {% if messages %}
            <br>
            {% for message in messages %}
            <div
              class="alert {% if message == 'Graduate registered successfully and replicated to nodes' %}alert-success{% else %}alert-danger{% endif %} alert-dismissable"
              role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">x</span>
              </button>
              {{ message }}
            </div>
            <br>
            {% endfor %}
            {% endif %}
            {% endwith %}
          </div>

          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th>Block #</th>
                <th>Names and Surnames</th>
                <th>ID Card</th>
                <th>Secondary Hash</th>
                <th>Number of Signatures</th>
              </tr>
            </thead>
            <tbody>
              {% for row in datablockr %}
              {% if row['cantf'] | int <= 4 %} 
              <tr>
                <td>{{ row['index'] }}</td>
                <td>{{ row['Name'] }}</td>
                <td>{{ row['CitizenID'] }}</td>
                <td>{{ row['hash_Data'] }}</td>
                <td>{{ row['cantf'] }}</td>
                </tr>
              {% endif %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Add Graduate -->
<div id="addAuthorModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Register Graduate</h4>
      </div>
      <div class="modal-body">
        <form method="POST">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>Names and Surnames:</label>
                <input type="text" class="form-control" name="Name" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>ID Card:</label>
                <input type="number" class="form-control" name="CitizenID" required>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div form="form-group">
                <label>Email:</label>
                <input type="email" class="form-control" name="email" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Professional Career:</label>
                <input type="text" class="form-control" name="Professional Career" required>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>Degree:</label>
                <input type="text" class="form-control" name="Degree" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Year of Graduation:</label>
                <input type="number" class="form-control" name="Year of Graduation" required>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>Role:</label>
            <input type="text" class="form-control" name="Role" value="Graduate" required>
          </div>
          <div class="form-group">
            <label>Password:</label>
            <input type="password" class="form-control" name="passw" required>
          </div>
          <div class="form-group text-center">
            <button class="btn btn-primary" type="submit">Register Graduate</button>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}


{% block scriptadd %}
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% endblock %}