{% extends 'base.html' %}
{% set product = page.product %}
{% set has_product = page.product is defined %}
{% set cart_length = cart_items | length %}

{% block head %}
{{super()}}
{% if has_product %}
    <link rel="preload" as="image" href="{{product.images[0]}}" />
{% endif %}
<script type="importmap">
      {
        "imports": { "optiml": "http://localhost:3000/index.js" }
      }
</script>
{% endblock %}

{% block header_nav %}
    {{super()}}
    {% include('partials/js/cart-javascript.html') %}
{% endblock %}

{% block content %}
<h1>{{page.title}}</h1>
<grid>
<column>
    <a href="{{url_for('ecommerce.cart')}}">🛍Cart has {{cart_length}} item{{'s' if cart_length>1 else ''}}.</a>
    <hr>
    {{request.path_params}}
    <hr>
    request.url: {{request.url}}
    <hr>
    page.url: {{page.url}}
</column>
<column>
    {% if has_product %}
        {% include('product-page.html') %}
    {% else %}
        {% include('partials/product-listing.html') %}
    {% endif %}
</column>
</grid>
<style>
products-listing {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    & product {
        width: 22rem;
    }
}
product {
    display: block;
    background: #eee;
    padding: 1rem;
    border-radius: 5px;

    & product-price {
        display: block;
        font-size: 2rem;
    }
    & product-image img {width: 100%;}
}
grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
</style>
{{page.content}}
{% endblock %}