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

{% load compress %}
{% load i18n %}
{% load staticfiles %}

{% block title %}
    {% trans "Course Run Detail" %}
{% 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 object.course_run_state.is_published %}
            <div class="depth depth-0 published-status">
                <strong>
                    {% blocktrans with publish_date|date:'m/d/y' as course_publish_date trimmed %}
                        Course run announced on {{ course_publish_date }} - view it on edx.org at:
                    {% endblocktrans %}
                </strong>
                <a href="{{ object.preview_url }}" target="_blank">{{ object.preview_url }}</a>
            </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">{{ object.title }}</span>
                </h2>
            </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 'comments/add_auth_comments.html' with comment_type='default' %}
            {% include 'comments/comments_list.html' %}
        </div>
    </aside>
</div>
{% 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/publisher.js' %}"></script>
    <script src="{% static 'js/publisher/comments.js' %}"></script>
    <script>
        new Clipboard(".btn-copy", {
            text: function(trigger) {
                return $(trigger).parent().next('.copy').text().trim();
            }
        });
    </script>
{% endblock %}