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

{% block head_title %}Catalog | {% endblock %}

{% block content %}
<article>
    <header class="object-header">
        <h1><img src="{% static 'images/cubes.png' %}"> Catalog</h1>
        <div class="object-menu">
            <a href="{% url 'dashboard:category-create' %}" class="btn">+ New category</a>
            <a href="{% url 'dashboard:product-create' %}" class="btn">+ New product</a>
        </div>
    </header>

    {% for category in category_list %}
    <section class="panel">
        <header class="panel-header">
            <h3>{{ category }}</h3>
            <a href="{% url 'dashboard:category-detail' category.pk %}" class="btn">View category &rarr;</a>
        </header>
        {% include 'dashboard/product/_table.html' with product_list=category.product_set.all category=category %}
    </section>
    {% endfor %}

    {% if uncategorized_products|length > 0 %}
    <section class="panel">
        <header class="panel-header">
            <h4>Uncategorized Products</h4>
        </header>
        {% include 'dashboard/product/_table.html' with product_list=uncategorized_products %}
    </section>
    {% endif %}

    <section class="panel">
        <header class="panel-header">
            <h4>Product Options</h4>
            <a href="{% url 'dashboard:option-create' %}" class="btn">+ New product option</a>
        </header>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Values</th>
                </tr>
            </thead>
            <tbody>
                {% for option in option_list  %}
                <tr class="is-link" onclick="window.location='{% url 'dashboard:option-detail' option.pk %}'">
                    <th>{{ option.name }}</th>
                    <td>
                        {% for val in option.options %}
                            {{ val }}{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
</article>
{% endblock content %}
