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

<!-- SEARCH PAGE BEGIN -->
<form name="search" method="get" action="search.php">
  <section class='searchform box'>
    <div class='row'>
      <!-- SEARCH IN-->
      <div class='col-md-3'>
        <label for='searchin'>{{ 'Search in'|trans }}</label>
        <select name='type' id='searchin' class='form-control'>
          <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 itemsTypesArr %}
            <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-6'>
        <label for='tags-select'>{{ 'With the tag'|trans }}</label>
        <select multiple name='tags[]' id='tags-select' class='form-control selectpicker' data-show-subtext='true' data-live-search='true' data-showtick='true' data-actions-box='true'>
          {% for tag in tagsArr %}
            <option value='{{ tag.tag }}'{{ tag.tag in App.Request.query.get('tags') ? ' selected' }}>{{ tag.tag|raw }}</option>
          {% endfor %}
        </select>
      </div>
      <!-- END SEARCH WITH TAG -->

      <!-- VISIBILITY SEARCH -->
      <div class='col-md-3'>
        <label for='visibility'>{{ 'And visibility is:'|trans }} </label><br>
        <select id='visibility' name='vis' class='form-control'>
          <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='form-control 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='date' class='formcontrol' value='{{ Request.query.get('from') != '' ? Request.query.get('from') }}'/>
        <label class='ml-2' for='to'>{{ 'and'|trans }}</label>
        <input id='to' name='to' type='date' class='formcontrol' 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' class='form-control' 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='form-control'>
          <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' class='form-control' name='body' type='text' value='{{ body }}'/>

        <!-- AND / OR -->
        <label for='andor'>{{ 'Space means'|trans }}</label>
        <select class='mt-2 custom-control-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='form-control'>
          <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 btn btn-primary' value='Submit' type='submit'>
        {{ 'Launch search'|trans }}
      </button>
      <a href='search.php' class='button btn btn-danger'>
        {{ 'Clear all'|trans }}
      </a>
    </div>
  </section>
<!-- if there is no query, end the form here, otherwise let it open so the filter/order/sort menu can be part of it
  it avoids having to repeat the query params -->
{{ not App.Request.query.has('type') ? '</form>' }}
<a href='#' id='anchor'></a>