
{% extends "idr_gallery/base.html" %}

{% block content %}

<style>
  .study{
    width: 247px;
    height: 247px;
  }
  .study a:hover {
    color: #1e94e6;
  }
  .maprViewerLink {
    position: relative;
  }
  a.maprViewerLink div {
    display: inline-block;
    position:relative;
  }
  a.maprViewerLink i {
    visibility: hidden;
    color: white;
    position: absolute;
    top: 8px;
    right: 8px;
  }
  a.maprViewerLink:hover i{
    visibility: visible;
  }
  .exampleImages .thumbnail {
    max-height: 45px;
    max-width: 45px;
  }
  table td {
    white-space: nowrap;
  }
  .filterMessage {
    font-size: 120%;
  }
  .filterMessage strong {
    color: #1976d2;
  }
</style>

<hr class="whitespace" style="height: 0">

<div class="row column text-center">

<div class="small-12 small-centered medium-12 medium-centered columns">

    <div id='search-form' class="row horizontal" style='display:none'>

      <div class="small-12 medium-12 large-2 columns">
        <h2 class="search-by">Search by:</h2>
      </div>
      <div style="padding:0" class="small-12 medium-4 large-3 columns">
        <select id="maprConfig">
          <optgroup id="studyKeys" style='display:none' label="Study Attributes">
            {% if filter_keys %}
            <optgroup id="studyKeys" label="Study Attributes">
              {% for key in filter_keys %}
              <option value="{% if key.value %}{{ key.value }}{% else %}{{ key }}{% endif %}">
                {% if key.label %}{{ key.label }}{% else %}{{ key }}{% endif %}
              </option>`
              {% endfor %}
            </optgroup>
            {% endif %}
          <optgroup id="maprKeys" style='display:none' label="Image Attributes">
          </optgroup>
        </select>
      </div>
      <div style="position: relative" class="small-12 medium-8 large-7 columns">
        <input id="maprQuery" type="text" placeholder="Type to filter values..." style="width: calc(100% - 40px)">
        <svg id="spinner" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sync" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sync fa-w-16 fa-spin fa-lg"><path fill="currentColor" d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z" class=""></path></svg>
        <a class="button"
          title="Clear filter"
          style="position: absolute; top: 0; right: 0; color: #bbb; border-radius: 15px; background: white; border: solid #bbb 1px;"
          {% if category %}
            href="{% url 'gallery_super_category' super_category=category %}"
          {% else %}
            href="{% url 'idr_gallery_index' %}"
          {% endif %}
          >X</a>
      </div>

      <div id="filterCount" class="row horizontal">
      </div>
    </div>

    <div id="filterSpinner" class="row horizontal">
      <div id="filterSpinnerMessage">
        <!-- Show a waiting... message here -->
      </div>
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sync" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sync fa-w-16 fa-spin fa-lg"><path fill="currentColor" d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z" class=""></path></svg>
    </div>

    <div id="studies" class="row horizontal">
      Loading Studies...
    </div>
</div>

</div>

<script>
  // Various global constants from omero config set...
  var FILTER_KEYS = {{ filter_keys|safe }};
  var FILTER_MAPR_KEYS = {{ filter_mapr_keys|safe }};
  // e.g. GALLEY_INDEX/api-gallery/thumbnails for loading from IDR
  const GALLERY_INDEX = "{{ gallery_index }}";
  // this is the home of this app, e.g. for GALLERY_HOME/search/
  const GALLERY_HOME = "{% url 'idr_gallery_index' %}";
  const BASE_URL = "{{ base_url }}";
  const CATEGORY_QUERIES = {{ category_queries|safe }};
  var TITLE_KEYS = {{ TITLE_KEYS|safe }};
  var STUDY_SHORT_NAME = {{ STUDY_SHORT_NAME|safe }};
  var SUPER_CATEGORIES = {{ SUPER_CATEGORIES|safe }};
  var SUPER_CATEGORY {% if super_category %} = {{ super_category|safe }} {% endif %};
  var STATIC_DIR = "{% static 'gallery/' %}";
</script>

<script src="{% static 'idr_gallery/search.js' %}?_={{VERSION}}"></script>
<script src="{% static 'idr_gallery/autocomplete.js' %}?_={{VERSION}}"></script>

{% endblock %}
