{% extends 'app/base.html' %}
      
    {% block content %}
        <div class="container">
            <div class="row">
                <div class="col align-self-center">
                    <h5>Book a Flight</h5> <hr>
                    <form method="POST">
                        <div class="form-group">
                            <label for="firstname">Fist Name</label>
                            <input type="text" class="form-control" id="firstname" name="firstname">
                        </div>
                        <div class="form-group">
                            <label for="lastname">Last Name</label>
                            <input type="text" class="form-control" id="lastname" name="lastname">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Email address</label>
                          <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp">
                          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div class="form-group">
                          <label>Flight</label>
                          <select  class="form-control" name="flight_id">
                              {% for flight in flights %}
                                <option value="{{ flight.id }}">{{ flight.id }}. {{ flight.origin }} to {{ flight.destination }}</option>
                              {% endfor %}
                          </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Book</button>
                      </form>
                
                </div>
            </div>
        </div>

    {% endblock content %}