{% extends "VGlenswebApp/base.html" %}

{% load static %}
{% load carro_tags %}

{% block title %}Productos{% endblock %}

{% block content %}
    
    {% for producto_disponible in productos_disponibles %}

    <!--Imagen y descripcion del producto-->
    <div class="container p-3 pt-5">
        <div class="row  p-2 ">
            <div class="col-12 col-md-4 mb-3 mb-md-0">
                 <button class="mx-auto d-block btn-img" data-target="#modal-{{producto_disponible.id}}" data-toggle="modal">
                    <img class=" img-fluid img-productos zoom" src="{{producto_disponible.imagen.url}}"
                        alt="Imagen de cristal {{producto_disponible.nombre}}">
                 </button>
            </div>
            <div class="col-12 col-md-6 bg-light border rounded p-3">
                <h3 class="text-primary font-weight-bold h4">{{producto_disponible.nombre}}</h3>
                <p>{{producto_disponible.descripcion}} </p>
                <button class="btn btn-primary btn-productos" data-toggle="modal" data-target="#modal-{{producto_disponible.id}}"><span><i class="fas fa-info-circle"></i></span> Ver más</button>
                
                    {% if user.is_authenticated %}
                        
                        <p class="text-right">Precio por par (USD): 
                            <span class=" p-1 resaltar">{{producto_disponible.precio|multiply:2}} &#36;</span>
                        </p>
                    {% else %}
                        <p class="text-right mt-3">
                            Iniciar sesión para consultar precios
                        </p>
                    {% endif %}
            </div>
           
        </div>
    </div>
        
    <!--Modal para las ventanas emergentes con la informacion adicional-->
    <div class="modal fade" id="modal-{{producto_disponible.id}}" tabindex="-1">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">

                <!--Header del Modal-->
                <div class="modal-header bg-light text-primary">
                    <h3 class="modal-title h5 font-weight-bold">{{producto_disponible.nombre}}</h3>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <!--Cuerpo del Modal-->
                <div class="modal-body"></div>
                    <p class="px-5 text-justify pb-2">{{producto_disponible.extra_info|linebreaksbr}}</p>

                <!--Footer del Modal-->    
                <div class="modal-footer bg-light">
                    <button class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    {% endfor %}
   
{% endblock %}

<!--
<div class="container py-3">
    <p>
    <h2>{{producto_disponible.nombre}}</h2>
    <p>
        {{producto_disponible.descripcion}}
    </p>
    <p> <img src="{{producto_disponible.imagen.url}}" alt="" style="width: 150px;"></p>
    <p>&#36;{{producto_disponible.precio}}</p>
    </p>
</div>
-->