{% extends 'base.html' %}
{% block content %}
<h1 class="mb-4 text-center">Welcome to the Plant Price Tracker!</h1>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
  {% if use_placeholder %}
    {% for i in range(6) %}
    <div class="col">
      <div class="card h-100 shadow-sm">
        <img src="https://placehold.co/150x150" class="card-img-top" alt="Placeholder Plant {{ i+1 }}">
        <div class="card-body">
          <h5 class="card-title">Placeholder Plant {{ i+1 }}</h5>
          <p class="card-text text-muted">No real submissions yet — submit a plant to see it here.</p>
        </div>
      </div>
    </div>
    {% endfor %}
  {% else %}
    {% for sub in submissions %}
    <div class="col">
      <div class="card h-100 shadow-sm">
        <img src="{{ sub.image_url or 'https://placehold.co/150x150' }}" class="card-img-top" alt="{{ sub.common_name }}">
        <div class="card-body">
          <h5 class="card-title">{{ sub.common_name }}</h5>
          <p class="card-text">
            <strong>${{ '%.2f'|format(sub.price) }}</strong><br>
            Source: {{ sub.source }}<br>
            Date: {{ sub.timestamp.strftime('%Y-%m-%d') }}
          </p>
        </div>
      </div>
    </div>
    {% endfor %}
  {% endif %}
</div>
{% endblock %}