{% extends "base.html" %}
{% load static %}

{% block head_title %}{{ product.name }} | {% endblock %}

{% block head %}
    <script defer src="{% static 'scripts/product_gallery.js' %}"></script>
{% endblock %}

{% block content %}
<article class="product__detail">
    <section class="product__gallery">
        {% for photo in product.productphoto_set.all %}
            <img class="gallery__thumbnail {% if forloop.first %}gallery__thumbnail--focus{% endif %}" src="{{ photo.image.url }}" alt="{{ photo }}">
        {% endfor %}
    </section>
    <figure class="gallery__image-wrapper">
        <img class="gallery__image" src="{{ product.get_first_img.image.url }}" alt="{{ product.name }}">
    </figure>
    <section class="product__info">
    	<h1>{{product.name}}</h1>
        <h3>{{product.subtitle}}</h3>
        <p>{{product.description}}</p>
        <p class="site__ft-stamp"><img class="fair_trade--small" src="{% static 'images/fair_trade_stamp.png' %}" alt="Fair trade"></p>
        <p>$<strong>{{product.price}}</strong></p>
        <p>{{product.weight.oz|floatformat}}oz</p>
    	<form class="product__form" method="post" action="{% url 'storefront:cart-add' product.pk %}">
            {% csrf_token %}
            {{ form.as_p }}
            <p>
                <input type="submit" value="Add to cart">
            </p>
        </form>
    </section>
</article>
{% endblock %}
