{% 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 %}
