{% extends 'publisher/base.html' %}

{% load compress %}
{% load i18n %}
{% load static %}

{% block title %}
    {{ course_run.course.number }} - {{ course_run.start|date:'M Y' }}
{% endblock title %}

{% block page_content %}
<div class="layout-1t2t layout-flush publisher-container course-detail">
    <main class="layout-col layout-col-b layout-col-b-custom">
        {% if course_run.course_run_state.is_published %}
            <div class="depth depth-0 published-status">
                <strong>
<!-- Is it possible to make "View it on edx.org" into a link? If so, make it into a link, add a period at the end, and delete "at". If not, keep "at", but remove the colon and add a period after the link. -->
                    {% blocktrans with publish_date|date:'m/d/y' as course_publish_date trimmed %}
                        The About page for this course run was published on {{ course_publish_date }}.
                    {% endblocktrans %}
                    {% if course_run.preview_url %}
                        {% trans "View it on edx.org at" %}
                    {% endif %}
                </strong>
                {% if course_run.preview_url %}
                    <a href="{{ course_run.preview_url }}" target="_blank">{{ course_run.preview_url }}</a>
                {% endif %}
            </div>
        {% endif %}
        <nav class="administration-nav">
            <div class="tab-container">
                {% if can_view_all_tabs %}
                    <button class="selected" data-tab="#tab-1">{% trans "All" %}</button>
                    {% comment %}Translators: Studio is an edX tool for course creation.{% endcomment %}
                    <button data-tab="#tab-2">{% trans "STUDIO" %}</button>
                    {% comment %}Translators: CAT is an acronym for Course Administration Tool.{% endcomment %}
                    <button data-tab="#tab-3">{% trans "CAT" %}</button>
                    {% comment %}Translators: DRUPAL is an edX marketing site.{% endcomment %}
                    <button data-tab="#tab-4">{% trans "DRUPAL" %}</button>
                    <button data-tab="#tab-5">Salesforce</button>
                {% endif %}
            </div>
        </nav>

        <div id="app">
            <div class="page-header">
                <h2 class="hd-2 emphasized">
                    <span class="course-name">{{ course_run.title }}</span>
                </h2>
            </div>

        {% if request.user.is_staff and course_run.lms_course_id %}
          <button class="btn btn-primary" onclick="publish('{% url 'publisher:api:v1:course_run-publish' pk=course_run.pk %}');">{% trans "Publish" %}</button>
        {% endif %}

          <div class="alert hidden" role="alert" aria-labelledby="alertTitle" tabindex="-1" id="alertContainer" style="margin:15px 0;">
            <span class="icon alert-icon fa" aria-hidden="true"></span>

            <div class="alert-message-with-action">
              <h3 class="sr-only alert-title" id="alertTitle"></h3>
              <p class="alert-copy"></p>
            </div>
          </div>

            {% include 'alert_messages.html' %}

            <div id="stateChangeAlert" class="alert-messages hidden">
                <div class="alert alert-error" role="alert" tabindex="-1">
                    <div>
                        <p id="stateChangeError" class="alert-copy"></p>
                    </div>
                </div>
            </div>

            <div class="tabs">
                <div id="tab-1" class="tab-content active">
                    {% include 'publisher/course_run_detail/_all.html' %}
                </div>
              {% if can_view_all_tabs %}
                <div id="tab-2" class="tab-content">
                    {% include 'publisher/course_run_detail/_studio.html' %}
                </div>
                <div id="tab-3" class="tab-content">
                    {% include 'publisher/course_run_detail/_cat.html' %}
                </div>
                <div id="tab-4" class="tab-content">
                    {% include 'publisher/course_run_detail/_drupal.html' %}
                </div>
                <div id="tab-5" class="tab-content">
                    {% include 'publisher/course_run_detail/_salesforce.html' %}
                </div>
              {% endif %}
            </div>
        </div>
    </main>

    <aside id="right-panel" class="layout-col layout-col-a layout-col-a-custom">
        <div id="approval-widget" class="approval-widget {% if not publisher_approval_widget_feature %}hidden{% endif %}">
        {% with is_course_run=True %}
          {% include 'publisher/course_run_detail/_widgets.html' %}
        {% endwith %}
        </div>
        <div id="comments-widget" class="comment-container {% if not publisher_comment_widget_feature %}hidden{% endif %}">
            {% include 'publisher/comments/add_auth_comments.html' with comment_type='default' %}
            {% include 'publisher/comments/comments_list.html' %}
        </div>
    </aside>
</div>
{% include 'publisher/course_run_detail/_instructor_profile.html' %}
{% endblock %}

{% block extra_js %}
    <script src="{% static 'bower_components/clipboard/dist/clipboard.min.js' %}"></script>
    <script src="{% static 'js/publisher/jquery-dateFormat.min.js' %}"></script>
    <script src="{% static 'js/publisher/views/course_detail.js' %}"></script>
    <script src="{% static 'js/publisher/organizations.js' %}"></script>
    <script src="{% static 'js/publisher/comments.js' %}"></script>
    <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
    <script src="{% static 'js/publisher/preview-url.js' %}"></script>
    <script src="{% static 'js/publisher/change-state.js' %}"></script>
    <script src="{% static 'js/publisher/modal-screen.js' %}"></script>
    <script>
        'use strict';

        new Clipboard(".btn-copy", {
            text: function(trigger) {
                return $(trigger).parent().next('.copy').html().trim();
            }
        });

        function updateAlert(msg, isError) {
            var $alertContainer = $('#alertContainer'),
                alertClassToAdd = isError ? 'alert-error' : 'alert-success',
                alertClassToRemove = isError ? 'alert-success' : 'alert-error',
                iconClassToAdd = isError ? 'fa-warning' : 'fa-check',
                iconClassToRemove = isError ? 'fa-check' : 'fa-warning';

            $alertContainer.removeClass('hidden').removeClass(alertClassToRemove).addClass(alertClassToAdd);
            $('.alert-icon', $alertContainer).removeClass(iconClassToRemove).addClass(iconClassToAdd);
            $('.alert-title', $alertContainer).text(msg);
            $('.alert-copy', $alertContainer).text(msg);
        }

        function showSuccessAlert(msg) {
            updateAlert(msg, false);
        }

        function showFailureAlert(msg) {
            updateAlert(msg, true);
        }

        function publish(url) {
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json'
            })
                .done(function(data, textStatus, jqXHR) {
                    showSuccessAlert('{% trans 'Successfully published to Studio, E-Commerce, and Discovery.' %}');
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    showFailureAlert('{% trans 'Publication failed.' %} \n' + jqXHR.responseText);
                });
        }
    </script>
{% endblock %}