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

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

{% block content %}
<article>
    <p>
        <a href="{% url 'dashboard:catalog' %}">&larr; Back to catalog</a>
    </p>
    <header class="object-header">
        <h1><img src="{% static "images/cubes.png" %}"> {{product.name}}</h1>
        <div class="object-menu">
            {% if perms.core.delete_product %}
            <a href="{% url 'dashboard:product-delete' product.pk %}" class="btn btn-warning">Delete</a>
            {% endif %}
            {% if perms.core.change_product %}            
            <a href="{% url 'dashboard:product-update' product.pk %}" class="btn">Edit</a>
            {% endif %}
        </div>
    </header>
    <section class="panel">
        <header class="panel-header">
            <h4>Details</h4>
        </header>
        <dl class="panel-datalist">
            <dt>Category</dt>
            <dd>{{ product.category }}</dd>

            <dt>Ordering</dt>
            <dd>{{ product.sorting }}</dd>

            <dt>Subtitle</dt>
            <dd><h5>{{ product.subtitle }}</h5></dd>

            <dt>Description</dt>
            <dd>{{ product.description }}</dd>

            <dt>Checkout limit</dt>
            <dd><strong>{{ product.checkout_limit }}</strong></dd>

            <dt>Visibility</dt>
            <dd>
            {% if product.visible_in_listings %}
                <span class="status status-success">Visible in listings</span>
            {% else %}
                <span class="status status-info">Not visible in listings</span>
            {% endif %}
            </dd>

            <dt>Applied options</dt>
            <dd>
                <p><em>Edit product options on the <a href="{% url 'dashboard:catalog' %}">catalog page</a></em></p>
            {% for option in product.options.all %}
                <h3>{{ option.name }}</h3>
                <p>
                    {% for val in option.options %}
                        {{ val }}{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                </p>
            {% endfor %}
            </dd>
        </dl>
    </section>

    <section class="panel">
        <header class="panel-header">
            <h4>Varaints</h4>
            <a href="{% url 'dashboard:variant-create' product.pk %}" class="btn">+ New variant</a>
        </header>
        <table>
            <thead>
                <tr>
                    <th>Sorting</th>
                    <th>Name</th>
                    <th>Visibility</th>
                    <th>SKU</th>
                    <th>Price</th>
                    <th>Weight</th>
                    <th colspan="2">Stock</th>
                </tr>
            </thead>
            <tbody class="sortable" data-model="productvariant" data-filter="product" data-fid="{{ product.pk }}">
                {% for variant in product.variants.all %}
                <tr data-id="{{ variant.pk }}">
                    <td class="handle">&#9776;</td>
                    <td>
                        <h3>{{ variant.name }}</h3>
                    </td>
                    <td>
                        <div class="status-display">
                            {% if product.visible_in_listings and variant.visible_in_listings %}
                            <span class="status-dot status-success"></span>Visible in listings
                            {% elif not product.visible_in_listings and variant.visible_in_listings %}
                            <span class="status-dot status-warning"></span>Not visible because product
                            {% else %}
                            <span class="status-dot status-info"></span>Not visible in listings
                            {% endif %}
                        </div>
                    </td>
                    <td>{{ variant.sku }}</td>
                    <td>${{ variant.price }}</td>
                    <td>{{ variant.weight }}</td>
                    <td>
                        {% if variant.track_inventory %}
                            {{ variant.stock }}
                        {% else %}
                            N/A
                        {% endif %}
                    </td>
                    <td>
                        {% if perms.core.change_productvariant %}
                        <a href="{% url 'dashboard:variant-update' product.pk variant.pk %}">Edit</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>

    <section class="panel">
        <header class="panel-header">
            <h4>Photos</h4>
            <a href="{% url 'dashboard:prodphoto-create' product.pk %}" class="btn">+ Upload new photo</a>
        </header>
        <div class="gallery panel-section sortable" data-model="productphoto" data-filter="product" data-fid="{{ product.pk }}">
        {% for photo in product.productphoto_set.all %}
            <figure class="gallery-item handle" data-id="{{ photo.pk }}">
                <img src="{{ photo.image.url }}">
                <figcaption>
                    <form action="{% url 'dashboard:prodphoto-delete' product.pk photo.pk %}" method="post">
                        {% csrf_token %}
                        <input type="submit" class="btn btn-warning" value="Delete photo">
                    </form>
                </figcaption>
            </figure>
        {% endfor %}
        </div>
    </section>
</article>
{% endblock content %}
