compare.html

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

{% block title %}
GMU Advisor | Compare
{% 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">
  <div class="col-md-12">
    <div class="text-center"><h3>Choose up to three</h3></div>
    <form class="form-horizontal" role="form">
    <!-- why doesn't this have them next to each other? -->
      <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>

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

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

<p> This is just what this lower part is going to look like-- it actually needs
to be loaded  on submit with JavaScript ;_; </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>

<div class="row well">
  <div class="col-md-12">
    Automatic analysis of the comparisons.
  </div>
</div>

{% endblock %}