{% extends "base.html" %}
{% load opencve_extras %}

{% block title %}Vendors & Products - {{ block.super }}{% endblock %}

{% block navbar_title%}Vendors & Products{% endblock %}

{% block content %}

<section class="content">
    <div class="row">
        <div class='col-md-6 col-md-offset-3'>
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        Search{% if request.GET.vendor %} in <strong>{{ request.GET.vendor | humanize }}</strong> vendor{% else %} in vendors and products{% endif %}
                    </h3>
                </div>
                <div class="box-body">
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                    <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
                                    </span>
                                    <form method="GET">
                                        {% if request.GET.vendor %}
                                        <input type="hidden" name="vendor" value="{{ request.GET.vendor }}" />
                                        {% endif %}
                                        <input type="text" placeholder="Search" class="form-control" name="search" value="{% if request.GET.search %}{{ request.GET.search }}{% endif %}">
                                    </form>
                                </div>
                                <p class="help-block">Try these examples: <a href="{% url 'vendors' %}?search=python">python</a>, <a href="{% url 'vendors' %}?search=cisco">cisco</a>, <a href="{% url 'vendors' %}?search=microsoft">microsoft</a>, <a href="{% url 'vendors' %}?search=android">android</a>, <a href="{% url 'vendors' %}?search=wordpress">wordpress</a></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class='col-md-5'>
            {% if request.GET.vendor %}
            <div class="box box-info">
                <div class="box-header">
                    <div class="box-title"><i class="fa fa-filter"></i> Vendor <strong>{{ request.GET.vendor | humanize }}</strong> selected
                    </div>
                    <div class="box-tools pull-right">
                        <a type="button" class="btn btn-box-tool" data-toggle="remove" href="{% url 'vendors' %}"><i class="fa fa-times"></i></a>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Vendors</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover table-striped" id="table-vendors">
                        <thead>
                            <tr>
                                <th>Vendor</th>
                                <th class="text-center">Products</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="vendors-tbody">
                            {% include "cves/includes/vendor_list_rows.html" %}
                        </tbody>
                    </table>
                    <div class="center">
                        {% if vendors_has_next %}
                        <button type="button"
                                class="btn btn-default btn-sm load-more"
                                id="vendors-load-more"
                                data-list="vendors"
                                data-url="{% url 'vendors_load_more' 'vendors' %}"
                                data-target="#vendors-tbody"
                                data-after="{{ vendors_next_cursor.0 }}"
                                data-after-id="{{ vendors_next_cursor.1 }}"
                                data-search="{{ request.GET.search|default:'' }}"
                                data-vendor="{{ request.GET.vendor|default:'' }}">
                            Load more
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <div class='col-md-7'>
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Products</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover table-striped" id="table-products">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Vendor</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="products-tbody">
                            {% include "cves/includes/product_list_rows.html" %}
                        </tbody>
                    </table>
                    <div class="center">
                        {% if products_has_next %}
                        <button type="button"
                                class="btn btn-default btn-sm load-more"
                                id="products-load-more"
                                data-list="products"
                                data-url="{% url 'vendors_load_more' 'products' %}"
                                data-target="#products-tbody"
                                data-after="{{ products_next_cursor.0 }}"
                                data-after-id="{{ products_next_cursor.1 }}"
                                data-search="{{ request.GET.search|default:'' }}"
                                data-vendor="{{ request.GET.vendor|default:'' }}">
                            Load more
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}