{% include 'head.html' %}

<!-- Modal for advanced search -->
<div class='modal fade' id='advancedSearchModal' tabindex='-1' role='dialog' aria-labelledby='advancedSearchModalLabel' aria-hidden='true'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='advancedSearchModalLabel'>{{ 'Search Syntax'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' data-wait='{{ 'Please wait…' }}'>
        <h3>Search terms</h3>
        <p>The search is performed against the title and the body.</p>
        <dl>
          <dt>Term</dt>
          <dd>A sequence of characters without space (<code>&blank;</code>).<br>
              <em>termA</em> or <em>termB</em> or <em>456</em>
          </dd>
          <dt>Quoted term</dt>
          <dd>A sequence of characters including space (<code>&blank;</code>) enclosed in single (<code>'</code>) or double (<code>"</code>) quotation marks.<br>
              <em>'Hello world'</em> or <em>"I love eLabFTW!"</em>
          </dd>
        </dl>
        <p>Two wildcards are available. The percent sign (<code>%</code>) matches zero or more characters while the underscore (<code>_</code>) matches exactly one character. To search for literal <code>%</code> or <code>_</code> the characters need to be escaped with a backslash  <code>\%</code> or <code>\_</code>.</p>
        <h3>Term concatenation and grouping</h3>
        <p>Terms can be connected in different ways:</p>
        <ul>
          <li><code>OR</code> or <code>|</code>, <em>termA OR termB</em> or <em>termA | termB</em></li>
          <li><code>AND</code>, <code>&amp;</code> or space (<code>&blank;</code>), <em>termA termB</em> or <em>termA AND termB</em> or <em>termA & termB</em></li>
          <li><code>NOT</code>, <code>-</code> or <code>!</code>, <em>! termA</em> or <em>NOT termA</em></li>
          <li>Parenthesis <code>()</code>, <em>(termA OR termB) AND ! termC</em></li>
        </ul>
        <p>The operators are listed in increasing order of precedence. Note the space around the operators. <em>termA termB OR termC</em> is equivalent to <em>(termA AND termB) OR termC</em>. To give priority to <code>OR</code> use parenthesis: <em>termA AND (termB OR termC)</em>.</p>
        <h3>Field/value pair searches</h3>
        <p>Field/value pairs are also applicable in the quick search fields.</p>
        <p>Basic syntax <code>[<strong>field</strong>]:[value]</code></p>
        <dl>
          <dt>attachment</dt>
          <dd>yes or no, true or false, 1 or 0, on or off</dd>
          <dt>author</dt>
          <dd>
            Term or Quoted term<br>
            Without any author the entire team will be searched.
          </dd>
          <dt>body</dt>
          <dd>Term or Quoted term</dd>
          <dt>category</dt>
          <dd>Term or Quoted term; Only if Database is selected.</dd>
          <dt>date</dt>
          <dd><a href='#dateFormats'>See accepted date formats below</a></dd>
          <dt>elabid</dt>
          <dd>Term or Quoted term</dd>
          <dt>group</dt>
          <dd>Term or Quoted term</dd>
          <dt>locked</dt>
          <dd>yes or no, true or false, 1 or 0, on or off</dd>
          <dt>rating</dt>
          <dd>1, 2, 3, 4, 5, unrated or 0</dd>
          <dt>status</dt>
          <dd>Term or Quoted term; Only if Experiment is selected.</dd>
          <dt>timestamped</dt>
          <dd>yes or no, true or false, 1 or 0, on or off</dd>
          <dt>title</dt>
          <dd>Term or Quoted term</dd>
          <dt>visibility</dt>
          <dd>Term or Quoted term<br>A group name (e.g., 'Lab Heroes') or 'public', 'organization', 'team', 'user', or 'useronly'.</dd>
        </dl>
        <h3 id='dateFormats'>Date formats</h3>
        <p>A date has to be provided in the following format: <code>YYYYMMDD</code>,
          i.e., four digit year, two digit month, and two digit day.
          Year, month and day can&mdash;but don't have to&mdash;be separated by
          hyphen (<code>-</code>),
          slash (<code>/</code>),
          period (<code>.</code>),
          or comma (<code>,</code>).<br>
          Either a <strong>single date</strong> or a <strong>date range</strong> can be used.</p>
        <dl>
          <dt>Single date: {operator}date</dt>
          <dd>operator: <code>&lt;</code>, <code>&lt;=</code>, <code>=</code>, <code>&gt;=</code>, <code>&gt;</code>, or <code>!=</code><br>
            An operator is optional. default is =<br>
            e.g., <em>date:17890714</em> or <em>date:>1909-12-12</em> or <em>date:>=1867.11.07</em>
          </dd>
          <dt>Date range: date..date</dt>
          <dd>Two dates separated by two periods (<code>..</code>)<br>
            e.g., <em>date:20200101..20201231</em>
          </dd>
        </dl>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>


<!-- SEARCH PAGE BEGIN -->
<form name='search' method='get' action='search.php'>
  <section class='searchform box'>
    <div class='row' style="align-items:flex-end;">
      <!-- SEARCH IN-->
      <div class='col-md-3 mb-2'>
        <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 mb-2'>
        <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.all('tags') ? ' selected' }}>{{ tag.tag|raw }}</option>
          {% endfor %}
        </select>
      </div>
      <!-- END SEARCH WITH TAG -->
    </div>

    <!-- NEW ROW -->
    <div class='row'>
      <div class='col-md-8 mb-2'>
        <label for='extendedArea'><i class='fas fa-search'></i> {{ 'Search query'|trans }}</label>
        <textarea
          id='extendedArea'
          name='extended'
          rows='10'
          class='form-control {{- extendedError ? ' is-invalid' }}'
          style='font-family:monospace;'
          placeholder='author:"{{ App.Users.userData.fullname|raw }}" status:"Running"'
          aria-describedby='extendedFeedback'
        >{{ extended }}</textarea>

        <!-- this is where the errors will be displayed -->
        <div id='extendedFeedback' class='invalid-feedback'>{{ extendedError|raw }}</div>

        <small class='form-text text-muted'>
          Press <kbd><kbd>ctrl</kbd> + <kbd>enter</kbd></kbd> or <kbd><kbd>⌘</kbd> + <kbd>enter</kbd></kbd> to submit search.
        </small>
      </div>
      <div class='col-md-4 mb-2'>
        <p>Allowed Fields (<code><strong>field</strong>:value</code>):</p>
        <ul class='list-unstyled'>
          <li><strong>attachment</strong>: yes or no</li>
          <li><strong>author</strong>: Simple or Quoted term</li>
          <li><strong>body</strong>: Simple or Quoted term</li>
          <li><strong>category</strong>: Simple or Quoted term</li>
          <li><strong>date</strong>: see date format</li>
          <li><strong>elabid</strong>: Simple or Quoted term</li>
          <li><strong>group</strong>: Simple or Quoted term</li>
          <li><strong>locked</strong>: yes or no</li>
          <li><strong>rating</strong>: 1, 2, 3, 4, 5, or unrated or 0</li>
          <li><strong>status</strong>: Simple or Quoted term</li>
          <li><strong>timestamped</strong>: yes or no</li>
          <li><strong>title</strong>: Simple or Quoted term</li>
          <li><strong>visibility</strong>: Simple or Quoted term</li>
        </ul>
        <a class='clickable' data-action='toggle-modal' data-target='advancedSearchModal'>{{ 'Full syntax'|trans }}</a>
      </div>
    </div>

    <h4 data-action='toggle-next' data-icon='extendedSearchIcon'><i id='extendedSearchIcon' class='fas fa-chevron-circle-right'></i> {{ 'Search helpers'|trans }}</h4>
    <div hidden class='box mb-1' data-save-hidden='searchHelpersDiv' style='overflow:visible;'>
      <div class='row'>
        <!-- AUTHOR/OWNER HELPER -->
        <div class='col-md-6 mb-md-3'>
          <label for='searchonly'>{{ 'And author is'|trans }}/{{ 'belongs to group:'|trans }}</label><br>
          <select id='searchonly' name='owner' data-filter='(?:author|group)' class='form-control selectpicker filterHelper' data-show-subtext='true' data-live-search='true'>
            <option data-action='clear'>{{ 'Select author'|trans }}/{{ 'group'|trans }}</option>
            {% for user in usersArr %}
              <option value='author:{{ user.fullname|raw }}' {{- Request.query.get('owner') == 'author:'~user.fullname|raw ? ' selected' }}>[{{ 'author'|trans }}] {{ user.fullname|raw }}</option>
            {% endfor %}
            {% for group in teamGroups %}
              <option value='group:{{ group|raw }}' {{- Request.query.get('owner') == 'group:'~group|raw ? ' selected' }}>[{{ 'group'|trans }}] {{ group|raw }}</option>
            {% endfor %}
          </select>
        </div>
        <!-- END AUTHOR/OWNER HELPER -->

      </div>
      <!-- NEW ROW -->
      <div class='row mb-md-3'>
        <!-- SEARCH DATE -->
        <div class='col-md-3'>
          <label class='d-inline' for='date'>{{ 'Date from'|trans }}</label>
          <div class='input-group'>
            <div class='input-group-prepend'>
              <select id='dateOperator' name='dateOperator' class='brr-none form-control filterHelper' data-filter='date'>
                <option value='<' title='{{ 'less than'|trans }}' {{- Request.query.get('dateOperator') == '<' ? ' selected' }}>&lt;</option>
                <option value='<=' title='{{ 'less than or equal to'|trans }}' {{- Request.query.get('dateOperator') == '<=' ? ' selected' }}>&le;</option>
                <option value='=' title='{{ 'equal to'|trans }}' {{- Request.query.get('dateOperator') == '=' or Request.query.get('dateOperator') is null ? ' selected' }}>=</option>
                <option value='>=' title='{{ 'greater than or equal to'|trans }}' {{- Request.query.get('dateOperator') == '>=' ? ' selected' }}>&ge;</option>
                <option value='>' title='{{ 'greater than'|trans }}' {{- Request.query.get('dateOperator') == '>' ? ' selected' }}>&gt;</option>
                <option value='!=' title='{{ 'not equal to'|trans }}' {{- Request.query.get('dateOperator') == '!=' ? ' selected' }}>&ne;</option>
              </select>
            </div>
            <input id='date' name='date' type='date' class='form-control filterHelper' data-filter='date' value='{{ Request.query.get('date') != '' ? Request.query.get('date') }}'/>
          </div>
        </div>
        <div class='col-md-3'>
          <label class='d-inline' for='dateTo'>{{ 'Date to (optional)'|trans }}</label>
          <input id='dateTo' name='dateTo' type='date' class='form-control filterHelper' data-filter='date' value='{{ Request.query.get('dateTo') != '' ? Request.query.get('dateTo') }}'/>
        </div>
        <!-- END SEARCH DATE -->

        <!-- LOCK -->
        <div class='col-md-3'>
          <label class='d-inline' for='locked'>{{ 'Locked'|trans }}</label>
          <select id='locked' name='locked' class='form-control filterHelper' data-filter='locked'>
            <option value='' data-action='clear'>{{ 'Select lock status'|trans}}</option>
            <option value='yes' {{- Request.query.get('locked') == 'yes' ? ' selected' }}>{{ 'Yes'|trans|lower }}</option>
            <option value='no' {{- Request.query.get('locked') == 'no' ? ' selected' }}>{{ 'No'|trans|lower }}</option>
          </select>
        </div>
        <!-- END LOCK -->

        <!-- LOCK -->
        <div class='col-md-3'>
          <label class='d-inline' for='timestamped'>{{ 'Timestamped'|trans }}</label>
          <select id='timestamped' name='timestamped' class='form-control filterHelper' data-filter='timestamped'>
            <option value='' data-action='clear'>{{ 'Select timestamp status'|trans}}</option>
            <option value='yes' {{- Request.query.get('timestamped') == 'yes' ? ' selected' }}>{{ 'Yes'|trans|lower }}</option>
            <option value='no' {{- Request.query.get('timestamped') == 'no' ? ' selected' }}>{{ 'No'|trans|lower }}</option>
          </select>
        </div>
        <!-- END LOCK -->

      </div>
      <!-- NEW ROW -->
      <div class='row mb-md-3'>
        <div class='col-md-4'>
          <!-- STATUS ONLY FOR EXPERIMENTS -->
          <div id='searchStatus'>
            <label for='status'>{{ 'And status is'|trans }}</label>
            <select id='status' name='status' data-filter='status' class='form-control filterHelper'>
              <option value='' data-action='clear'>{{ 'Select status'|trans }}</option>
              {% for status in statusArr %}
                <option {{- Request.query.get('status') == status.category ? ' selected' }}>
                  {{ status.category }}
                </option>
              {% endfor %}
            </select>
          </div>
          <!-- END STATUS -->
          <!-- CATEGORY ONLY FOR DATABASE -->
          <div id='searchCategory' hidden>
            <label for='category'>{{ 'And category is'|trans }}</label>
            <select id='category' name='category' data-filter='category' class='form-control filterHelper'>
              <option value='' data-action='clear'>{{ 'Select category'|trans }}</option>
              {% for category in itemsTypesArr %}
                <option {{- Request.query.get('category') == category.category ? ' selected' }}>
                  {{ category.category }}
                </option>
              {% endfor %}
            </select>
          </div>
          <!-- END CATEGORY -->
        </div>
        <!-- RATING -->
        <div class='col-md-4'>
          <label for='rating'>{{ 'And rating is'|trans }}</label>
          <select id='rating' name='rating' data-filter='rating' class='form-control filterHelper'>
            <option value='' data-action='clear'>{{ 'Select number of stars'|trans }}</option>
            <option value='unrated' {{- Request.query.get('rating') == 'unrated' ? ' selected' }}>{{ 'Unrated'|trans }}</option>
            {% for i in range(1, 5) %}
              <option {{- Request.query.get('rating') == i ? ' selected' }}>{{ i }}</option>
            {% endfor %}
          </select>
        </div>
        <!-- END RATING -->
        <!-- VISIBILITY SEARCH -->
        <div class='col-md-4'>
          <label for='visibility'>{{ 'And visibility is:'|trans }} </label><br>
          <select id='visibility' name='vis' data-filter='visibility' class='form-control filterHelper'>
            <option value='' data-action='clear'>{{ 'Select visibility'|trans }}</option>
            {% for key, value in visibilityArr %}
              <option value='{{ key }}' {{- Request.query.get('vis') == key ? ' selected' }}>{{ value|trans }}</option>
            {% endfor %}
          </select>
        </div>
        <!-- END VISIBILITY SEARCH -->
      </div>
      <div class='row'>
        <div class='col'>
          <small class="form-text text-muted">
            Tip: Add a field/value pair to the query at the cursor position by pressing <kbd>ctrl</kbd> or <kbd>⌘</kbd> while selecting.
          </small>
        </div>
      </div>
    </div>

    <!-- METADATA SEARCH -->
    <h4 data-action='toggle-next' data-icon='metadataSearchIcon'><i id='metadataSearchIcon' class='fas fa-chevron-circle-right'></i> {{ 'Extra fields search'|trans }}</h4>


    <div hidden data-save-hidden='metadataSearchDiv' class='box'>
      {# add as many extra fields as present in the query but at least one #}
      {% for metakey in (Request.query.all('metakey') ?: ['']) %}
        {% set metavalue = Request.query.all('metavalue')[loop.index0] %}
        <div class='row' {{- loop.first ? "id='metadataFirstInputs'" -}} >
          <div class='col-md-4'>
            {% set randomid = random() %}
            <label for='metakey_{{ randomid }}'>{{ 'Name of field'|trans }}</label>
            <input type='text' id='metakey_{{ randomid }}' class='form-control' name='metakey[]' value='{{ metakey != '' ? metakey }}' />
          </div>
          <div class='col-md-4'>
            <label for='metavalue_{{ randomid }}'>{{ 'Value'|trans }}</label>
            <input type='text' id='metavalue_{{ randomid }}' class='form-control' name='metavalue[]' value='{{ metavalue != '' ? metavalue }}' />
            <p>{{ "Tip: you can use '%' as wildcard"|trans }}</p>
          </div>
        </div>
      {% endfor %}

      {# button to add an extra field input #}
      <div data-action='add-extra-fields-search-inputs'><i class='fas fa-plus-circle fa-2x'></i></div>
    </div>

    <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>
<div id='shortcuts' data-create='{{ App.Users.userData.sc_create }}'></div>