dashboard.html

<%! 
  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>
            <a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unenroll</a>
            <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>



<section id="unenroll-modal" class="modal unenroll-modal">
  <div class="inner-wrapper">
    <header>
      <h2>Are you sure you want to unenroll from <span id="unenroll_course_number"></span>?</h2>
      <hr>
    </header>

    <form id="unenroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
      <input name="course_id" id="unenroll_course_id" type="hidden" />
      <input name="enrollment_action" type="hidden" value="unenroll" />
      <div class="submit">
        <input name="submit" type="submit" value="Unenroll" />
      </div>
    </form>

    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>


<script type="text/javascript">
(function() {
  
  $(".unenroll").click(function(event) {
    $("#unenroll_course_id").val( $(event.target).data("course-id") );
    $("#unenroll_course_number").text( $(event.target).data("course-number") );
    
  });
  
   $(document).delegate('#unenroll_form', 'ajax:success', function(data, json, xhr) {
     if(json.success) {
       location.href="${reverse('dashboard')}";
     } else {
       if($('#unenroll_error').length == 0) {
         $('#unenroll_form').prepend('<div id="unenroll_error" class="modal-form-error"></div>');
       }
       $('#unenroll_error').text(json.error).stop().css("display", "block");
     }
   });
})(this)
</script>