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

{% block content %}

<script>
  // Various global constants from omero config set...
  var FILTER_KEYS = {{ filter_keys| safe }};
  var FILTER_MAPR_KEYS = {{ filter_mapr_keys| safe }};
  var TITLE_KEYS = {{ TITLE_KEYS| safe }};
  var STUDY_SHORT_NAME = {{ STUDY_SHORT_NAME| 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 IDR_STUDIES_URL = "{{ IDR_STUDIES_URL }}";
  const CATEGORY_QUERIES = {{ category_queries| safe }};
  var SUPER_CATEGORY {% if super_category %} = {{ super_category | safe }} {% endif %};
  const SEARCH_ENGINE_URL = `${BASE_URL}searchengine/api/v1/`;
</script>

<script src="{% static 'idr_gallery/3rdparty/popperjs/popper_core_2.11.8.min.js' %}"></script>
<script src="{% static 'idr_gallery/3rdparty/tippy/tippy_6.3.7.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'idr_gallery/3rdparty/tippy/backdrop_6.3.7.css' %}" />
<link rel="stylesheet" href="{% static 'idr_gallery/3rdparty/tippy/light-border_6.3.7.css' %}" />

<style>
  body {
    background-color: #f6f6f9;
  }

  header div {
    position: relative;
  }

  .marketing-hero {
    overflow: hidden;
    position: relative;
    padding: 40px 10px 25px;
    background: black;
    box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 50%);
  }

  a.sites-button.large {
    min-width: 150px;
    font-size: 1.15rem;
    display: block;
    width: fit-content;
    margin: 15px 7px;
  }

  .cats {
    display: flex;
    justify-content: center;
  }

  #search-form {
    padding-top: 10px;
  }

  .hero-subheader {
    margin-bottom: 5px;
    font-size: 1.15rem;
    transition: background-color 1s, color 1s, box-shadow 1s;
  }

  .dark .hero-subheader {
    color: #333333;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 15px 15px rgb(255 255 255 / 50%);
  }

  .stats {
    position: relative;
    text-align: center;
    font-size: 1.7rem;
    color: #333;
  }

  #studies {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 350px;
  }

  .studyThumb {
    float: left;
    position: relative;
    margin: 1px 0 1px 2px;
    height: 50px;
    width: 50px;
    overflow: hidden;
    background: no-repeat center;
    background-size: cover;
    background-color: #eee;
  }

  .studyThumb div {
    height: 100%;
    width: 100%;
  }

  .switchLabel {
    font-size: 1.0rem;
    display: inline;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    color: #666;
  }

  /* https://www.w3schools.com/howto/howto_css_switch.asp */
  /* The switch - the box around the slider */
  .switch {
    top: 3px;
    position: relative;
    display: inline-block;
    width: 33px;
    height: 20px;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .sliderToggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .sliderToggle:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked+.sliderToggle {
    background-color: #333333;
  }

  input:checked+.sliderToggle:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
  }

  /* Rounded sliders */
  .sliderToggle.round {
    border-radius: 9px;
  }

  .sliderToggle.round:before {
    border-radius: 50%;
  }

  .panel {
    background: white;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
    padding: 15px;
    width: 100%;
  }

  @media screen and (min-width: 64em) {
      #tabs {
      min-height: 635px;
    }
  }

  .panel .tabs {
    border-width: 0;
    border-bottom-width: 1px;
  }

  .tabs-title>a[aria-selected=true] {
    background: transparent;
    border-bottom: solid #333 2px;
  }

  .tabs-title>a:focus {
    background: transparent;
  }


  .tabs-content {
    border: none;
  }

  .tabs-panel {
    padding: 15px 0 0 0;
  }

  .tabs-panel .row {
    margin-bottom: 15px;
  }

  .tabs-panel .large-6 iframe {
    height: 156px;
  }

  .tabs-panel .large-12 iframe {
    height: 312px;
  }

  .tabs-panel .row:last-child {
    margin-bottom: 0;
  }

  .expandVideo {
    position: absolute;
    bottom: 0;
    right: -5px;
    background-color: white;
    padding: 5px;
    border-radius: 50%;
  }

  .large-12 .expandVideo {
    transform: rotate(180deg);
  }

  .logo-hero {
    opacity: 1;
    transition: opacity 1s;
  }

  /* on mobile device, hide the thumbnail link 
  since we want to use clicking on thumbnail to show popup
  instead of taking you to another page */
  @media (max-width: 640px) {
    .studyThumbLink {
      display: none;
    }
  }

  /* hide the white logo when parent has .dark */
  .dark .logo-hero {
    opacity: 0;
  }

  /* tooltip content hidden */
  .studyThumb .idr_tooltip {
    display: none;
  }

  /* tooltip viewer link */
  .tippy-content a .fa-eye {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white
  }

  .tippy-content a:hover .fa-eye {
    color: #1e94e6;
  }

  .tooltipThumb {
    float: right;
  }

  mark {
    background: yellow;
  }

  #searchResultsContainer a {
    font-weight: normal;
  }
  #searchResults {
    position: relative;
  }
  #searchResults li {
    list-style: none;
    display: inline-block;
  }
  #searchResults p {
    margin: 10px;
  }
  #searchResults img {
    float: left;
    margin: 2px;
    margin-right: 10px;
  }
  #searchResults span {
    color:#bbb
  }
  .resultCounts {
    position: absolute;
    top: 10px;
    right: 35px;
  }
  .searchScroll {
    max-height: 300px;
    overflow-y: auto;
    /* word-break: break-all; */
  }
  .searchScroll>div {
    padding: 5px 10px;
  }

  #hideSearchResults {
    border: none;
    background: none;
    position: absolute;
    right: 40px;
    top: 10px;
    z-index: 1;
  }

  /* Always show scrollbars https://gist.github.com/IceCreamYou/cd517596e5847a88e2bb0a091da43fb4 */
.scrollBarVisible::-webkit-scrollbar-track:vertical {
    border-left: 1px solid #E7E7E7;
    box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
}

.scrollBarVisible::-webkit-scrollbar-track:horizontal {
    border-top: 1px solid #E7E7E7;
    box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
}

.scrollBarVisible::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: #FAFAFA;
    width: 16px;
}

.scrollBarVisible::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #C1C1C1;
    border-color: transparent;
    border-radius: 9px 8px 8px 9px;
    border-style: solid;
    border-width: 3px 3px 3px 4px; /* Workaround because margins aren't supported */
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.scrollBarVisible::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.matchingStudy {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.matchingStudy div {
  flex: 1
}
.matchingStudy div:first-child {
  flex: 0;
  white-space: nowrap;
}
.imgCount, .matchingString, .black {
  color: black;
}
.black {
  font-weight: bold;
}


</style>


<header class="marketing-hero">

  {% include 'idr_gallery/background_carousel.html' %}
  <div class="row homepage text-center">
    <div class="medium-12 columns">
      <div style="display: inline-block; position: relative; width:160px; height:62px; margin-bottom: 20px;">
        <img style="left: 0; position: absolute; width:160px; margin-bottom: 20px;"
          src="{% static 'idr_gallery/images/logo-idr-dark.svg' %}" alt="IDR logo" class="logo-dark" />
        <img style="left: 0; position: absolute; width:160px; margin-bottom: 20px;"
          src="https://idr.openmicroscopy.org/about/img/logos/logo-idr-white.svg" alt="IDR logo" class="logo-hero">
      </div>
      <!-- <h1 class="hero-main-header">Image Data Resource</h1> -->
      <h2 class="hero-subheader small-10 medium-10 large-10 small-offset-1 medium-offset-1 large-offset-1">
        The Image Data Resource (IDR) is a public repository of image datasets from published scientific studies,
        where the community can submit, search and access high-quality bio-image data.
      </h2>
      <div class="cats">
        {% for c, data in super_categories.items %}
        <a href="{% url 'gallery_super_category' super_category=c %}" class="large button sites-button" +
          style="margin-right: 10px; {% if c == category %}background-color: #ffc107{% endif %}">{{ data.label }}</a>
        {% endfor %}
      </div>
    </div>
  </div>

  <div id='search-form' class="row horizontal">
    <div class="small-12 medium-4 large-4 columns">
      <select id="maprConfig">
        <option value="any">Choose search field (optional)</option>
        {% 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">
          <!-- Map-Annotation keys loaded here -->
        </optgroup>
      </select>
    </div>
    <div style="position: relative" class="small-12 medium-8 large-8 columns">
      <input id="maprQuery" type="text" placeholder="Search for anything...">
      <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>
    </div>
  </div>
</header>

<!-- Search results - hidden till needed -->
<div id="searchResultsContainer" class="row horizontal" style="display: none; position: relative; margin-top: -35px; margin-bottom: 15px">
  <div class="small-12 medium-12 large-12 columns">
    <button id="hideSearchResults" onclick="document.getElementById('searchResultsContainer').style.display = 'none'">X</button>
    <div id="studySearchResults" class="panel" style="float: left; width: 100%; color: #333; padding: 0">
      Search results
    </div>
    <div id="imageSearchResults" class="panel" style="float: left; width: 100%; color: #333; padding: 0">
      <!-- spinner? -->
    </div>
  </div>
</div>

<div class="row horizontal" style="position: relative; margin-top: 25px; margin-bottom: 15px">
  <div class="small-12 medium-12 large-12 columns">
    <div class="panel" style="float: left; width: 100%; color: #333">
      <div class="stats small-12 medium-4 large-4 columns">
        <span id="studyCount"></span> Studies
      </div>
      <div class="stats small-12 medium-4 large-4 columns">
        <span id="imageCount"></span> Images
      </div>
      <div class="stats small-12 medium-4 large-4 columns">
        <span id="tbCount"></span> TB
      </div>
    </div>
  </div>
</div>
<div class="row horizontal" style="position: relative">
  <div class="small-12 medium-12 large-12 columns">
    <div class="panel" style="float: left">
      <div id="zarrInfo" style="margin-bottom: 10px; color: #333">
        <h3 style="color: white; padding: 15px; background: red;">Moving to OME-Zarr</h3>
        <p>
          The IDR is transitioning to the <a href="https://ngff.openmicroscopy.org/" target="_blank">OME-Zarr</a>
          format for improved data accessibility and performance. Images in other formats can no longer be fully
          viewed from our image viewer, but thumbnails are available.
          We are working to convert all studies to OME-Zarr, and in the meantime non-Zarr images can be download for local viewing.
          All new studies must be submitted in OME-Zarr format.
        </p>
      </div>
      <div id="zarrStudies" style="margin-bottom: 15px">
      </div>
      <div style="clear:both; padding: 7px"></div>
      <form style="clear:both">
        <label class="switchLabel">Group Studies by type</label>
        <label class="switch" style="margin-right: 20px">
          <input id="groupByType" type="checkbox">
          <span class="sliderToggle round"></span>
        </label>
      </form>
      <div id="studies">
        <!-- Placeholder thumbnails - updated by render() once studies have loaded -->
        <script>document.write((new Array(100)).fill(`<div class="studyThumb"></div>`).join(""))</script>
      </div>
    </div>
  </div>
</div>

<div class="row horizontal" style="position: relative; margin-top: 15px; margin-bottom: 15px">
  <div class="stats small-12 medium-9 large-8 columns" style="position: relative">
  </div>
</div>

<div class="row horizontal" style="position: relative;">
  <div class="small-12 medium-12 large-8 columns" style>
    <div class="panel" id="tabs">
      <ul class="tabs" data-tabs id="example-tabs">
        {% for tab in TABS %}
        <li class="tabs-title {% if forloop.first %} is-active {% endif %}">
          <a href="#panel{{ forloop.counter }}" {% if forloop.first %} aria-selected="true" {% endif %}>
            {{ tab.title }}
          </a>
        </li>
        {% endfor %}
      </ul>
      <div class="tabs-content" data-tabs-content="example-tabs">
        {% for tab in TABS %}
        <div class="tabs-panel {% if forloop.first %} is-active {% endif %}" id="panel{{ forloop.counter }}">
          {{ tab.text|safe }}
          {% for video in tab.videos %}
            <div class="row horizontal">
              <div class="small-6 medium-6 large-6 columns" style="position: relative;">
                <iframe id="youtube" width="100%" height="100%" src="https://www.youtube.com/embed/{{ video.id }}"
                  title="YouTube video player" frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                </iframe>
                <button title="Expand video" class="expandVideo"><i class="fas fa-angle-right"></i><i
                    class="fas fa-angle-right"></i></button>
              </div>
              <div class="columns small-6 medium-6 large-6">
                <h3>{{video.title}}</h3>
                {{video.text|safe}}
              </div>
            </div>
          {% endfor %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>


</div>

</div>

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

<script>

  // handle expand/collapse of videos >>
    $("#tabs").on("click", ".expandVideo", function () {
      let $row = $(this).closest(".row");
      // toggle from 2 columns to 1
      $('.columns', $row).toggleClass("small-12 medium-12 large-12")
        .toggleClass("small-6 medium-6 large-6");
    });
</script>

{% endblock %}