{% load url from future %}

<header id="global_header">
  <div class="row">
    <div id="logo_container" class="small-7 medium-5 large-5 columns">
      <div class="row">
        <div class="small-12 medium-5 large-5 columns">
          <a href="/">
            <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="global_header_logo" width="144" height="17" />
          </a>
        </div>
        <div class="medium-7 large-7 columns show-for-medium-up">
          {% if course.id %}
            <div id="search_container">
              <form action="{% url 'note_search' %}" method="GET">
                <input type="text" id="search_txt" name="query" placeholder="Search in this course">
                <input type="hidden" name="course_id" value="{{ course.id }}">
              </form>
            </div>
          {% endif %}
        </div>
      </div>
    </div><!--/logo container-->

    {% if display_add_course %}
      <div class="small-2 columns small-offset-3 show-for-medium-up">
        <a id="add_course_header_button" href="#"><img src="{{ STATIC_URL }}img/global_header_pluscourse.png" /></a>
      </div>
    {% endif %}

    {% if display_add_note %}
      <div class="small-2 columns small-offset-3 show-for-medium-up">
        <a id="add_note_header_button" href="#" onclick="$('.add-note-btn').click();">
          <img src="{{ STATIC_URL }}img/global_header_plusnote.png" /></a>
      </div>
    {% endif %}

    <div id="login_container" class="small-4 medium-2 large-2 columns">
      {% if request.user.is_authenticated %}
        <i id="user_settings" class="fa fa-cog fa-lg"></i>
        <div id="user_dropdown_container">
          <ul id="user_dropdown">
            <li><a href="{% url 'accounts_profile' %}">Dashboard</a></li>
            <li><a href="{% url 'account_logout' %}">Log Out</a></li>
          </ul>
        </div>
        <script>
         $('#user_settings').click(function() {
           $('#user_dropdown_container').toggle();
         });
        </script>
      {% else %}
        <a class="white" href="{% url 'account_login' %}">Log In</a>
      {% endif %}
      <a class="white show-for-large-up" href="{% url 'about' %}">About</a>
    </div>

  </div>
</header><!--/global header-->
