<%page args="course_overview, enrollment, show_courseware_link, cert_status, credit_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements, dashboard_index, share_settings" />

<%!
import urllib

from django.utils.translation import ugettext as _
from django.utils.translation import ungettext
from django.core.urlresolvers import reverse
from markupsafe import escape
from courseware.courses import get_course_university_about_section
from course_modes.models import CourseMode
from student.helpers import (
  VERIFY_STATUS_NEED_TO_VERIFY,
  VERIFY_STATUS_SUBMITTED,
  VERIFY_STATUS_APPROVED,
  VERIFY_STATUS_MISSED_DEADLINE,
  VERIFY_STATUS_NEED_TO_REVERIFY
)
%>

<%
  cert_name_short = course_overview.cert_name_short
  if cert_name_short == "":
    cert_name_short = settings.CERT_NAME_SHORT

  cert_name_long = course_overview.cert_name_long
  if cert_name_long == "":
    cert_name_long = settings.CERT_NAME_LONG
  billing_email = settings.PAYMENT_SUPPORT_EMAIL
%>

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

<li class="course-item">
  % if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
    <% course_verified_certs = CourseMode.enrollment_mode_display(enrollment.mode, verification_status.get('status')) %>
    <%
        mode_class = course_verified_certs.get('display_mode', '')
        if mode_class != '':
            mode_class = ' ' + mode_class ;
    %>
  % else:
    <% mode_class = '' %>
  % endif

<article class="course${mode_class}">
  <% course_target = reverse('info', args=[unicode(course_overview.id)]) %>
  <section class="details">
    <div class="wrapper-course-image" aria-hidden="true">
      % if show_courseware_link:
        % if not is_course_blocked:
            <a href="${course_target}" class="cover">
              <img src="${course_overview.course_image_url}" class="course-image" alt="${_('{course_number} {course_name} Home Page').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default) |h}" />
            </a>
        % else:
            <a class="fade-cover">
              <img src="${course_overview.course_image_url}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default) |h}" />
            </a>
        % endif
      % else:
        <a class="cover">
          <img src="${course_overview.course_image_url}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default) | h}" />
        </a>
      % endif
      % if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
        <span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}">
          <span class="label">${_("Enrolled as: ")}</span>
          % if course_verified_certs.get('show_image'):
              <img class="deco-graphic" src="${static.url('images/verified-ribbon.png')}" alt="${course_verified_certs.get('image_alt')}" />
          % endif
          <div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div>
        </span>
      % endif
    </div>
      <div class="wrapper-course-details">
        <h3 class="course-title">
          % if show_courseware_link:
            % if not is_course_blocked:
              <a href="${course_target}">${course_overview.display_name_with_default}</a>
            % else:
              <a class="disable-look">${course_overview.display_name_with_default}</a>
            % endif
          % else:
            <span>${course_overview.display_name_with_default}</span>
          % endif
        </h3>
        <div class="course-info">
          <span class="info-university">${get_course_university_about_section(course_overview)} - </span>
          <span class="info-course-id">${course_overview.display_number_with_default | h}</span>
          <span class="info-date-block" data-tooltip="Hi">
          % if course_overview.has_ended():
            ${_("Ended - {end_date}").format(end_date=course_overview.end_datetime_text("SHORT_DATE"))}
          % elif course_overview.has_started():
            ${_("Started - {start_date}").format(start_date=course_overview.start_datetime_text("SHORT_DATE"))}
          % elif course_overview.start_date_is_still_default: # Course start date TBD
            ${_("Coming Soon")}
          % else:   # hasn't started yet
            ${_("Starts - {start_date}").format(start_date=course_overview.start_datetime_text("SHORT_DATE"))}
          % endif
          </span>
        </div>
        <div class="wrapper-course-actions">
          <div class="course-actions">
            % if show_courseware_link:
              % if course_overview.has_ended():
                % if not is_course_blocked:
                  <a href="${course_target}" class="enter-course archived">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % else:
                  <a class="enter-course-blocked archived">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % endif
              % else:
                % if not is_course_blocked:
                  <a href="${course_target}" class="enter-course">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % else:
                  <a class="enter-course-blocked">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % endif
              % endif

              % if share_settings:
                <%
                  if share_settings.get("CUSTOM_COURSE_URLS", False):
                    if course_overview.social_sharing_url:
                      share_url = urllib.quote_plus(course_overview.social_sharing_url)
                    else:
                      share_url = ''
                  else:
                    share_url = urllib.quote_plus(request.build_absolute_uri(reverse('about_course', args=[unicode(course_overview.id)])))
                  share_window_name = 'shareWindow'
                  share_window_config = 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=640, height=480'
                %>
                % if share_url and share_settings.get('DASHBOARD_FACEBOOK', False):
                  <% facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' + share_url %>
                    <a
                      data-tooltip="${_('Share on Facebook')}"
                      class="action action-facebook"
                      aria-haspopup="true"
                      aria-expanded="false"
                      href="${facebook_url}"
                      target="_blank"
                      title="${_('Share on Facebook')}"
                      onclick="window.open('${facebook_url}', '${share_window_name}', '${share_window_config}'); return false;">
                      <span class="sr">${_('Facebook')}</span>
                      <i class="fa fa-facebook" aria-hidden="true"></i>
                    </a>
                % endif
                % if share_url and share_settings.get('DASHBOARD_TWITTER', False):
                  <% share_text_default = _("I'm learning on {platform_name}:").format(platform_name=settings.PLATFORM_NAME) %>
                  <% share_text = urllib.quote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', share_text_default)) %>
                  <% twitter_url = 'https://twitter.com/intent/tweet?text=' + share_text + '%20' + share_url %>
                    <a
                      data-tooltip="${_('Share on Twitter')}"
                      class="action action-twitter"
                      aria-haspopup="true"
                      aria-expanded="false"
                      href="${twitter_url}"
                      target="_blank"
                      title="${_('Share on Twitter')}"
                      onclick="window.open('${twitter_url}', '${share_window_name}', '${share_window_config}'); return false;">
                      <span class="sr">${_('Twitter')}</span>
                      <i class="fa fa-twitter" aria-hidden="true"></i>
                    </a>
                % endif
              % endif
            % endif
            <div class="wrapper-action-more">
              <a href="#actions-dropdown-${dashboard_index}" class="action action-more" id="actions-dropdown-link-${dashboard_index}" aria-haspopup="true" aria-expanded="false" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}">
                <span class="sr">${_('Course options dropdown')}</span>
                <i class="fa fa-cog" aria-hidden="true"></i>
              </a>
              <div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" aria-label="${_('Additional Actions Menu')}">
                <ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
                  <li class="actions-item" id="actions-item-unenroll-${dashboard_index}">
                    % if is_paid_course and show_refund_option:
                      ## Translators: The course name will be added to the end of this sentence.
                      % if not is_course_blocked:
                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course_overview-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_number)s?")}', '${_("You will be refunded the amount you paid.")}')">
                        ${_('Unenroll')}
                      </a>
                      % else:
                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_number)s?")}', '${_("You will be refunded the amount you paid.")}')">
                        ${_('Unenroll')}
                      </a>
                      % endif
                    % elif is_paid_course and not show_refund_option:
                      ## Translators: The course's name will be added to the end of this sentence.
                      % if not is_course_blocked:
                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_number)s?")}', '${_("You will not be refunded the amount you paid.")}')">
                        ${_('Unenroll')}
                      </a>
                      % else:
                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_number)s?")}', '${_("You will not be refunded the amount you paid.")}')">
                        ${_('Unenroll')}
                      </a>
                      % endif
                    % elif enrollment.mode != "verified":
                      ## Translators: The course's name will be added to the end of this sentence.
                      % if not is_course_blocked:
                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from %(course_number)s?")}', '')">
                        ${_('Unenroll')}
                      </a>
                      % else:
                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from %(course_number)s?")}', '')">
                        ${_('Unenroll')}
                      </a>
                      % endif
                    % elif show_refund_option:
                      ## Translators: The course's name will be added to the end of this sentence.
                      % if not is_course_blocked:
                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message(
                                      '${_("Are you sure you want to unenroll from the verified {cert_name_long} track of %(course_number)s?").format(cert_name_long=cert_name_long)}',
                                      '${_("You will be refunded the amount you paid.")}'
                                  )"
                      >
                        ${_('Unenroll')}
                      </a>
                      % else:
                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message(
                                      '${_("Are you sure you want to unenroll from the verified {cert_name_long} track of %(course_number)s?").format(cert_name_long=cert_name_long)}',
                                      '${_("You will be refunded the amount you paid.")}'
                                  )"
                      >
                        ${_('Unenroll')}
                      </a>
                      % endif
                    % else:
                      ## Translators: The course's name will be added to the end of this sentence.
                      % if not is_course_blocked:
                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message(
                                      '${_("Are you sure you want to unenroll from the verified {cert_name_long} track of %(course_number)s?").format(cert_name_long=cert_name_long)}',
                                      '${_("The refund deadline for this course has passed, so you will not receive a refund.")}'
                                  )"
                      >
                        ${_('Unenroll')}
                      </a>
                      % else:
                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
                         onclick="set_unenroll_message(
                                      '${_("Are you sure you want to unenroll from the verified {cert_name_long} track of %(course_number)s?").format(cert_name_long=cert_name_long)}',
                                      '${_("The refund deadline for this course has passed, so you will not receive a refund.")}'
                                  )"
                      >
                        ${_('Unenroll')}
                      </a>
                      % endif
                    % endif
                  </li>
                  <li class="actions-item" id="actions-item-email-settings-${dashboard_index}">
                    % if show_email_settings:
                      % if not is_course_blocked:
                        <a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}" data-optout="${unicode(course_overview.id) in course_optouts}">${_('Email Settings')}</a>
                      % else:
                        <a class="action action-email-settings is-disabled" data-course-id="${course_overview.id| h}" data-course-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}" data-optout="${unicode(course_overview.id) in course_optouts}">${_('Email Settings')}</a>
                      % endif
                    % endif
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
  </section>
  <footer class="wrapper-messages-primary">
    <ul class="messages-list">
      % if course_overview.may_certify() and cert_status:
        <%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course_overview=course_overview, enrollment=enrollment'/>
      % endif

      % if credit_status is not None:
        <%include file="_dashboard_credit_info.html" args="credit_status=credit_status"/>
      % endif 

        % if verification_status.get('status') in [VERIFY_STATUS_NEED_TO_VERIFY, VERIFY_STATUS_SUBMITTED, VERIFY_STATUS_APPROVED, VERIFY_STATUS_NEED_TO_REVERIFY] and not is_course_blocked:
        <div class="message message-status wrapper-message-primary is-shown">
          % if verification_status['status'] == VERIFY_STATUS_NEED_TO_VERIFY:
            <div class="verification-reminder">
              % if verification_status['days_until_deadline'] is not None:
                <h4 class="message-title">${_('Verification not yet complete.')}</h4>
                <p class="message-copy">${ungettext(
                  'You only have {days} day left to verify for this course.',
                  'You only have {days} days left to verify for this course.',
                  verification_status['days_until_deadline']
                ).format(days=verification_status['days_until_deadline'])}</p>
              % else:
                <h4 class="message-title">${_('Almost there!')}</h4>
                <p class="message-copy">${_('You still need to verify for this course.')}</p>
              % endif
            </div>
            <div class="verification-cta">
              <a href="${reverse('verify_student_verify_now', kwargs={'course_id': unicode(course_overview.id)})}" class="cta" data-course-id="${course_overview.id | h}">${_('Verify Now')}</a>
            </div>
          % elif verification_status['status'] == VERIFY_STATUS_SUBMITTED:
            <h4 class="message-title">${_('You have already verified your ID!')}</h4>
            <p class="message-copy">${_('Thanks for your patience as we process your request.')}</p>
          % elif verification_status['status'] == VERIFY_STATUS_APPROVED:
            <h4 class="message-title">${_('You have already verified your ID!')}</h4>
            % if verification_status.get('verification_good_until') is not None:
              <p class="message-copy">${_('Your verification status is good until {date}.').format(date=verification_status['verification_good_until'])}
            % endif
          % elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY:
            <h4 class="message-title">${_('Your verification will expire soon!')}</h4>
            ## Translators: start_link and end_link will be replaced with HTML tags;
            ## please do not translate these.
            <p class="message-copy">${_('Your current verification will expire before the verification deadline for this course. {start_link}Re-verify your identity now{end_link} using a webcam and a government-issued ID.').format(start_link='<a href="{href}">'.format(href=reverse('verify_student_reverify')), end_link='</a>')}</p>
          % endif
        </div>
        % endif

        % if course_mode_info['show_upsell'] and not is_course_blocked:
          <div class="message message-upsell has-actions is-shown">
            <div class="wrapper-tip">
              <h4 class="message-title">
                <span class="value">${_("Challenge Yourself!")}</span>
              </h4>
              <p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
            </div>

            <div class="wrapper-extended">
                <p class="message-copy">${_("You can still sign up for an ID verified {cert_name_long} for this course. If you plan to complete the whole course, it is a great way to recognize your achievement. {link_start}Learn more about the verified {cert_name_long}{link_end}.").format(link_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), link_end="</a>", cert_name_long=cert_name_long)}</p>

              <ul class="actions message-actions">
                <li class="action-item">
                  <a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': unicode(course_overview.id)})}" data-course-id="${course_overview.id | h}" data-user="${user.username | h}">
                    <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="${_("ID Verified Ribbon/Badge")}">
                    <span class="wrapper-copy">
                      <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified Track")}</span>
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        %endif

        % if is_course_blocked:
          <p id="block-course-msg" class="course-block">
            ${_("You can no longer access this course because payment has not yet been received. "
                "You can {contact_link_start}contact the account holder{contact_link_end} "
                "to request payment, or you can "
                "{unenroll_link_start}unenroll{unenroll_link_end} "
                "from this course").format(
              contact_link_start='<a href="#">',
              contact_link_end='</a>',
              unenroll_link_start=(
                '<a id="unregister_block_course" rel="leanModal" '
                'data-course-id="{course_id}" data-course-number="{course_number}" '
                'href="#unenroll-modal">'.format(
                  course_id=escape(course_overview.id),
                  course_number=escape(course_overview.number),
                )
              ),
              unenroll_link_end="</a>",
            )}
          </p>
        %endif


        % if course_requirements:
        ## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
        <% prc_target = reverse('about_course', args=[unicode(course_requirements['courses'][0]['key'])]) %>
        <li class="prerequisites">
          <p class="tip">
            ${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
                link_start='<a href="{}">'.format(prc_target),
                link_end='</a>',
                prc_display=course_requirements['courses'][0]['display'],
              )}
          </p>
        </li>
        % endif
    </ul>
  </footer>
</article>
</li>
<script>
           $( document ).ready(function() {

               if("${is_course_blocked}" == "True"){
                   $( "#unregister_block_course" ).click(function() {
                       $('.disable-look-unregister').click();
                   });
               }
           });

           function set_unenroll_message(track_info, refund_info) {
               document.getElementById('track-info').innerHTML = interpolate(track_info, {course_number: "<span id='unenroll_course_number'></span>"}, true);
               document.getElementById('refund-info').innerHTML = refund_info;
           }
</script>
