<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script src="{{url_for('static', filename='plugins/jquery.query-object.js')}}"></script>

<link rel="stylesheet" href="{{url_for('static', filename='css/monster_name.css')}}">
<link rel="stylesheet" href="{{url_for('static', filename='css/item_name.css')}}">

<div class="row">

    <div class="col">

        <div class="row">

            <div class="col">

                <div class="input-group">
                    <input type="text" id="searchInput" autocomplete="off" placeholder="{{_('Search')}}" class="form-control">
                    <span class="input-group-btn">
                        <button onclick="handleFilterMenu()" class="btn btn-primary ml-1">{{_("Filter")}}</button>
                    </span>
                </div>

                <div id="filter">
                    <div class="row p-3">

                        <div class="col-sm-2">
                            <h5 class="text-left">{{_("Order")}}</h5>
                            <hr class="filter-title-hr">
                            <a class="d-block filter-link" activated="{{'1' if keywords.get('order') == 'asc' else '0'}}" onclick="changeFilter('order', 'asc')">{{_("Ascending")}}</a>
                            <a class="d-block filter-link" activated="{{'1' if keywords.get('order') == 'desc' else '0'}}" onclick="changeFilter('order', 'desc')">{{_("Descending")}}</a>
                        </div>

                        <div class="col-sm-2">
                            <h5 class="text-left">{{_("Sort by")}}</h5>
                            <hr class="filter-title-hr">
                            {% for option_key, option_value in options["sort_options"].items() %}
                                {% if option_value == keywords.get("order_by") or option_value == "added" and keywords.get("order_by") is none %}
                                    <a class="d-block filter-link" activated="1" onclick="changeFilter('order_by', '{{option_value}}')">{{option_key}}</a>
                                {% else %}
                                    <a class="d-block filter-link" onclick="changeFilter('order_by', '{{option_value}}')">{{option_key}}</a>
                                {% endif %}
                            {% endfor %}
                        </div>

                        {% if options["filter_options"] %}
                            <div class="col-sm-2">
                                <h5 class="text-left">{{_("Filter by")}}</h5>
                                <hr class="filter-title-hr">

                                {# None button for no filters #}
                                <a class="d-block filter-link" activated="{{'1' if keywords.get('filter_by') == 'None' else '0'}}" onclick="changeFilter('filter_by', 'None')">{{_("None")}}</a>

                                {% for option_key, option_value in options["filter_options"].items() %}
                                    {% if option_value == keywords.get("filter_by") or option_value == "added" and keywords.get("filter_by") is none %}
                                        <a class="d-block filter-link" activated="1" onclick="changeFilter('filter_by', '{{option_value}}')">{{option_key}}</a>
                                    {% else %}
                                        <a class="d-block filter-link" onclick="changeFilter('filter_by', '{{option_value}}')">{{option_key}}</a>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}

                        {# show filtered view col when table has filtered view  #}
                        {% if table in ["cariad", "rapier", "dagger", "one_handed_sword", "two_handed_sword", "shield", "rifle", "duals", "coat", "pants", "gauntlet", "shoes", "hat", "dress", "accessory", "quest"] %}
                        <div class="col-sm-2">
                            <h5 class="text-left">{{_("Filtered view")}}</h5>
                            <hr class="filter-title-hr">
                            <a class="d-block filter-link" activated="{{'1' if keywords.get('fl') == '1' else '0'}}" onclick="changeFilter('fl', '1')">{{_("Filtered")}}</a>
                            <a class="d-block filter-link" activated="{{'1' if keywords.get('fl') == '0' else '0'}}" onclick="changeFilter('fl', '0')">{{_("Unfiltered")}}</a>
                        </div>
                        {% endif %}
                    </div>
                </div>

            </div>

        </div>

        <div class="row mt-3 ml-1 mr-1">
            <div class="col" id="list">
                {% with data=data, subs=subs %}
                    {% include "database/list_items.html" %}
                {% endwith %}
            </div>
        </div>

    </div>

</div>