{% extends 'base.html' %}
{% block title %}{{ customer.firstName }} {{ customer.lastName }}{% endblock %}

{% block content %}


<h1>{{ customer.fullName() }}</h1>

<div class="row">

  <div class="col-6">

    <p><b>Phone: </b> {{ customer.phone }}</p>
    <p><b>Notes: </b>{{ customer.notes }}</p>

    <p><a class="btn btn-primary" href="/{{ customer.id }}/edit/">Edit</a></p>

    <h2>Reservations</h2>
    {% if reservations %}
    <ul>
      {% for reservation in reservations %}
      <li><b>{{ reservation.getformattedStartAt() }}</b> for {{ reservation.numGuests }}</li>
      {% endfor %}
    </ul>
    {% else %}
    <p>None!</p>
    {% endif %}

  </div>

  <div class="col-6">
    <h3>New Reservation</h3>
    <form action="/{{ customer.id }}/add-reservation/" method="POST">
      <div class="form-group">
        <label for="start">Start</label>
        <input id="start"
               class="form-control"
               name="startAt"
               placeholder="yyyy-mm-dd hh:mm am/pm"
        >
      </div>
      <div class="form-group">
        <label for="num-guests"># of Guests:</label>
        <input class="form-control"
               value="2"
               name="numGuests"
               type="number"
               id="num-guests">
      </div>
      <div class="form-group">
        <label for="notes">Notes:</label>
        <textarea class="form-control"
                  name="notes"
                  id="notes"></textarea>
      </div>
      <button class="btn btn-primary">Add</button>
    </form>
  </div>

</div>

{% endblock %}