{% extends "layout.html" %}

{% set active_page = "search" %}

{% block title %}Search{% endblock title %}

{% block imports %}
    <link href="/static/css/search.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block body %}

    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <input id="pathBar" type="search" class="form-control" placeholder="Filter path">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <span onclick="document.getElementById('barToggle').click()">Must match&nbsp</span>
                            <input title="Toggle between 'Should' and 'Must' match mode" type="checkbox" id="barToggle" onclick="toggleSearchBar()" checked>
                        </div>
                    </div>
                    <input id="searchBar" type="search" class="form-control" placeholder="Search">

                </div>

                <input title="File size" id="sizeSlider" name="size">

                <div class="row">
                    <div class="col">
                        <label for="directories" >Search in directories</label>

                        <select class="custom-select" id="directories" multiple size="6">
                            {% for dir_id in directories %}
                                {% if directories[dir_id].enabled %}
                                    <option selected value="{{ directories[dir_id].id }}">{{ directories[dir_id].name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col">
                        <label>Mime types</label>

                        <div class="tree"></div>
                    </div>
                </div>
            </div>
        </div>

        <div id="searchResults"></div>

        <script>
            var mimeMap = {{ mime_map | tojson }};
        </script>
        <script src="/static/js/search.js"></script>
    </div>

{% endblock body %}