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

{% block content %}
<article>
    <header class="object__header">
        <h1><img src="{% static "images/cubes.png" %}" alt=""> Product</h1>
        <div class="object__menu">
            <a href="{% url 'dashboard:product-delete' product.pk %}" class="action-button action-button--warning">Delete</a>
            <a href="{% url 'dashboard:product-update' product.pk %}" class="action-button">Edit</a>
        </div>
    </header>
    <section class="product__detail object__panel">
        <figure class="product__figure">
            <img class="" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
        </figure>
        <div>
            <h1>{{product.name}}</h1>
            <p>{{product.description}}</p>
            <p>$<strong>{{product.price}}</strong></p>
            <p>{{product.weight.oz}} oz</p>
            <p>Visible in listings: <strong>{{product.visible_in_listings|yesno:"Yes,No"}}</strong></p>
            <p>Stripe ID: {{ product.stripe_id }}</p>
            <p>Ordered {{product.num_ordered|default_if_none:"0"}} time{{ product.num_ordered|default_if_none:"0"|pluralize }}.</p>
        </div>
    </section>
    <section class="object__panel">
        <div class="object__item panel__header panel__header--flex">
            <h4>Photos</h4>
            <a href="{% url 'dashboard:prodphoto-create' product.pk %}" class="action-button order__fulfill">+ Upload new photo</a>
        </div>
        <div class="panel__item gallery">
            {% for photo in product.productphoto_set.all %}
                <figure class="gallery__item">
                    <img src="{{ photo.image.url }}" alt="">
                    <figcaption>
                        <form action="{% url 'dashboard:prodphoto-delete' product.pk photo.pk %}" method="post">
                            {% csrf_token %}
                            <input type="submit" class="action-button action-button--warning" value="Delete photo">
                        </form>
                    </figcaption>
                </figure>
            {% endfor %}
        </div>
    </section>
</article>
{% endblock content %}
