% rebase('base.html', title='Rezultati', uporabniskoIme=user)

<div class="container">
  <div class="row">
    <div class="col text-center">

        <div class="form-group">
            <label for="leto" class="sr-only" style="font-size: large; font-weight: bold;">Leto olimpijskih iger</label>
            <select class="form-control" id="leto">
              <option selected value=""> Izberi leto želenih olimpijskih iger </option>
              % for leto in leta:
              <option value="{{leto}}"> {{leto}} </option>
              % end
            </select>
        </div>

        <div class="form-group">
            <label for="id_disciplina" class="sr-only" style="font-size: large; font-weight: bold;">Disciplina</label>
            <select class="form-control" id="id_disciplina" onchange="getPoddiscipline()">
              <option selected value=""> Izberi disciplino </option>
              % for id_disciplina, disciplina in discipline:
              <option value="{{id_disciplina}}"> {{disciplina}} </option>
              % end
            </select>
        </div>

        <div class="form-group">
            <label for="id_poddisciplina" class="sr-only" style="font-size: large; font-weight: bold;">Poddisciplina</label>
            <select class="form-control" id="id_poddisciplina">
            <option selected value=""> Izberi poddisciplino </option>
            </select>
        </div>

        <script>
            function getUrl() {
              leto = document.getElementById('leto');
              value_leto = leto.options[leto.selectedIndex].value;

              poddisciplina = document.getElementById('id_poddisciplina');
              value_poddisciplina = poddisciplina.options[poddisciplina.selectedIndex].value;

              if (!value_leto || !value_poddisciplina) {
                alert("Izberi leto in poddisciplino!");
                return;
              }

              document.location.href = "results/" + value_leto + "/" + value_poddisciplina;
            }
        </script>
        <a class="btn" style="background-color: deepskyblue; color: white; padding: 12px 28px;" id="results-button" href="javascript:getUrl();" role="button">Rezultati</a>

    </div>
  </div>
</div>

<script type="text/javascript">
  var poddiscipline = {}
  % for id_disciplina, disciplina in discipline:
  poddiscipline[{{id_disciplina}}] = []
  % end
  % for id_poddisciplina, poddisciplina, id_disciplina in poddiscipline:
  poddiscipline[{{id_disciplina}}].push([{{id_poddisciplina}}, {{!repr(poddisciplina)}}])
  % end

  function getPoddiscipline() {
      disciplina = document.getElementById('id_disciplina');
      value_disciplina = disciplina.options[disciplina.selectedIndex].value;
      poddisciplina = document.getElementById('id_poddisciplina');
      while (poddisciplina.firstChild) {
        poddisciplina.removeChild(poddisciplina.lastChild)
      }
      option = document.createElement("option");
      option.value = ""
      option.text = "Izberi poddisciplino"
      option.selected = true
      poddisciplina.add(option)
      if (!value_disciplina) {
        return;
      }
      poddiscipline[value_disciplina].forEach(function (item, idx) {
        option = document.createElement("option");
        option.value = item[0]
        option.text = item[1]
        poddisciplina.add(option)
      });
  }

  $(document).ready(getPoddiscipline);
</script>