{% extends "base.html" %}
{% block content %}
<div class="notice"><strong>Welcome!</strong> This Amazon-style storefront is server-rendered with Jinax. Product actions use the same Flaxon JSON API that a mobile or React client could use.</div>
<h1>Deals for you</h1>
<div class="grid">
{% for product in products %}
  <article class="card">
    <div class="thumb">{% if product.category == "Electronics" %}⌁{% elif product.category == "Home" %}⌂{% else %}△{% endif %}</div>
    <p class="category">{{ product.category }}</p><h2>{{ product.name }}</h2>
    <p class="rating">★ {{ product.rating }} / 5</p><div class="price"><sup>$</sup>{{ product.price }}</div>
    {% if product.prime %}<p class="prime">✓ Prime delivery</p>{% endif %}
    <div class="card-bottom"><button class="buy" onclick="addToCart({{ product.id }})">Add to cart</button><a class="detail" href="/products/{{ product.id }}">View details</a></div>
  </article>
{% endfor %}
</div>
{% endblock %}