{% include('head.html') %}

<!-- SEARCH PAGE BEGIN -->
<section class='searchform box'>
    <form name="search" method="get" action="search.php">
        <div class='row'>
            <!-- SEARCH IN-->
            <div class='col-md-3'>
                <label for='searchin'>{{ 'Search in'|trans }}</label>
                <select name='type' id='searchin' class='custom-select'>
                    <option value='experiments'>{% trans %}Experiment {% plural 2 %}Experiments{% endtrans %}</option>
                    <option disabled>----------------</option>
                    <option value='database' {{ Request.query.get('type') == 'database' ? 'selected' }}>{{ 'Database'|trans }}</option>
                    {% for category in categoryArr %}
                    <option value='{{ category.category_id }}' {{ Request.query.get('type') == category.category_id ? 'selected' }}>
                        {{ category.category }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <!-- END SEARCH IN -->

            <!-- SEARCH WITH TAG -->
            <div class='col-md-3'>
                <label for='tags-select'>{{ 'With the tag'|trans }}</label>
                <select multiple name='tags[]' id='tags-select' class='custom-select'>
                    {% for tag in tagsArr %}
                    <option value='{{ tag.tag }}' {{ tag.tag in selectedTagsArr ? 'selected' }}>{{ tag.tag|raw }}</option>
                    {% endfor %}
                </select>
            </div>
            <!-- END SEARCH WITH TAG -->

            <!-- VISIBILITY SEARCH -->
            <div class='col-md-6'>
                <label for='visibility'>{{ 'And visibility is:'|trans }} </label><br>
                <select id='visibility' name='vis' class='custom-select'>
                    <option value=''>{{ 'Select visibility'|trans }}</option>
                    <option value='organization' {{ Request.query.get('vis') == 'organization' ? 'selected' }}>{{ 'Organization'|trans }}</option>
                    <option value='team' {{ Request.query.get('vis') == 'team' ? 'selected' }}>{{ 'Team'|trans }}</option>
                    <option value='user' {{ Request.query.get('vis') == 'user' ? 'selected' }}>{{ 'Only me'|trans }}</option>
                    {% for teamGroup in teamGroupsArr %}
                        <option value='{{ teamGroup.id }}' {{ Request.query.get('vis') == teamGroup.id ? 'selected' }}>
                        {{ 'Group'|trans }} {{ teamGroup.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <br>
            <!-- END VISIBILITY SEARCH -->

            <!-- SEARCH ONLY -->
            <div class='col-md-6'>
                <label for'searchonly'>{{ 'Search only in experiments owned by:'|trans }} </label><br>
                <select id='searchonly' name='owner' class='custom-select mb-3'>
                    <option value=''>{{ 'Yourself'|trans }}</option>
                    <!-- add an option to search in the whole team (owner = 0) -->
                    <option value='0' {{ Request.query.get('owner') == '0' ? 'selected' }}>{{ 'All the team'|trans }}</option>
                    <option disabled>----------------</option>
                    {% for user in usersArr %}
                        <option value='{{ user.userid }}' {{ Request.query.get('owner') == user.userid ? 'selected' }}>
                            {{ user.fullname|raw }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <br>
            <!-- END SEARCH ONLY -->

        </div>
        <!-- NEW ROW -->
        <div class='row'>

            <!-- SEARCH DATE -->
            <div class='col-md-8'>
                <label for='from'>{{ 'Where date is between'|trans }}</label>
                <input id='from' name='from' type='text' size='8' class='datepicker' value='{{ Request.query.get('from') != '' ? Request.query.get('from') }}'/>
                <label span style='margin:0 10px;' for='to'> {{ 'and'|trans }} </label>
                <input id='to' name='to' type='text' size='8' class='datepicker' value='{{ Request.query.get('to') != '' ? Request.query.get('to') }}'/>
            </div>
            <!-- END SEARCH DATE -->

        </div>
        <!-- NEW ROW -->
        <div class='row'>

            <!-- TITLE -->
            <div class='col-md-6'>
                <label for='title'>{{ 'And title contains'|trans }}</label>
                <input id='title' name='title' type='text' value='{{ title }}'/>
            </div>
            <!-- END TITLE -->

            <!-- STATUS -->
            <div class='col-md-4'>
                <label for='status'>{{ 'And status is'|trans }}</label>
                <select id='status' name='status' class='custom-select'>
                    <option value=''>{{ 'Select status'|trans }}</option>
                    {% for status in statusArr %}
                        <option value='{{ status.category_id }}' {{ Request.query.get('status') == status.category_id ? 'selected' }}>
                            {{ status.category }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <!-- END STATUS -->

        </div>
        <!-- NEW ROW -->
        <div class='row'>

            <!-- BODY -->
            <div class='col-md-6'>
                <label for='body'>{{ 'And body contains'|trans }}</label>
                <input id='body' name='body' type='text' value='{{ body }}'/>

                <!-- AND / OR -->
                <label for='andor'>{{ 'Space means'|trans }}</label>
                <select class='mt-2 custom-select-sm' id='andor' name='andor'>
                    <option value='and' {{ Request.query.get('andor') == 'and' ? 'selected' }}>{{ 'and'|trans }}</option>
                    <option value='or' {{ Request.query.get('andor') == 'or' ? 'selected' }}>{{ 'or'|trans }}</option>
                </select>
            </div>
            <!-- END TITLE/BODY block -->

            <!-- RATING -->
            <div class='col-md-4'>
                <label for='rating'>{{ 'And rating is'|trans }}</label>
                <select id='rating' name='rating' class='custom-select'>
                    <option value=''>{{ 'Select number of stars'|trans }}</option>
                    <option value='no'>{{ 'Unrated'|trans }}</option>
                    {% for i in range(1, 5) %}
                        <option value='{{ i }}' {{ Request.query.get('rating') == i ? 'selected' }}>{{ i }}</option>
                    {% endfor %}
                </select>
            </div>
            <!-- END RATING -->
        </div>
        <p>{{ "Tip: you can use '%' as wildcard"|trans }}</p>

        <div style='margin:30px;' class='text-center'>
            <button id='searchButton' class='button' value='Submit' type='submit'>
                {{ 'Launch search'|trans }}
            </button>
        </div>
    </form>
</section>
<a href='#' id='anchor'></a>
<script src='app/js/search.min.js?v={{ v }}'></script>