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

{% block title %}
Compare | YourSchool Advisor
{% endblock %}

{% block content %}

<div class="page-header" id="banner">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>Compare Trajectories</h2>
    </div>
  </div>
</div>

<div class="row well">
  <legend>Choose up to three</legend>
  <div class="col-md-12">
    <form class="form-vertical" action="" method="post" role="form">
      <div class="form-group">
        <label for "myTrajectories" class="col-md-2">My Trajectories</label>  
          <div class="col-md-3">
            <select class="form-control">
              <option>My Trajectory 1</option>
              <option>My Trajectory 2</option>
              <option>My Trajectory 3</option>
              <option>My Trajectory 4</option>
            </select>
          </div>
          <div class="col-md-1">
            <button type="button" class="btn btn-primary">+</button>
          </div>
      </div>

      <div class="form-group">
        <label for "myTrajectories" class="col-md-2">Public Trajectories</label>  
          <div class="col-md-3">
            <input type"text" class="form-control" id="Trajectory" placeholder="dbond2">
          </div>
          <div class="col-sm-1">
            <button type="button" class="btn btn-primary">+</button>
          </div>
        </div>

      <!-- spacing should be fixed -->
      <br />
      <br />

      <div class="form-group">
        <div class="col-md-offset-10 col-md-2">
          <button type="submit" class="btn btn-primary btn-lg btn-block" value="Submit">Submit</button>
        </div>
      </div>

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

<div class="row well">
  <legend>Automatic comparisons of your selected trajectories.</legend>
  <div class="col-md-4">
    <!-- <p><strong><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="The fewest semesters to complete.">Shortest Time</button></strong>Trajectory 2</p> -->
  <p><strong>Shortest Time:</strong> Trajectory Two</p>
  </div>
  <div class="col-md-4">
    <p><strong>Easier Classes:</strong>Trajectory Two</p>
  <!-- fewer higher level classes -->
  </div>
  <div class="col-md-4">
    <p><strong>Lightest Courseload:</strong>Trajectory One</p>
  </div>
  <div class="col-md-6">
    <p>Common courses between trajectories include:</p>
    <h6><span class="label label-primary">Course 309</span>
    <span class="label label-primary">Course 367</span></h6>
  </div>
  <div class="col-md-12">
    <p>Additional electives (courses not required for the completion of your
    selected program) for trajectory one include:</p>
    <h6><span class="label label-primary">Course 194</span>
    <span class="label label-primary">Course 208</span>
    <span class="label label-primary">Course 211</span></h6>
  </div>
  <div class="col-md-12">
    <p>Additional electives (courses not required for the completion of your
    selected program) for trajectory two include:</p>
    <h6><span class="label label-primary">Course 222</span></h6>
  </div>
</div>

<p>Have an if statement for columns if only three trajectories instead of two, etc</p>

<div class="row">

  <div class="col-md-4 well">
    <h3>Trajectory One's Name</h3>
    <h4><p>Name(s) of the programs</p></h4>
      {% for trajectory in previousTrajectories %}
        <div class="col-md-4">
	  {% for course in trajectory %}

	  {% endfor %}
	</div>
      {% endfor %}
  </div>

  <div class="col-md-4 well">
    <h3>Trajectory Two's Name</h3>
    <h4><p>Name(s) of the programs</p></h4>
      {% for trajectory in previousTrajectories %}
        <div class="col-md-4">
	  {% for course in trajectory %}
            <div class="col-md-4">
	      Information about the class
	    </div>
	  {% endfor %}
	  Information about the semester
	</div>
      {% endfor %}
  </div>

  <div class="col-md-4 well">
    <h3>Trajectory Three's Name</h3>
    <h4><p>Name(s) of the programs</p></h4>
      {% for trajectory in previousTrajectories %}
        <div class="col-md-4">
	  {% for course in trajectory %}

	  {% endfor %}
	</div>
      {% endfor %}
  </div>

</div>

{% endblock %}