{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="jumbotron bg-light p-5 rounded">
                <h1 class="display-4">Welcome to the Decision Tree Helpdesk</h1>
                <p class="lead">Find solutions to your problems by answering simple yes/no questions.</p>
                <hr class="my-4">
                <p>Choose a product below to get started with the decision tree.</p>
            </div>
        </div>
    </div>
    
    <div class="row">
        {% for product in products %}
        <div class="col-md-4 mb-4">
            <div class="card h-100 shadow">
                {% if product.thumbnail %}
                <img src="{{ product.thumbnail }}" class="card-img-top" alt="{{ product.title }}">
                {% else %}
                <div class="card-img-top bg-light text-center py-5">
                    <i class="fas fa-question-circle fa-4x text-muted"></i>
                </div>
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ product.title }}</h5>
                    <p class="card-text">{{ product.description|truncate(100) }}</p>
                </div>
                <div class="card-footer bg-white border-top-0">
                    <a href="{{ url_for('user.product_detail', product_id=product.id) }}" class="btn btn-primary">
                        View Details
                    </a>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="alert alert-info">
                No products available yet. Check back later!
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}