{% extends 'productsBase.html' %}
{% load static %}

{% block header %}Our Choice Products{% endblock %}

{% block content %}
<style>
   

   
    .product-list {
        background-color: #fff8dc;
        padding: 30px;
        height: fit-content;
        width: 1500px;
        max-width: 1500px;
        border: 1px solid #3e2723;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .product-list h2 {
        text-align: center;
        font-size: 28px;
        margin-bottom: 30px;
        color: white;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .product {
        background-color: white;
        border: 1px solid #3e2723;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: box-shadow 0.3s ease;
    }

    

    .product img {
        width: 150px;
        height: 150px;
        object-fit: cover;
        margin-bottom: 15px;
        border-radius: 5px;
    }

    .product h3 {
        font-size: 20px;
        margin-bottom: 10px;
        color: #8b4513;
    }

    .product p {
        font-size: 14px;
        margin-bottom: 20px;
        color: #5c3317;
    }

    button:hover {
        background-color: #5c3317;
        color: #8b4513;
        text-decoration: underline;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .section-title {
        background-color: #8b4513;
        color: white;
        padding: 10px;
        border-radius: 5px 5px 0 0;
        margin: -20px -20px 20px -20px;
            
    }
    
</style>

<div class="content">
    
    <div class="product-list">
        <h2 class="section-title">Available Products</h2>
        <div class="product-grid">
            {% for product in products %}
                <div class="product">
                    <img src="{{ product.image.url }}" alt="{{ product.name }}">
                    <h3>{{ product.name }}</h3>
                    <p>{{ product.description }}</p>
                    <a href="{{ product.amazon_link }}" target="_blank">
                        <button>Buy on Amazon</button>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}