{% block colormaps %}

<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();'>
  <br />
  <label for="scheme">Choose a colormap scheme:</label>
  <select id="scheme" onChange='changeColors();'>
    <option>linear</option>
    <option>discrete</option>
  </select>
  <br />
  <label for="nColors">Number of colors:</label>
  <input id="nColors" type="number" step="1" value="255" onChange='changeColors();'>
</div>
<script>
  var colorsSubGroup = document.getElementById('colorsSubGroup');
  var colorsDropdown = document.getElementById('colors');
  var schemeDropdown = document.getElementById('scheme');
  var nColors = document.getElementById('nColors');
  var bandDropdown = document.getElementById('bandChoice');
  var colorsMin = document.getElementById('mincolor');
  var colorsMax = document.getElementById('maxcolor');
  const bands = JSON.parse('{{ bands|tojson }}')

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

  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/palettes`)
    .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);
    updateTileUrlOption('scheme', schemeDropdown.value)
    updateTileUrlOption('n_colors', nColors.value)
    updateTileLayer();
  }

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

{% endblock %}
