{% extends 'base.html' %}
{% block content %}
{% load static %}
{% load crispy_forms_tags %}
 

  <section id="checkout">
   <div class="container">
     <div class="row">
       <div class="col-md-12">
        <div class="checkout-area">
            <div class="row">
              <div class="col-md-8">
                <div class="checkout-left">
                  <div class="panel-group" id="accordion">
                    <!-- Billing Details -->
                    <div class="panel panel-default aa-checkout-billaddress">
                      <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                            Billing Details
                          </a>
                        </h4>
                      </div>
                      <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                          <form method="POST"> 
                            {% csrf_token %}
                          <div class="row">
                            <div class="col-md-6">
                              <div class="aa-checkout-single-bill">
                                {{ form.email_address }}
                                <input type="email" placeholder="Email Address*">
                              </div>                             
                            </div>
                            <div class="col-md-6">
                              <div class="aa-checkout-single-bill">
                                {{ form.telephone_no }}
                                <input type="tel" placeholder="Phone*">
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="aa-payment-method">                    
                              <img src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg" border="0" alt="PayPal Acceptance Mark">    
                              <input type="submit" value="Place Order" class="aa-browse-btn">                
                            </div>
                            </div>
                          </div>  
                          </form>                                  
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="checkout-right">
                  <h4>Order Summary</h4>
                  <div class="aa-order-summary-area">

                    <table class="table table-responsive">
                      <thead>
                        
                        <tr>
                          <th>Product</th>
                          <th>Total</th>
                        </tr>
                      </thead>
                       {% for order_item in object.items.all %}
                      <tbody>
                        <tr>
                          <td>{{ order_item.item.title }} <strong> x   </strong></td>
                          <td>${{ order_item.item.price }}</td>
                        </tr>                       
                      </tbody>
                      {% endfor %} 
                      <tfoot>
                         <tr>
                          <th>Total</th>
                          <td>${{ object.get_total }}</td>
                        </tr>
                      </tfoot>
                       
                    </table>
                    
                  </div>
                </div>
              </div>
            </div>
         </div>
       </div>
     </div>
   </div>
 </section>


 {% endblock content %}