{% block colormaps %}

<div class="slidecontainer">
  <button type="button" class="collapsible" id="displayControlsToggle">Toggle Controls</button>
  <div id="displayControls">
    <label for="rasterOpacityRange">Raster Layer Opacity: </label>
    <input type="range" min="1" max="100" value="100" class="overlay" id="rasterOpacityRange" onChange="updateTilesOpacity(event, value)" onInput="updateTilesOpacity(event, value)" style="top: 5px; left: 5px;">
    <br />
    <label for="bandChoice">Choose a band:</label>
    <select id="bandChoice" onChange='bandChange();'>
      <option>-- none --</option>
    </select>
    <br />
    <div id='colorsSubGroup' style="display: none;">
      <label for="colors">Choose a colormap:</label>
      <select id="colors" onChange='changeColors();'>
        <option>-- none --</option>
      </select>
      <br />
      <input id="mincolor" type="number" step="0.01" onChange='changeColors();'>
      <input id="maxcolor" type="number" step="0.01" onChange='changeColors();'>
    </div>
    <div>
      <img id="thumbnail" />
    </div>
  </div>
</div>
<script>
  const displayControlsToggle = document.getElementById('displayControlsToggle');
  const displayControls = document.getElementById('displayControls');
  addToggleListener(displayControlsToggle, displayControls);

  var colorsSubGroup = document.getElementById('colorsSubGroup');
  var colorsDropdown = document.getElementById('colors');
  var bandDropdown = document.getElementById('bandChoice');
  var colorsMin = document.getElementById('mincolor');
  var colorsMax = document.getElementById('maxcolor');
  var thumbnail = document.getElementById('thumbnail');
  var bands;

  thumbnail.src = thumbnailUrl;

  if (windowSearchParams['min']) {
    colorsMin.value = windowSearchParams['min']
  }
  if (windowSearchParams['max']) {
    colorsMax.value = windowSearchParams['max']
  }

  fetch(`${host}/${baseEndpoint}/${imageId}/bands`).then(response => {
    response.json().then(data => {
      bands = data;
      for (const [source, values] of Object.entries(bands)) {
        const interp = values['interpretation']
        var newOption = document.createElement('option');
        newOption.value = source;
        newOption.text = interp ? `${source}: ${interp}` : source;
        bandDropdown.appendChild(newOption)
      }
      if (windowSearchParams['band']) {
        bandDropdown.value = windowSearchParams['band'] ? windowSearchParams['band'] : '-- none --';
        colorsSubGroup.style.display = 'block';
      }
    });
  })

  fetch(`${host}/api/large-image/colormaps`)
    .then(response => response.json())
    .then(data => {
      for (const [source, indices] of Object.entries(data)) {
        for (const index in indices) {
          const option = data[source][index];
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          colorsDropdown.appendChild(newOption);
        }
      }
      colorsDropdown.value = windowSearchParams['palette'] ? windowSearchParams['palette'] : '-- none --';
    });

  function changeColors() {
    colorsSubGroup.display = 'block';
    var cmap;
    if (colorsDropdown.value == '-- none --') {
      cmap = undefined;
    } else {
      cmap = colorsDropdown.value;
    }
    updateTileUrlOption('palette', cmap);
    updateTileUrlOption('min', colorsMin.value);
    updateTileUrlOption('max', colorsMax.value);
    updateTileLayer();
    thumbnail.src = thumbnailUrl;
  }

  function bandChange() {
    if (bandDropdown.value == '-- none --') {
      updateTileUrlOption('palette', undefined);
      updateTileUrlOption('band', undefined);
      updateTileUrlOption('min', undefined);
      updateTileUrlOption('max', undefined);
      colorsSubGroup.style.display = 'none';
      updateTileLayer();
      thumbnail.src = thumbnailUrl;
    } else {
      colorsSubGroup.style.display = 'block';
      band = bandDropdown.value;
      updateTileUrlOption('band', band);
      colorsMin.placeholder = bands[band]['min'];
      colorsMax.placeholder = bands[band]['max'];
      changeColors();
    }
  }
</script>

{% endblock %}
