{% extends 'bom/bom-base.html' %}

{% load static %}
{% load materializecss %}

{% block head-title %}{{ title }}{% if query %} Search Results{% endif %}{% endblock %}

{% block main %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/dashboard.css' %}"/>
{% endblock %}

{% block content %}
    <div class="container-app">
        <form id="searchForm" name="search-form" action="{% url 'bom:sellers' %}" method="get" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row">
                <div class="input-field col s12 m10">
                    <i class="material-icons prefix">search</i>
                    <input type="search" id="autocomplete-input" autocomplete="off" class="text autocomplete" name="q" value="{% if query %}{{ query }}{% endif %}">
                    <label for="autocomplete-input">Search for sellers:</label>
                </div>
                <div class="col s12 m2 text-center">
                    <button type="submit" class="waves-effect waves-green btn btn-primary input-field" name="action">
                        Submit
                    </button>
                    {% if query %}
                        <a class="waves-effect waves-green btn-flat input-field btn-icon-round" onclick="clearSearchExpression()"><i class="material-icons">clear</i></a>
                    {% endif %}
                </div>
            </div>
        </form>
            <div class="part-list push-footer">
                <div class="responsive-table-wrapper">
                    <table class="highlight part-list tight single-line" style="margin-bottom: 14px;">
                        <thead>
                        <tr>
                            {% if profile.role == 'A' %}
                                <th class="text-normal td-small action-checkbox-column" style="display: none;"><label><input type="checkbox" id="action-select-all"><span></span></label></th>
                            {% endif %}
                            <th class="text-normal td-med">Seller</th>
                            <th class="text-normal td-med">Seller Parts</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for seller in sellers %}
                            <tr>
                                {% if profile.role == 'A' %}
                                    <td class="action-checkbox-column" style="display: none;"><label>{% if part_rev.part.id %}
                                        <input type="checkbox" class="checkbox-array" name="actions" value="{{ part_rev.part.id }}">{% endif %}<span></span></label></td>
                                {% endif %}
                                <td class="text-normal td-med"><a href="{% url 'bom:seller-info' seller_id=seller.id %}">{{ seller.name|default:"<i>No name</i>" }}</a></td>
                                <td class="text-normal td-med">{{ seller.sellerpart_count }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="99" style="text-align: center; padding: 5%;"><i>No sellers found. To add your first seller, first create a part on the <a
                                        href="{% url 'bom:home' %}">home</a> page, then go to the sourcing tab to create a seller and seller part.</i></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if sellers.has_other_pages %}
                    <ul class="pagination center" style="padding-top: 24px;">
                        {% if sellers.has_previous %}
                            <li><a href="?page={{ sellers.previous_page_number }}{% if query %}&q={{ query }}{% endif %}"><i class="material-icons">chevron_left</i></a></li>
                        {% else %}
                            <li class="disabled"><i class="material-icons">chevron_left</i></li>
                        {% endif %}
                        {% for i in sellers.paginator.page_range %}
                            {% if sellers.number == i %}
                                <li class="active green lighten-2"><a>{{ i }}</a></li>
                            {% else %}
                                <li class="waves-effect waves-green"><a href="?page={{ i }}{% if query %}&q={{ query }}{% endif %}">{{ i }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {% if sellers.has_next %}
                            <li><a href="?page={{ sellers.next_page_number }}{% if query %}&q={{ query }}{% endif %}"><i class="material-icons">chevron_right</i></a></li>
                        {% else %}
                            <li class="disabled"><i class="material-icons">chevron_right</i></li>
                        {% endif %}
                    </ul>
                {% endif %}
            </div>
        </form>
    </div>
{% endblock %}

{% block bom-script %}
    <!-- Floating Horizontal Scrollbar -->
    <script type="text/javascript" src="{% static 'bom/js/jquery.ba-floatingscrollbar.min.js' %}"></script>
    <script>
        $(function () {
            $('.responsive-table-wrapper').floatingScrollbar();
        });
    </script>
{% endblock bom-script %}
