layout: default


<div class=“columns is-multiline”>

<div class="column is-6">
    <figure class="image is-4by3">
        <img src="{{ page.image }}" />
    </figure>
</div>

<div class="column is-6">
    <p class="title is-3">{{ page.title }}</p>
    <p class="subtitle is-3">{{ page.subtitle }}</p>
    <p class="title is-4 has-text-right">{{ page.price }}</p>
    {% if page.product_code %}
    <p class="subtitle is-5 has-text-right">{{ page.product_code }}</p>
    {% endif %}

    {% if page.rating %}
        {% include rating.html rating=page.rating %}
    {% endif %}

    {% if page.features %}
    <div class="content">
        {% for feature in page.features %}
        <p>
            <span class="icon">
                {% if feature.icon %}
                <i class="fas {{ feature.icon }}"></i>
                {% else %}
                <i class="fas fa-circle fa-xs"></i>
                {% endif %}
            </span> 
            <span>{{ feature.label }}</span></p>
        {% endfor %}
    </div>
    {% endif %}
</div>

<div class="column is-12">
    <p class="title is-4">Description</p>
    <div class="content">

        {{ content }}
    </div>
</div>

{% if site.data.reviews[page.product_code] %}
<div class="column is-12">
    <p class="title is-4">Reviews</p>
    {% for review in site.data.reviews[page.product_code] %}
    {% include review.html %}
    {% endfor %}
</div>
{% endif %}

</div>