{% extends "base.html" %}

{% block title %}Ethio-Gebeya | Modern Marketplace{% endblock %}

{% block content %}
<header class="hero">
  <h1 class="display-3">Welcome to Ethio-Gebeya</h1>
  <p class="lead">Your premium destination for quality goods.</p>
  <div class="mt-4">
    <button class="btn btn-lg" style="background-color: var(--accent); color: white;">Start Shopping</button>
  </div>
</header>

<main class="product-grid">
    {% for product in products %}
    <article class="product-card">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description|truncatewords:15 }}</p>
        <p class="price" style="font-weight: 700; color: var(--primary);">ETB {{ product.price }}</p>
        <a href="#" style="text-decoration: none; color: var(--accent);">View Details &rarr;</a>
    </article>
    {% empty %}
    <p>No products available yet.</p>
    {% endfor %}
</main>
{% endblock %}