{% extends "base.html" %}

{% block content %}
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Modal -->
  <div class="modal show" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Sale: [ITEM BUNDLE]</h4>
        </div>
        <div class="modal-body">
          <p>Welcome to [GROCERY STORE]! We currently are running a sale on [ITEM BUNDLE].</p>
            <form>
              <label for="quantity">Quantity</label><br>
              <input type="number" id="quantity" name="quantity" min="1" max="5">
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Add to Cart</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
{% endblock %}