{% extends "layout.html" %}

{% set active_page = "search" %}

{% block title %}Recherche{% 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="Filtrer le chemin">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <span onclick="document.getElementById('barToggle').click()">Doit être égal&nbsp</span>
                            <input title="Basculer entre 'Devrait' and 'doit' être égal" type="checkbox" id="barToggle" onclick="toggleSearchBar()" checked>
                        </div>
                    </div>
                    <input id="searchBar" type="search" class="form-control" placeholder="Recherche">

                </div>

                <input title="Taille des fichiers" id="sizeSlider" name="size">

                <div class="row">
                    <div class="col">
                        <label for="directories" >Rechercher dans les dossiers</label>

                        <select class="custom-select" id="directories" multiple size="6">
                            {% if directories | length >  0%}
                                {% for dir in directories %}
                                    <option selected value="{{ dir.id }}">{{ dir.name }}</option>
                                {% endfor %}
                            {% else %}
                                <option disabled>Il n'existe aucun dossier actif auquel vous avez accès</option>
                            {% endif %}
                        </select>
                    </div>

                    <div class="col">
                        <label>Types de fichier</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 %}