<header class="colorful">

  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-2">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div id="logo"><a href="{{ site.url }}/" data-escp="">GitHub Training</a></div>
      </div>

      <div class="col-md-9 col-sm-10">
        <div class="collapse navbar-collapse navbar-right" id="main-navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a{% if page.body_class == 'trainers' %} class="active"{% endif %} href="{{ site.url }}/trainers/">Trainers</a></li>
            <li><a{% if page.body_class == 'classes' %} class="active"{% endif %} href="{{ site.url }}/classes/">Classes</a></li>
            <li><a{% if page.body_class == 'schedule' %} class="active"{% endif %} href="{{ site.url }}/schedule/">Schedule</a></li>
            <li><a class="active" href="{{ site.url }}/kit/">Kit</a></li>
            <li><a{% if page.body_class == 'contact' %} class="active"{% endif %} href="{{ site.url }}/contact/">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>

    {% if page.title %}
      <h2>{{ page.title }}</h2>
      {% if page.byline %}<p>{{ page.byline }}</p>{% endif %}
    {% endif %}


    {% if page.body_class == "home" %}
      <div class="jumbotron colorful classes">
        <div class="text-center">

          <div class="row">

            {% for course in site.courses %}
              <div class="col-md-6">
                <a href="{{ site.baseurl }}{{ course.url }}">
                  <div class="panel">
                    {% if course.title == "GitHub for Developers" %}
                      <span class="octicon octicon-terminal"></span>
                    {% elsif course.title == "GitHub for Everyone" %}
                      <span class="octicon octicon-organization"></span>
                    {% endif %}
                    <h4>{{ course.title }}</h4>
                    <p><small>{{ course.description }}</small></p>
                  </div>
                </a>
              </div>
            {% endfor %}

          </div>

          <!-- <div class="row">
            <div class="col-md-6">
              <img src="{{ site.url }}/images/git-training-pics.png" alt="GitHub Training at Live Event" class="img-responsive">
            </div>
            <div class="col-md-6">
              <h2>Open source teaching resources</h2>
              <p>Open source training content. Present your way to better version control.</p>
            </div>
          </div> -->
        </div>
      </div>
    {% endif %}
  </div>
</header>
