{% extends 'header.html' %}

{% block css %}
<link rel ='stylesheet' href ='/static/css/tienda.css'>
{% endblock %}

{% block body %}
<nav class="navbar navbar-expand-lg navbar-dark text-center sticky-top" id ='navbar' >
    <a class="navbar-brand mx-auto active" style='color: #000000' href="/home" onclick ='saveCart()'>Inicio</a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto">
    
        <li class="nav-item">
          <a class="nav-link" href="/verBotella" onclick ='saveCart()' style = 'color: #2671B6;'><strong>Botella</strong></a>
        </li>
      
      
        <li class="nav-item">
          <a class="nav-link" style = 'color: #2671B6;' href="/verCamisa" onclick ='saveCart()'><strong>Camisas</strong></a>
        </li>
      </ul>
      <ul class="nvbar-nav pull-sm-right">
       <!-- <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" style = 'color: #2671B6;' href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <strong>Dropdown link</strong>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>-->
          <button type='button' class= 'btn btn-success' data-toggle="modal" data-target="Tiendita">Check out</button>
        
      </ul>
    </div>
  </nav>
  <div class="jumbotron jumbotron-fluid text-center" style = 'height: 12rem;'>
    <div class="container">
      <h1 class="display-4">NUEVOS PRODUCTOS</h1>
        </div>
  </div>
  <div class= 'container-fluid'>
      <div class='row'>
          <br>
          
      </div>
      <div class ='row'>
          {% set count = namespace(value=0) %}
          {% for item in items %}
          <div class = 'col-auto'>
        <div class="card">
            <img class="card-img-top" style='height: 18rem;' src="/static/{{item.path_to_pic}}" alt="Card image">
            <div class="card-body">
              <h6 class="card-title">{{item.Nombre}}<span class="badge badge-secondary">NUEVO</span></h6>
              <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#Modal{{count.value}}">
                Descripción
              </button>
              <p class="card-text"> <strong> Disponibles: {{item.cantidadMax}}</strong></p>
              <div class="input-group mb-2 mr-sm-2">
                <div class="input-group-append">
                  <div class="input-group-text"><strong>1 x ${{item.precio}}</strong> <br></div>
                </div>
                <input type="text" class="form-control" id="{{item.id}}" name ='Cantidad[{{count.value}}]' onchange ='buyitem("item","Cantidad[{{count.value}}]","{{item.id}}")' placeholder="Precio">
              </div></div>
            </div>
              <!-- onclick ='saveCart()' href="#" class="btn btn-primary">See Profile</a>-->
            </div>
            <div class="modal fade" id="Modal{{count.value}}" >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" >Detalles de {{item.Nombre}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    {{item.descripcion}}
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
                   
                  </div>
                </div>
              </div>
            </div>
          {% set count.value = count.value + 1 %}
          {% endfor %}
         
      </div>
  </div>
  <script>
    // When the user scrolls the page, execute myFunction

  </script>
  {% endblock %}