{% 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">
        <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 class="status-information">
                <div class="info-item">
                    <span class="item">
                        <span class="heading">{% trans "Status" %}:</span>
                        <span>{{ object.workflow_state }}</span>
                    </span>
                </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 class="layout-col layout-col-a {% if publisher_hide_features_for_pilot %}hidden{% endif %}">
          {% include 'publisher/course_run_detail/_approval_widget.html' %}
    </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 %}
