{% extends "base.html" %}
{% from "macros.html" import render_field, form_tag %}

{% block content %}
  <h1>Onboard Organisation</h1>
  {% call form_tag(form) %}
    {{ render_field(form.org_name) }}
    {{ render_field(form.org_email, autocomplete="on") }}
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        {{ render_field(form.tech_contact) }}
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        {{ render_field(form.via_orcid, data_toggle="collapse", data_target="#user-details") }}
      </div>
    </div>
    <div class="{{'row collapse in' if form.via_orcid.data else 'row collapse'}}" id="user-details">
      <div class="col-md-6 col-sm-6 col-xs-12">
        {{ render_field(form.first_name) }}
        {{ render_field(form.last_name) }}
        {{ render_field(form.orcid_id) }}
        {{ render_field(form.disambiguated_id) }}
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        {{ render_field(form.city) }}
        {{ render_field(form.state) }}
        {{ render_field(form.country) }}
        {{ render_field(form.disambiguation_source) }}
      </div>
    </div>
    <button type="submit" class="btn btn-default" value="Onboard Organisation">Onboard Organisation</button>
  {% endcall %}
{% endblock %}
{% block footer %}
  {{ super() }}
  <script>
$( function() {
  var orgInfo = {{ org_info | tojson }};
  $( "#org_name" ).autocomplete({
    source: Object.keys(orgInfo),
    select: function(event, ui) {
      var oi = orgInfo[ui.item.value];
      $("#org_email").val(oi.email);
      $("#first_name").val(oi.first_name);
      $("#last_name").val(oi.last_name);
      if (oi.country) {
        $("#country").val(oi.country);
      }
      $("#city").val(oi.city);
      $("#disambiguated_id").val(oi.disambiguated_id);
      $("#disambiguation_source").val(oi.disambiguation_source);
      $("#org_email").focus();
    }
  });
});
  </script>
{% endblock %}

