{% extends 'base.html' %}

{% block header %}
  <h2 class="subtitle is-1 has-text-centered">
    {% block title %}Hacer una nueva reserva{% endblock title %}
  </h2>
{% endblock header %}

{% block content %}
    <section class="hero has-text-centered">
      <h1 class="subtitle is-2 has-text-centered">
          Estas son las horas disponibles y las ocupadas
      </h1>
    </section>
    <table class="table is-fullwidth mt-5" id="tablareservas" border = 1>
      <thead>
          <th id="columnid">ID</th>
          <th id="columnnombre">Nombre</th>
          <th>Fecha</th>
          <th>Hora</th>
          <th></th>
      </thead>

      {% for reserva in reservas %}
          <tr>
              <td>{{ reserva.id }}</td>
              <td>{{ reserva.nombre }}</td>
              <td>{{ reserva.fecha }}</td>
              <td>{{ reserva.hora }}</td>
              <td>

              {% if name == reserva.nombre %}
              <form class="form-eliminar" action="{{ url_for('reservas.eliminar_reserva', id=reserva.id) }}" method="post" style="display: inline;">
                  <button type="submit"  class="button is-danger  is-small">Eliminar</button>
              </form>
              {% else %}
              {% if reserva.nombre == "-" %}
 
              <form class="form-eliminar" action="{{ url_for('reservas.actualizar_reserva', id=reserva.id) }}" method="post" style="display: inline;">
                <button type="submit"  class="button is-primary  is-small">Reservar</button>
              </form>
            
              {% endif %}
              {% endif %}
              </td>
          </tr>
      {% endfor %}
    </table>
{% endblock content %}