{% extends 'layouts/base.html' %}

{% block title %}
New | MySchool Advisor
{% endblock %}

{% block content %}

<div class="page-header" id="banner">
  <div class="row">
    <div class="col-md-12 text-center">
      <h1><strong>New Trajectory</strong></h1>
      <p class="lead">Pick the programs you'd like to visualize completing your degree.</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-offset-1 col-md-10 well">
    <form class="form-horizontal" action="{% url 'build-me' %}" method="post" role="form" enctype="multipart/form-data">
      {% csrf_token %}
      <fieldset>

      <legend>Select your program(s).</legend>
      <div class="form-group{% if starttrajectoryform.name.errors %} has-error {% endif %}">
        <label for "{{ starttrajectoryform.name.id_for_label}}" class="col-sm-2">
	{{ starttrajectoryform.name.id_for_label }}</label>
        <div class="col-sm-8">
	    {{ starttrajectoryform.name }}
	    {% for error in starttrajectoryform.name.errors %}
	        <span class="help-block">{{ error }}</span>
	    {% endfor %}
	    <!-- autocompletion would be awesome -->
        </div>
            <select multiple class="form-control">
                {% for major in majors %}
                <option value="{{major.id}}">{{major}}</option>
                {% endfor %}
                </select>
      </div>

      <!-- Javascript for adding an additional field -->
      <!-- Ensure no more than two majors -->

      <legend>Select your minor(s).</legend>
      <div class="form-group{% if starttrajectoryform.name.errors %} has-error {% endif %}">
        <label for "{{ starttrajectoryform.name.id_for_label }}" class="col-sm-2">
	{{ starttrajectoryform.name.id_for_label }}</label>
        <div class="col-sm-8">
	    {{ starttrajectoryform.name }}
	    {% for error in starttrajectoryform.name.errors %}
	        <span class="help-block">{{ error }}</span>
	    {% endfor %}
	    <!-- autocompletion would be awesome -->
        </div>
                 <select multiple class="form-control">
                {% for minor in minors %}
                <option value="{{minor.id}}">{{minor}}</option>
                {% endfor %}

            </select>
      </div>

      <!-- Javascript for adding an additional field -->
      <!-- ensure no more than three minors -->

      <div class="form-group">
        <div class="col-sm-offset-10 col-sm-2">
          <button type="submit" class="btn btn-primary btn-block" value="Submit">Submit</button>
          <!-- find the bar across the top loading js -->

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

{% endblock %}