<%! 
  from django.core.urlresolvers import reverse 
  from courseware.courses import course_image_url, get_course_about_section
%>
<%inherit file="main.html" />

<%namespace name='static' file='static_content.html'/>

<section class="container dashboard">

  <section class="profile-sidebar">
    <header class="profile">
      <h1 class="user-name">${ user.username }</h1>
    </header>
    <section class="user-info">
      <ul>
        <li>
          <span class="title"><div class="icon email-icon"></div>Email</span><span class="data">${ user.email }</span>
        </li>
        <li>
          <span class="title"><div class="icon location-icon"></div>Location</span><span class="data">${ user.profile.location }</span>
        </li>
      </ul>
    </section>
  </section>

  <section class="my-courses">
    <header>
      <h2>Current Courses</h2>
    </header>

    % if len(courses) > 0:
      % for course in courses:

        <article class="my-course">
          <%
          if course.has_started():
            course_target = reverse('info', args=[course.id])
          else:
            course_target = reverse('about_course', args=[course.id])
          %>
          <a href="${course_target}" class="cover" style="background-image: url('${course_image_url(course)}')">
            <div class="shade"></div>
            <div class="arrow"></div>
          </a>
          <section class="info">
            <hgroup>
              <a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a>
              <h3><a href="${course_target}">${get_course_about_section(course, "title")}</a></h3>
            </hgroup>
            <section class="course-status">
              <p>Class Starts - <span>9/2/2012</span></div>
            </section>
            <section class="meta">
              <div class="course-work-icon"></div>
              <div class="progress">
                <div class="meter">
                  <div class="meter-fill"></div>
                </div>
              </div>
              <div class="complete">
                <p><span class="completeness">60%</span> compleat</p>
              </div>
            </section>
          </section>
        </article>

      % endfor
    % else:
      <section class="empty-dashboard-message">
        <p>Looks like you haven't registered for any courses yet.</p>
        <a href="${reverse('courses')}">Find courses now!</a>
      </section>
    % endif

  </section>
</section>
