{% extends "base.html" %}

{% set active_page = "Database" %}


{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pagination.css') }}">
{% endblock %}


{% block body %}
<script type="text/javascript" src="{{ url_for('static', filename='js/update_url_variables.js') }}"></script>

<div class="row justify-content-center">
    <div class="col-xl-6 col-lg-8 col-md-10 mt-4">
        <h3 class="mb-3">Browse Firmware Database</h3>
    </div>
</div>

<div class="row justify-content-center" id="dropdown-div">
    <div class="col-xl-6 col-lg-8 col-md-10">
        <form>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="control-label" for="device_class_dropdown">Device Class:</label>
                    <select class="form-control form-control-sm" id="device_class_dropdown" name='device_class_dropdown'
                            onchange="window.location=update_url_variables(update_url_variables(window.location.toString(), 'device_class', this.value), 'page', '')">
                        <option value=''></option>
                        {% for class in device_classes | sort %}
                            <option {% if class in current_class %}selected{% endif %} value='{{ class }}'>{{ class }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group col-md-6">
                    <label class="control-label" for="vendor_dropdown">Vendor:</label>
                    <select class="form-control form-control-sm" id="vendor_dropdown" name='vendor_dropdown'
                            onchange="window.location=update_url_variables(update_url_variables(window.location.toString(), 'vendor', this.value), 'page', '')">
                        <option value=''></option>
                        {% for vendor in vendors | sort %}
                            <option {% if vendor in current_vendor %}selected{% endif %} value='{{ vendor }}' style="font-size: 14px;">{{ vendor }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </form>
        <script type="text/javascript">
          var url = window.location.href;
          // if "parent firmware search" is activated: hide dropdown filters
          if( url.search( 'only_firmwares=True' ) > 0 ) {
              document.getElementById("dropdown-div").style.display = "none";
          }
        </script>
    </div>
</div>

{% if search_parameters['query_title'] %}
    <div class="row justify-content-center">
        <div class="col-xl-6 col-lg-8 col-md-10">
            <div class="list-group mt-4">
                <button data-toggle="collapse" data-target="#search_query" class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center" style="border: 0;">
                    {% set search_target = "File" if not search_parameters['only_firmware'] else "Firmware" if not search_parameters['inverted'] else "Inverse Firmware" %}
                    Show Search Query <span class="badge badge-primary">{{ search_target }} Search</span>
                </button>
                <div id="search_query" class="collapse list-group-item p-0 border-0">
                    <pre class="bg-light p-2 mb-0 rounded-bottom">{{ search_parameters['query_title'] | render_query_title }}</pre>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<div class="row justify-content-center">
    <div class="mt-4 col-xl-6 col-lg-8 col-md-10">
        {% if firmware_list %}
            <ul class="list-group-flush p-3 bg-light">
                {% for firmware in firmware_list %}
                    {{ firmware | firmware_detail_tabular_field | safe }}
                {% endfor %}
            </ul>
        {% else %}
            <h4>No firmware found in database!</h4>
        {% endif %}
    </div>
</div>

<div class="row justify-content-center">
    <div style="max-width: 300px;">
        {% if pagination is defined %}
            {{ pagination.info }}
            {{ pagination.links }}
        {% endif %}
    </div>
</div>

{% endblock %}