{% extends "layout_bs4.html" %}
{% from "overview/utils.html" import institute_settings %}
{% from "overview/institute_sidebar.html" import institute_actionbar %}

{% block title %}
  {{ super() }} - Institutes
{% endblock %}

{% block css %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('overview.cases', institute_id=institute._id) }}">{{ institute.display_name }} cases </a>
  </li>
  <li class="nav-item active">
    <a class="nav-link">Settings</a>
  </li>
{% endblock %}

{% block content_main %}
<div class="container-float">
  <div class="row" id="body-row"> <!--sidebar and main container are on the same row-->
    {{ institute_actionbar(institute) }} <!-- This is the sidebar -->
  <div class="col">
    {{ institute_settings(form, institute, current_user, loqus_instances) }}
  </div>
  </div> <!-- end of div id body-row -->
</div>

{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
  <script>
    $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();
      hide_div({{panel}});
    });

    var avail_terms = {{ default_phenotypes|safe }};

    function validate_pheno(){
      var pheno_term = document.getElementById("pheno_group");
      var hpo_id = pheno_term.value.split(" ")[0]; // collect just hpo id
      var hpo_name = pheno_term.value.split(" ")[2]; // collect just hpo id

      // check validity for new pheno group:
      if (hpo_id && hpo_name){
        if (document.getElementById("pheno_abbrev").value){
          // if HPO terms is NOT among the default terms
          if (avail_terms.indexOf(hpo_id) < 0){
            document.getElementById("institute_form").submit();
          }
          else{
            alert("Phenotype group is already present in phenotype group list");
          }
        }
        else{
          alert("Abbreviation is missing");
        }
      }
      else{
        alert("Please fill in a valid HPO term");
      }
    }

    function getTerms(query, process) {
      $.get("{{ url_for('cases.hpoterms') }}", {query: query}, function(data) {
        process(data);
      });
    }

    $(".typeahead_hpo").typeahead({
      name: 'hpo_term',
      source: getTerms,
      minLength: 3,
    });

    $('#cohort_tags').select2({
    	tags: true,
      data: ["endo","mito","ketogenic diet","pedhep","other"],
      tokenSeparators: [','],
      placeholder: "Add cohort tags",
    });

    $('#sanger_tags').select2({
      tags: true,
      tokenSeparators: [','],
      placeholder: "Add Sanger email",
    });

    // Set Loqus ID in loqus_id field if exists, otherwise set to 'default'
    {% if institute.loqusdb_id %}
        loqus = "{{ institute.loqusdb_id|string }}"
        $('#loqusdb_id').attr("value", loqus );
    {% else %}
        $('#loqusdb_id').attr("placeholder", "default");
    {% endif%}

    $(function () {
      $('select[multiple]').selectpicker({
          width: '100%'
        });
    });
  </script>

{% endblock %}
