{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div>
  <div class="np-homepage-hero" style="margin-bottom: 0; background: white;">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline np-header-font-color" style="width: 100%;margin-top: -15%;margin-bottom: 4%;">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color" style="width: 100%">
        {{ homepage.subheadline }}
      </div>
      <br>
      <form class='searchBarContainer' action="{% route search %}" method="get" data-test="desktop-search" style="margin-top: 20px; margin-right: 50%; text-align: center; width: 200%;">
        <br>
        <input
          aria-label="searchBar"
          id="searchBar"
          type="text"
          name="q"
          placeholder="Search"
        >
          <i class="fas fa-search" ></i>
        </input>
      </form>
    </div>
  </div>
  
  <main class="np-main np-completed-courses np-subpage-container col-xs-12">
    <h1 class="np-table-headline">Completed Courses</h1>
    <br>
    <table class="completed-courses-table">
      <tr class="table-header-bar">
        <th class="table-header np-dashboard-resources-title">Course Name</th>
        <th class="table-header np-dashboard-resources-title">Actions</th>
      </tr>
      {% if courses.enrolled.any? %}
        {% assign sorted_courses = courses.enrolled | sort: 'name' %}
        {% for course in sorted_courses %}
          {% if course.completed? == true%}
            <tr>
              <td class="table-content table-course-name">{{course.name}}</td>
              {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
              <td class="table-content" style="text-align: center;"><a href="{{ course_path }}">Retake</a></td>
            </tr>
            {% endif %}
            {% endfor %}
      {% endif %}
    </table>
  </main>

</div>

{% include "footer" %}