{% extends "base.html" %}
{% set currentPage = "bnumbers" %}

{% block title %} Faculty Collaborator(s) B-numbers {% endblock %}

{% block body %}
<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/create">Create</a></li>
  <li><a href="/people">People</a></li>
  <li class="active">Bnumbers</li>
</ol>
<div class = "row">
  <div class = "col-sm-8 col-sm-offset-2">
    <h1>Faculty's B-number </h1>
    
  <form class = "form-horizontal"
      action = "/bnumbers" 
      method = "POST"
      >
  
    {% for id in range (0, numCollab) %}
      <div class = 'form-group' id = "cgroup{{id}}" style="margin-left:0px;">
        <h4>Collaborator #{{id + 1}}</h4>
          
          <label for='cbnumber{{id}}' class = 'col-sm-3 control-label'>
            B-Number
          </label>
          <div class = 'col-sm-4'>
            <input  name  = 'cbnumbers[]' 
                    id    = 'cbnumber{{id}}' 
                    type  = 'text' 
                    class = 'form-control'
                    placeholder = 'B012345678'
                    value = 
                    "{% if collabs is not none and id < collabs|length %}{{collabs[id].username.bnumber}}{% endif %}"
                    required
                    />
            
          </div>
      
        </div>
    {% endfor %}
    
      <div class = "form-group"  >
    <div class = "col-sm-offset-9 col-sm-2" 
         id = "submitButton"
         >
      <button id = "submit" 
              type = "submit" 
              class="btn btn-block btn-primary form-control"
              disabled
              />
        Submit
      </button>
    </div>
  </div>

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

<script>
  var numCollabs = parseInt("{{numCollab}}");
  var username = "{{username}}";
</script>
{% endblock %}

{% block footer_imports %}
{% for id in range (0, numCollab) %}
<script type = "text/javascript">
              /* global delay, checkValidBNumber, BNUMBERCHECKDELAY */
              $("#cbnumber{{id}}").keyup ( function() {
                delay( function () { 
                          checkValidBNumber("{{id}}"); 
                      }, BNUMBERCHECKDELAY);
              });
            </script>
{% endfor %}
{% endblock %}