---
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>