{% extends 'base.html' %}

{% block title%}Customer Details{% endblock %}

{% block content %}
      
        <style type="text/css">
            body {
                
                font-size: 13px;
            
            }
            .header {
                font-size: 25px;
                font-weight: 100;
                text-align: center;
                color: #007cae;
            }
            .details {
                padding: 10px 20px 0px 20px;
                text-align: left !important;
                /*margin-left: 40%;*/
            }

            tr:first-child{
                outline: thin solid transparent;
                height: 40px;
              }
           
        </style>
        

         
            

       
        <div class='wrapper'>
            <div class='header'>
                
                <p class='title'>Products Invoice </p>
            </div>
            <div class='details'>
              Date : {{myDate}}
                <hr class='hrItem' />
            </div>
        </div>
        <br>

        <div class="container">
            <div class="col-md-12">
        
                <table class="table" border="1">
                    <thead>
                        <tr>
                         
                            <th>Id</th>
                            <th>Name</th>

                            <th>Per Price</th>
                           
                            <th>Description</th>
                            <th>Quantity</th>
                           

                        </tr>
                    </thead>
                    <tbody>
                        {% for product in products%}

                        <tr style="text-align: center;">

                        
                            <td>{{product.id}}</td>
                            <td>{{product.name}}</td>
                            <td>{{product.price}}</th>
                          
                            <td>{{product.description}}</td>
                            <td>{{product.quantity}}</td>
                           


                       
                        </tr>

                        {% endfor %}
                    </tbody>
                </table>
        
    </div>
</div> 

{% endblock %}