<%! from django.utils.translation import ugettext as _ %>
<%!
  from django.core.urlresolvers import reverse
  from courseware.courses import course_image_url, get_course_about_section
  from courseware.access import has_access
  from django.conf import settings
  from edxmako.shortcuts import marketing_link

  if settings.FEATURES.get('ENABLE_SHOPPING_CART'):
      cart_link = reverse('shoppingcart.views.show_cart')
  else:
      cart_link = ""
%>
<%namespace name='static' file='../static_content.html'/>
<%! from microsite_configuration import microsite %>

<%inherit file="../main.html" />

<%block name="headextra">

  <%
    if self.theme_enabled():
      google_analytics_file = u'../{ga}'.format(
        ga=microsite.get_value('google_analytics_file', 'theme-google-analytics.html')
      )
    else:
      google_analytics_file = '../google_analytics.html'
  %>

  <%include file="${google_analytics_file}" />

  ## OG (Open Graph) title and description added below to give social media info to display
  ## (https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#tags)
  <meta property="og:title" content="${get_course_about_section(course, 'title')}" />
  <meta property="og:description" content="${get_course_about_section(course, 'short_description')}" />
</%block>

<%block name="js_extra">

  <script type="text/javascript">
  (function() {
    $(".register").click(function(event) {
      $("#class_enroll_form").submit();
      event.preventDefault();
    });

    % if settings.FEATURES.get('ENABLE_SHOPPING_CART') and settings.FEATURES.get('ENABLE_PAID_COURSE_REGISTRATION'):
      add_course_complete_handler = function(jqXHR, textStatus) {
        if (jqXHR.status == 200) {
          location.href = "${cart_link}";
        }
        if (jqXHR.status == 400) {
          $("#register_error")
            .html(jqXHR.responseText ? jqXHR.responseText : "${_('An error occurred. Please try again later.')}")
            .css("display", "block");
        }
        else if (jqXHR.status == 403) {
            location.href = "${reg_then_add_to_cart_link}";
        }
      };
      $("#add_to_cart_post").click(function(event){
        $.ajax({
          url: "${reverse('add_course_to_cart', args=[course.id])}",
          type: "POST",
          /* Rant: HAD TO USE COMPLETE B/C PROMISE.DONE FOR SOME REASON DOES NOT WORK ON THIS PAGE. */
          complete: add_course_complete_handler
        })
        event.preventDefault();
      });
    % endif

    ## making the conditional around this entire JS block for sanity
    %if settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
      <%
        perms_error = _('The currently logged-in user account does not have permission to enroll in this course. '
                        'You may need to {start_logout_tag}log out{end_tag} then try the register button again. '
                        'Please visit the {start_help_tag}help page{end_tag} for a possible solution.').format(
                          start_help_tag="<a href='{url}'>".format(url=marketing_link('FAQ')), end_tag='</a>',
                          start_logout_tag="<a href='{url}'>".format(url=reverse('logout'))
                          )
      %>
    $('#class_enroll_form').on('ajax:complete', function(event, xhr) {
      if(xhr.status == 200) {
        location.href = "${reverse('dashboard')}";
      } else if (xhr.status == 403) {
        location.href = "${reverse('course-specific-register', args=[course.id])}?course_id=${course.id}&enrollment_action=enroll";
      } else if (xhr.status == 400) { //This means the user did not have permission
        $('#register_error').html("${perms_error}").css("display", "block");
      } else {
        $('#register_error').html(
            (xhr.responseText ? xhr.responseText : "${_("An error occurred. Please try again later.")}")
        ).css("display", "block");
      }
    });

    %else:

    $('#class_enroll_form').on('ajax:complete', function(event, xhr) {
      if(xhr.status == 200) {
        if (xhr.responseText == "") {
          location.href = "${reverse('dashboard')}";
        }
        else {
          location.href = xhr.responseText;
        }
      } else if (xhr.status == 403) {
        location.href = "${reverse('register_user')}?course_id=${course.id}&enrollment_action=enroll";
      } else {
        $('#register_error').html(
            (xhr.responseText ? xhr.responseText : 'An error occurred. Please try again later.')
        ).css("display", "block");
      }
    });

    %endif

  })(this)
  </script>

  <script src="${static.url('js/course_info.js')}"></script>
</%block>

<%block name="pagetitle">${_("About {course.display_number_with_default}").format(course=course) | h}</%block>

<section class="course-info">
  <header class="course-profile">
    <div class="intro-inner-wrapper">
      <div class="table">
      <section class="intro">
        <hgroup>
          <h1>
            ${course.display_number_with_default | h}: ${get_course_about_section(course, "title")}
            % if not self.theme_enabled():
              <a href="#">${get_course_about_section(course, "university")}</a>
            % endif
          </h1>
        </hgroup>

        <div class="main-cta">
        %if user.is_authenticated() and registered:
          %if show_courseware_link:
            <a href="${course_target}">
          %endif

          <span class="register disabled">${_("You are registered for this course")}</span>

          %if show_courseware_link:
            <strong>${_("View Courseware")}</strong>
            </a>
          %endif

        %elif in_cart:
          <span class="add-to-cart">
            ${_('This course is in your <a href="{cart_link}">cart</a>.').format(cart_link=cart_link)}
          </span>
        %elif settings.FEATURES.get('ENABLE_PAID_COURSE_REGISTRATION') and registration_price:
          <%
          if user.is_authenticated():
            reg_href = "#"
            reg_element_id = "add_to_cart_post"
          else:
            reg_href = reg_then_add_to_cart_link
            reg_element_id = "reg_then_add_to_cart"
          %>
          <a href="${reg_href}" class="add-to-cart" id="${reg_element_id}">
            ${_("Add {course.display_number_with_default} to Cart ({currency_symbol}{cost})")\
              .format(course=course, currency_symbol=settings.PAID_COURSE_REGISTRATION_CURRENCY[1],
                      cost=registration_price)}
          </a>
          <div id="register_error"></div>
        % elif is_course_full:
          <span class="register disabled">
            ${_("Course is full")}
          </span>
        %else:
          <a href="#" class="register">
            ${_("Register for {course.display_number_with_default}").format(course=course) | h}
          </a>
          <div id="register_error"></div>
        %endif
        </div>

      </section>
      % if get_course_about_section(course, "video"):
      <a href="#video-modal" class="media" rel="leanModal">
        <div class="hero">
          <img src="${course_image_url(course)}" alt="" />
          <div class="play-intro"></div>
        </div>
      </a>
      %else:
      <div class="media">
        <div class="hero">
          <img src="${course_image_url(course)}" alt="" />
        </div>
      </div>
      % endif
    </div>
      </div>
  </header>

  <section class="container">
    <section class="details">
      <nav>
        <a href="#" class="active">${_("Overview")}</a>
      ##  <a href="#">${_("FAQ")}</a>
      ##  <a href="#">${_("Requirements")}</a>
      ##  <a href="#">${_("Text-book")}</a>
      ##  <a href="#">${_("Syllabus")}</a>
      ##  <a href="#">${_("Reviews")}</a>
      </nav>

      <div class="inner-wrapper">
        ${get_course_about_section(course, "overview")}
      </div>
    </section>

    <section class="course-sidebar">
      <section class="course-summary">
        <header>
          % if microsite.get_value('course_about_show_social_links', True):
          <div class="social-sharing">
            <div class="sharing-message">${_("Share with friends and family!")}</div>
            ## TODO: this should probably be an overrideable block,
            ##       or something allowing themes to do whatever they
            ##       want here (and on this whole page, really).
            % if self.stanford_theme_enabled():
              <a href="http://twitter.com/intent/tweet?text=I+just+registered+for+${course.number}+${get_course_about_section(course, 'title')}!+(http://class.stanford.edu)" class="share">
                <img src="${static.url('images/social/twitter-sharing.png')}" alt="Tweet that you've registered for this course">
              </a>
              <a href="mailto:?subject=Take%20a%20course%20at%20Stanford%20online!&body=I%20just%20registered%20for%20${course.number}%20${get_course_about_section(course, 'title')}+(http://class.stanford.edu)" class="share">
                <img src="${static.url('images/social/email-sharing.png')}" alt="Email someone to say you've registered for this course">
              </a>
            % else:
              <%
                site_domain = microsite.get_value('site_domain', 'www.edx.org')
                platform_name = microsite.get_value('platform_name', 'edX')

                tweet_action = "http://twitter.com/intent/tweet?text=I+just+registered+for+{number}+{title}+through+{account}:+{url}".format(
                    number=course.number,
                    title=get_course_about_section(course, 'title'),
                    account=microsite.get_value('course_about_twitter_account', '@edxonline'),
                    url="http://{domain}{path}".format(
                        domain=site_domain,
                        path=reverse('about_course', args=[course.id])
                    )
                )

                facebook_link = microsite.get_value('course_about_facebook_link', 'http://www.facebook.com/EdxOnline')

                email_subject = "mailto:?subject={subject}&body={body}".format(
                    subject="Take a course with {platform} online".format(platform=platform_name),
                    body="I just registered for {number} {title} through {platform} {url}".format(
                        number=course.number,
                        title=get_course_about_section(course, 'title'),
                        platform=platform_name,
                        url="http://{domain}{path}".format(
                            domain=site_domain,
                            path=reverse('about_course', args=[course.id]),
                        )
                    )
                ).replace(" ", "%20")
              %>
              <a href="${tweet_action}" class="share">
                <img src="${static.url('images/social/twitter-sharing.png')}" alt="Tweet that you've registered for this course">
              </a>
              <a href="${facebook_link}" class="share">
                <img src="${static.url('images/social/facebook-sharing.png')}" alt="Post a Facebook message to say you've registered for this course">
              </a>
              <a href="${email_subject}" class="share">
                <img src="${static.url('images/social/email-sharing.png')}" alt="Email someone to say you've registered for this course">
              </a>
            % endif
          </div>
          % endif
        </header>

        <ol class="important-dates">
          <li><div class="icon course-number"></div><p>${_("Course Number")}</p><span class="course-number">${course.display_number_with_default | h}</span></li>
          % if not course.start_date_is_still_default:
          <li><div class="icon start"></div><p>${_("Classes Start")}</p><span class="start-date">${course.start_date_text}</span></li>
          % endif
            ## We plan to ditch end_date (which is not stored in course metadata),
            ## but for backwards compatibility, show about/end_date blob if it exists.
            % if get_course_about_section(course, "end_date") or course.end:
            <li>
                <div class="icon end"></div>
                <p>${_("Classes End")}</p><span class="final-date">
                % if get_course_about_section(course, "end_date"):
                    ${get_course_about_section(course, "end_date")}
                % else:
                    ${course.end_date_text}
                % endif
                </span>
            </li>
            % endif

          % if get_course_about_section(course, "effort"):
            <li><div class="icon effort"></div><p>${_("Estimated Effort")}</p><span class="start-date">${get_course_about_section(course, "effort")}</span></li>
          % endif

          ##<li><div class="icon length"></div><p>${_('Course Length')}</p><span class="course-length">${_('{number} weeks').format(number=15)}</span></li>

          % if get_course_about_section(course, "prerequisites"):
            <li class="prerequisites"><div class="icon prereq"></div><p>${_("Prerequisites")}</p><span class="start-date">${get_course_about_section(course, "prerequisites")}</span></li>
          % endif
        </ol>
      </section>


      ## For now, ocw links are the only thing that goes in additional resources
      % if get_course_about_section(course, "ocw_links"):
      <section class="additional-resources">
        <header>
          <h1>${_("Additional Resources")}</h1>
        </header>

        <section>
          ## "MITOpenCourseware" should *not* be translated
          <h2 class="opencourseware">MITOpenCourseware</h2>
             ${get_course_about_section(course, "ocw_links")}
        </section>
      </section>
      %endif
    </section>

  </section>
</section>

%if not registered:
  <div style="display: none;">
    <form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
      <fieldset class="enroll_fieldset">
        <input name="course_id" type="hidden" value="${course.id}">
        <input name="enrollment_action" type="hidden" value="enroll">
      </fieldset>
      <div class="submit">
        <input name="submit" type="submit" value="enroll">
      </div>
    </form>
  </div>
%endif

<%include file="../video_modal.html" />
