{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title_block  %} Ecommerce Project {% endblock %}</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="{% static 'css/main.css' %}">

<style>
  .card {
    height: 350px;
  }

  .card-product:after {
    content: "";
    display: table;
    clear: both;
    visibility: hidden;
  }

  .card-product .price-new, .card-product .price {
    margin-right: 5px;
  }

  .card-product .price-old {
    color: #999;
  }

 .card-product .img-wrap {
   border-radius: 3px 3px 0 0;
   overflow: hidden;
   position: relative;
   height: 220px;
   text-align: center;
 }

 .card-product .img-wrap img {
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
 }

 .card-product .info-wrap {
   overflow: hidden;
   padding: 15px;
   border-top: 1px solid #eee;
 }

 .card-product .acion-wrap {
   padding-top: 4px;
   margin-top: 4px;
 }

 .card-product .bottom-wrap {
   padding: 15px;
   border-top: 1px solid #eee;
 }

 .card-product .title {
   margin-top: 0px;
 }

</style>

   </head>
   <body>
     {% include 'navbar.html' %}

     <div class="container" style="padding-top:20px">
       <div class="messages container mt-2">
         {% if messages %}
            {% for message in messages %}
   <div {% if message.tags %} class="alert alert-{{ message.tags }} {% endif %}" role="alert">
              {{ message }}
              <button type="button" class="close" data-dismiss="alert" aria-level="Close">
                <span aria-hidden="true"> &times; </span>
              </button>
            </div>
            {% endfor %}
         {% endif %}
       </div>

  {% block body_block %}

  {% endblock %}
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

   </body>
 </html>
