<%page args="course_overview, enrollment, show_courseware_link, cert_status, can_unenroll, credit_status, show_email_settings, course_mode_info, is_paid_course, is_course_blocked, verification_status, course_requirements, dashboard_index, share_settings, related_programs, display_course_modes_on_dashboard" expression_filter="h"/>

<%!
import urllib

from django.utils.translation import ugettext as _
from django.utils.translation import ungettext
from django.core.urlresolvers import reverse
from course_modes.models import CourseMode
from course_modes.helpers import enrollment_mode_display
from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
from openedx.core.djangolib.markup import HTML, Text
from openedx.features.course_experience import course_home_url_name
from student.helpers import (
  VERIFY_STATUS_NEED_TO_VERIFY,
  VERIFY_STATUS_SUBMITTED,
  VERIFY_STATUS_RESUBMITTED,
  VERIFY_STATUS_APPROVED,
  VERIFY_STATUS_MISSED_DEADLINE,
  VERIFY_STATUS_NEED_TO_REVERIFY,
  DISABLE_UNENROLL_CERT_STATES,
)
from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_params
%>

<%
  reverify_link = reverse('verify_student_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 display_course_modes_on_dashboard:
    <%
        course_verified_certs = enrollment_mode_display(
            enrollment.mode,
            verification_status.get('status'),
            course_overview.id
        )
    %>
    <%
        mode_class = course_verified_certs.get('display_mode', '')
        if mode_class != '':
            mode_class = ' ' + mode_class ;
    %>
  % else:
    <% mode_class = '' %>
  % endif
      <div class="course-container"
        % if getattr(course_overview, 'language'):
          lang="${course_overview.language}"
        % endif
      >
<article class="course${mode_class}">
  <% course_target = reverse(course_home_url_name(course_overview.id), args=[unicode(course_overview.id)]) %>
  <section class="details" aria-labelledby="details-heading-${course_overview.number}">
      <h2 class="hd hd-2 sr" id="details-heading-${course_overview.number}">${_('Course details')}</h2>
    <div class="wrapper-course-image" aria-hidden="true">
      % if show_courseware_link:
        % if not is_course_blocked:
            <a href="${course_target}" data-course-key="${enrollment.course_id}" class="cover">
              <img src="${course_overview.image_urls['small']}" class="course-image" alt="${_('{course_number} {course_name} Home Page').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default)}" />
            </a>
        % else:
            <a class="fade-cover">
              <img src="${course_overview.image_urls['small']}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default)}" />
            </a>
        % endif
      % else:
        <a class="cover">
          <img src="${course_overview.image_urls['small']}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default)}" />
        </a>
      % endif
      % if display_course_modes_on_dashboard and course_verified_certs.get('display_mode') != 'audit':
        <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 data-course-key="${enrollment.course_id}" href="${course_target}">${course_overview.display_name_with_default}</a>
            % else:
              <a class="disable-look" data-course-key="${enrollment.course_id}">${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">${course_overview.display_org_with_default} - </span>
          <span class="info-course-id">${course_overview.display_number_with_default}</span>
          <%
            if course_overview.start_date_is_still_default:
                container_string = _("Coming Soon")
                course_date = None
            else:
                format = 'shortDate'
                if course_overview.has_ended():
                    container_string = _("Ended - {date}")
                    course_date = course_overview.end
                elif course_overview.has_started():
                    container_string = _("Started - {date}")
                    course_date = course_overview.dashboard_start_display
                elif course_overview.starts_within(days=5):
                    container_string = _("Starts - {date}")
                    course_date = course_overview.dashboard_start_display
                    format = 'defaultFormat'
                else: ## hasn't started yet
                    container_string = _("Starts - {date}")
                    course_date = course_overview.dashboard_start_display
                endif
            endif
          %>

                % if isinstance(course_date, basestring):
                    <span class="info-date-block" data-tooltip="Hi">${_(container_string).format(date=course_date)}</span>
                % elif course_date is not None:
                    <%
                        course_date_string = course_date.strftime('%Y-%m-%dT%H:%M:%S%z')
                    %>
                    <span class="info-date-block localized-datetime" data-language="${user_language}" data-tooltip="Hi" data-timezone="${user_timezone}" data-datetime="${course_date_string}" data-format=${format} data-string="${container_string}"></span>
                % endif
        </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" data-course-key="${enrollment.course_id}">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % else:
                  <a class="enter-course-blocked archived" data-course-key="${enrollment.course_id}">${_('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" data-course-key="${enrollment.course_id}">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % else:
                  <a class="enter-course-blocked" data-course-key="${enrollment.course_id}">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
                % endif
              % endif
            % endif

            % if show_courseware_link or course_overview.has_social_sharing_url() or course_overview.has_marketing_url():

                % if share_settings:
                    <%
                      share_url = get_link_for_about_page(course_overview)
                      encoded_utm_parameters = get_encoded_course_sharing_utm_params()
                      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_settings.get('DASHBOARD_FACEBOOK', False):
                        <%
                          facebook_share_url = "{url}?{utm_params}".format(url=share_url.encode('utf-8'), utm_params=encoded_utm_parameters['facebook'])
                          share_text = _("I'm taking {course_name} online with edX.org. Check it out!").format(course_name=course_overview.display_name_with_default)
                          query_params = urllib.urlencode((('u', facebook_share_url), ('quote', share_text.encode('utf-8')),))
                          facebook_url = 'https://www.facebook.com/sharer/sharer.php?{query}'.format(query=query_params)
                          share_msg = _("Share {course_name} on Facebook").format(course_name=course_overview.display_name_with_default)
                        %>
                        <a
                          data-tooltip="${_('Share on Facebook')}"
                          data-trigger="focus hover"
                          class="action action-facebook"
                          href="${facebook_url}"
                          target="_blank"
                          title="${_('Share on Facebook')}"
                          data-course-id="${course_overview.id}"
                          onclick="window.open('${facebook_url}', '${share_window_name}', '${share_window_config}'); return false;">
                          <span class="sr">${share_msg}</span>
                          <span class="fa fa-facebook" aria-hidden="true"></span>
                        </a>
                    % endif
                    % if share_settings.get('DASHBOARD_TWITTER', False):
                        <%
                          twitter_share_url = "{url}?{utm_params}".format(url=share_url.encode('utf-8'), utm_params=encoded_utm_parameters['twitter'])
                          default_share_text = _("I'm taking {course_name} online with @edxonline. Check it out!").format(course_name=course_overview.display_name_with_default)
                          share_text = urllib.quote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', default_share_text.encode('utf-8')))
                          twitter_url = 'https://twitter.com/intent/tweet?text=' + share_text + '%20' + urllib.quote_plus(twitter_share_url)
                          share_msg = _("Share {course_name} on Twitter").format(course_name=course_overview.display_name_with_default)
                        %>
                        <a
                          data-tooltip="${_('Share on Twitter')}"
                          data-trigger="focus hover"
                          class="action action-twitter"
                          href="${twitter_url}"
                          target="_blank"
                          title="${_('Share on Twitter')}"
                          data-course-id="${course_overview.id}"
                          onclick="window.open('${twitter_url}', '${share_window_name}', '${share_window_config}'); return false;">
                          <span class="sr">${share_msg}</span>
                          <span class="fa fa-twitter" aria-hidden="true"></span>
                        </a>
                    % endif
                % endif

            % endif

            <div class="wrapper-action-more" data-course-key="${enrollment.course_id}">
              <button type="button" class="action action-more" id="actions-dropdown-link-${dashboard_index}" aria-haspopup="true" aria-expanded="false" aria-controls="actions-dropdown-${dashboard_index}" data-course-number="${course_overview.number}" data-course-name="${course_overview.display_name_with_default}" data-dashboard-index="${dashboard_index}">
                <span class="sr">${_('Course options for')}</span>
                <span class="sr">&nbsp;
                  ${course_overview.display_name_with_default}
                </span>
                <span class="fa fa-cog" aria-hidden="true"></span>
              </button>
              <div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" tabindex="-1">
                <ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
                  % if can_unenroll:
                    <li class="actions-item" id="actions-item-unenroll-${dashboard_index}" role="menuitem">
                      <% course_refund_url = reverse('course_run_refund_status', args=[unicode(course_overview.id)]) %>
                          % if not is_course_blocked:
                          <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal"
                             data-course-id="${course_overview.id}"
                             data-course-number="${course_overview.number}"
                             data-course-name="${course_overview.display_name_with_default}"
                             data-dashboard-index="${dashboard_index}"
                             data-course-refund-url="${course_refund_url}"
                             data-course-is-paid-course="${is_paid_course}"
                             data-course-cert-name-long="${cert_name_long}"
                             data-course-enrollment-mode="${enrollment.mode}">
                            ${_('Unenroll')}
                          </a>
                          % else:
                          <a class="action action-unenroll is-disabled"
                             data-course-id="${course_overview.id}"
                             data-course-number="${course_overview.number}"
                             data-course-name="${course_overview.display_name_with_default}"
                             data-dashboard-index="${dashboard_index}"
                             data-course-refund-url="${course_refund_url}"
                             data-course-is-paid-course="${is_paid_course}"
                             data-course-cert-name-long="${cert_name_long}"
                             data-course-enrollment-mode="${enrollment.mode}">
                            ${_('Unenroll')}
                          </a>
                        % endif
                    </li>
                % endif
                  <li class="actions-item" id="actions-item-email-settings-${dashboard_index}" role="menuitem">
                    % 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}" data-course-number="${course_overview.number}" 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}" data-course-number="${course_overview.number}" 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">
    <div class="messages-list">
      % if related_programs:
      <div class="message message-related-programs is-shown">
        <span class="related-programs-preface" tabindex="0">${_('Related Programs')}:</span>
        <ul>
          % for program in related_programs:
          <li>
            <span class="category-icon ${program['type'].lower()}-icon" aria-hidden="true"></span>
            <span><a href="${program['detail_url']}">${u'{title} {type}'.format(title=program['title'], type=program['type'])}</a></span>
          </li>
          % endfor
        </ul>
      </div>
      % endif

      % 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, reverify_link=reverify_link'/>
      % 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_RESUBMITTED, 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="btn" data-course-id="${course_overview.id}">${_('Verify Now')}</a>
            </div>
          % elif verification_status['status'] == VERIFY_STATUS_SUBMITTED:
            <h4 class="message-title">${_('You have submitted your verification information.')}</h4>
            <p class="message-copy">${_('You will see a message on your dashboard when the verification process is complete (usually within 1-2 days).')}</p>
          % elif verification_status['status'] == VERIFY_STATUS_RESUBMITTED:
            <h4 class="message-title">${_('Your current verification will expire soon!')}</h4>
            <p class="message-copy">${_('You have submitted your reverification information. You will see a message on your dashboard when the verification process is complete (usually within 1-2 days).')}</p>
          % elif verification_status['status'] == VERIFY_STATUS_APPROVED:
            <h4 class="message-title">${_('You have successfully verified your ID with edX')}</h4>
            % if verification_status.get('verification_good_until') is not None:
              <p class="message-copy">${_('Your current verification is effective until {date}.').format(date=verification_status['verification_good_until'])}
            % endif
          % elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY:
            <h4 class="message-title">${_('Your current 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">${Text(_('Your current verification will expire in {days} days. {start_link}Re-verify your identity now{end_link} using a webcam and a government-issued photo ID.')).format(
                start_link=HTML('<a href="{href}">').format(href=reverse('verify_student_reverify')),
                end_link=HTML('</a>'),
                days=settings.VERIFY_STUDENT.get("EXPIRING_SOON_WINDOW")
              )}
            </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-extended">
                <p class="message-copy" align="justify">
                  <b class="message-copy-bold">
                    ${_("Pursue a {cert_name_long} to highlight the knowledge and skills you gain in this course.").format(cert_name_long=cert_name_long)}
                  </b><br>
                    ${Text(_("It's official. It's easily shareable. "
                        "It's a proven motivator to complete the course. {line_break}"
                        "{link_start}Learn more about the verified {cert_name_long}{link_end}.")).format(
                          line_break=HTML('<br>'),
                          link_start=HTML('<a href="{}" class="verified-info" data-course-key="{}">').format(
                            marketing_link('WHAT_IS_VERIFIED_CERT'),
                            enrollment.course_id
                          ),
                          link_end=HTML('</a>'),
                          cert_name_long=cert_name_long
                        )}
                </p>
                <div class="action-upgrade-container">
                  % if use_ecommerce_payment_flow and course_mode_info['verified_sku']:
                    <a class="action action-upgrade" href="${ecommerce_payment_page}?sku=${course_mode_info['verified_sku']}">
                  % else:
                    <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}" data-user="${user.username}">
                  % endif
                      <span class="action-upgrade-icon" aria-hidden="true"></span>
                    <span class="wrapper-copy">
                      <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified")}</span>
                        <span class="sr">&nbsp;${_(course_overview.display_name_with_default)}</span>
                    </span>
                  </a>
                </div>
            </div>
          </div>
        %endif

        % if is_course_blocked:
          <p id="block-course-msg" class="course-block">
            ${Text(_("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=HTML('<button type="button">'),
              contact_link_end=HTML('</button>'),
              unenroll_link_start=HTML(
                '<a id="unregister_block_course" rel="leanModal" '
                'data-course-id="{course_id}" data-course-number="{course_number}" data-course-name="{course_name}" '
                'href="#unenroll-modal">'
              ).format(
                course_id=course_overview.id,
                course_number=course_overview.number,
                course_name=course_overview.display_name_with_default,
              ),
              unenroll_link_end=HTML('</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'])]) %>
        <div class="prerequisites">
          <p class="tip">
            ${Text(_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.")).format(
                link_start=HTML('<a href="{}">').format(prc_target),
                link_end=HTML('</a>'),
                prc_display=course_requirements['courses'][0]['display'],
              )}
          </p>
        </div>
        % endif
    </div>
  </footer>
</article>
</div>
</li>
<script>
           $( document ).ready(function() {

               if("${is_course_blocked | n, dump_js_escaped_json}" == 'true'){
                   $( "#unregister_block_course" ).click(function() {
                       $('.disable-look-unregister').click();
                   });
               }
           });
</script>

% if share_settings.get('DASHBOARD_FACEBOOK', False) and share_settings.get('DASHBOARD_TWITTER', False):
    <%static:require_module_async module_name="js/course_sharing/course_sharing_events" class_name="CourseSharingEvents">
        CourseSharingEvents("${course_overview.id | n, js_escaped_string}");
    </%static:require_module_async>
%endif

<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
    DateUtilFactory.transform(iterationKey=".localized-datetime");
</%static:require_module_async>
