{% extends "base.html" %}
{% set currentPage = "budget" %}
{% 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><a href="/history">History</a></li>
  <li><a href="/upload/irb">IRB upload</a></li>
  <li><a href="/upload/vitae">Vitae upload</a></li>
  <li><a href="/upload/narrative">Narrative upload</a></li>
  <li class="active">Budget</li>
</ol>
<h1> Budget </h1>
<p>
URCPP can provide stipends for you (up to $5300 per faculty) and your students, plus up to $3000 for equipment, supplies, and related travel.
</p>

<!-- This is the only actual HTML on the page.
     The rest of it is JavaScript. -->
<div class = "row">
  <form id = "budgetForm"
        class = "form-horizontal col-sm-10 col-sm-offset-1"
        action = "/budget"
        method = "POST">
    
    <!-- Loop starts here for each box -->
    {% for budget in cfg["budget"] %}
    <div  class = 'form-group' 
          id = "inputGroup{{loop.index0}}" >
      <div  class = "row" 
            style = "padding-bottom: 10px; padding-top: 30px;">
          <label  for='{{budget["title"]}}{{loop.index0}}' 
                  class = 'col-sm-4 control-label'>
            {{budget["title"]}} 
          </label>
          <div class = 'col-sm-8'>
          <input  name  = '{{budget["amountFieldName"]}}' 
                    id    = '{{budget["title"]|lower}}' 
                    type  = 'number' 
                    class = 'form-control quantity'
                    {% if budg[budget["amountFieldName"]] is not none %}value = '{{budg[budget["amountFieldName"]]|int}}'{%endif%}
                    onchange = "findTotal()"
                    required
		    step  = "1"
                    placeholder = {% if budget.title != "Miles " %}'($)' {% else %} "# Miles" {% endif %}
                    />
          </div>
      </div>    
      <div class = "row">
        <label for='{{budget["title"]}}{{loop.index0}}' class = 'col-sm-4 control-label'>
          {{budget.title}} Description
        </label>
        <div class = "col-sm-8">
          <textarea class="form-control" 
                    name  = '{{budget["amountFieldName"]}}Desc'
                    style="min-width: 100%"
                    rows = "3"
                    placeholder = "{{budget['placeholder']}}"
                    id = '{{budget["title"]}}Description'>{{budg[budget["descFieldName"]]}}</textarea> 
        </div>
      </div>
    </div>
    {% endfor %}
    <!-- Loop ends here for each box -->
    
    <div class = 'form-group has-success' id = "totalGroup" >
      <div class = "row">
        <label for='total' class = 'col-sm-4 control-label'>
          Total ($)
        </label>
        <div class = 'col-sm-8'>
          <input  name  = 'total' 
                  id    = 'total' 
                  type  = 'text' 
                  class = 'form-control'
                  value = "0"
		  step = "0.01"
                  readonly
                  />
        </div>
      </div>
    </div>
      <div class = "row" id = "mileageWarning" hidden>
        <div class = 'col-sm-offset-9 col-sm-4'>
          <p >WARNING: Excludes mileage costs.</p>
        </div>
      </div>

   
  
    <div class = "form-group"  >
    <div class = "col-sm-offset-10 col-sm-2" 
         id = "submitButton"
         >
      <button id = "submit" 
              type = "submit" 
              class="btn btn-block btn-primary"
              onclick = "submitData();"
              class = "form-control"
              />
        Submit
      </button>
    </div>
  </div>
</form>

<script type = "text/javascript">
  var mileageRate = parseFloat("{% if params.mileageRate %}{{params.mileageRate}}{% else %} 0 {% endif %}");
</script>

{% endblock %}
