{% extends 'oscar/dashboard/layout.html' %}
{% load i18n %}
{% block body_class %}{{ block.super }} create-page{% endblock %}
{% block title %}
    {% blocktrans with name=range.name %}
        Products in range '{{ name }}'
    {% endblocktrans %}
    | {{ block.super }}
{% endblock %}
{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:index' %}">
                    {% trans "Dashboard" %}
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:range-list' %}">
                    {% trans "Ranges" %}
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:range-update' pk=range.id %}">
                    '{{ range.name }}'
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                {% trans "Products" %}
            </li>
        </ol>
    </nav>
{% endblock %}
{% block headertext %}
    {{ range.name }}: {% trans "products" %}
{% endblock %}
{% block dashboard_content %}
    {% if range.includes_all_products %}
        {% trans "This range contains all products. To add products manually, please unselect the 'Includes All Products' option on the edit range page." %}
    {% else %}
        <div class="table-header">
            <h3>{% trans "Add products" %}</h3>
        </div>
        <div class="card card-body bg-light">
            <form method="post" class="form-stacked" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_products"/>
                {% include 'oscar/dashboard/partials/form_fields.html' with form=form %}
                <div class="controls">
                    <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Running...' %}">
                        {% trans "Go!" %}
                    </button>
                </div>
            </form>
            {% with uploads=range.file_uploads.all %}
                {% if uploads %}
                    <div class="table-header">
                        <h3>{% trans "Upload history" %}</h3>
                    </div>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Filename" %}</th>
                                <th>{% trans "New products" %}</th>
                                <th>{% trans "Duplicate products" %}</th>
                                <th>{% trans "Unknown products" %}</th>
                                <th>{% trans "Date uploaded" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for upload in uploads %}
                                <tr>
                                    <td>{{ upload.filepath }}</td>
                                    <td>{{ upload.num_new_skus }}</td>
                                    <td>{{ upload.num_duplicate_skus }}</td>
                                    <td>
                                        {{ upload.num_unknown_skus }}
                                    </td>
                                    <td>
                                        {{ upload.date_uploaded }}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% endif %}
            {% endwith %}
            {% if products %}
                <form method="post">
                    {% csrf_token %}
                    <table class="table table-striped table-bordered table-hover">
                        <caption>
                        <h3 class="float-left">{% trans "Products in range" %}</h3>
                        <div class="float-right">
                            <input type="hidden" name="action" value="remove_selected_products" />
                            <button type="submit"
                                    class="btn btn-secondary"
                                    data-loading-text="{% trans 'Removing...' %}">
                                {% trans "Remove selected products" %}
                            </button>
                        </div>
                        </caption>
                        <thead>
                            <tr>
                                <th></th>
                                <th>
                                    {% trans "UPC" %}
                                </th>
                                <th>
                                    {% trans "Title" context "Product title" %}
                                </th>
                                <th>
                                    {% trans "Is product discountable?" %}
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="product_list">
                            {% for product in products %}
                                <tr id="product_{{ product.pk }}">
                                    <td>
                                        <input type="checkbox" name="selected_product" value="{{ product.id }}" />
                                    </td>
                                    <td>
                                        {{ product.upc|default:"-" }}
                                    </td>
                                    <td>
                                        <a href="{% url 'dashboard:catalogue-product' pk=product.id %}">
                                            {{ product.get_title }}
                                        </a>
                                    </td>
                                    <td>
                                        {% if product.get_is_discountable %}
                                            {% trans "Yes" %}
                                        {% else %}
                                            {% trans "No" %}
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a class="btn btn-danger" href="#" data-behaviours="remove">
                                            {% trans "Remove" %}
                                        </a>
                                        {% if range.is_reorderable %}
                                            <a href="#" class="btn btn-info btn-handle">
                                                <i class="fas fa-arrows-alt"></i>
                                                {% trans "Re-order" context "Change the sequence order" %}
                                            </a>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% include "oscar/dashboard/partials/pagination.html" %}
                </form>
            {% else %}
                <table class="table table-striped table-bordered table-hover">
                    <caption>
                    {% trans "Products in Range" %}
                    </caption>
                    <tr>
                        <td>
                            {% trans "No products found." %}
                        </td>
                    </tr>
                </table>
            {% endif %}
        </div>
    {% endif %}
    <div class="form-actions">
        <a href="{% url 'dashboard:range-update' pk=range.id %}" class="btn btn-primary">
            {% trans "Edit range" %}
        </a>
        {% trans "or" %}
        <a href="{% url 'dashboard:range-list' %}" class="">
            {% trans "return to range list" %}
        </a>
    </div>
{% endblock dashboard_content %}
{% block onbodyload %}
    {{ block.super }}
    oscar.dashboard.ranges.init();
    oscar.dashboard.reordering.init({
    wrapper: '.product_list',
    submit_url: '{% url 'dashboard:range-reorder' pk=range.id %}'
    });
{% endblock %}
