{% extends 'publisher/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}
{% trans "Dashboard" %}
{% endblock title %}

{% block page_content %}
    <div class="about-and-add-buttons clearfix">
        <h2 class="hd-2 emphasized">{% trans "Course About Pages" %}</h2>
            <div class="col-60 float-left">
            <p class="about-publisher">{% trans "EdX Publisher is used to create course About pages. Users enter, review, and approve content in Publisher. Publisher keeps track of the details and sends email updates when actions are necessary." %}</p>
            <p>{% trans "EdX Publisher is a companion to edX Studio. Course teams enter About page information in Publisher, and course content in Studio." %}</p>
        </div>
        <div class="col-40 float-left">
            <a href="{% url 'publisher:publisher_courses_new' %}" class="btn btn-brand btn-add-course">
                {% trans "Add a New Course" %}
            </a>
            <a href="{% url 'publisher:publisher_create_run_from_dashboard' %}" class="btn btn-brand btn-add-courserun">
                {% trans "Add a Course Run" %}
            </a>
        </div>

    </div>
    <div class="publisher-container">
        {% with studio_count=studio_request_courses|length published_count=published_course_runs|length preview_count=preview_course_runs|length in_progress_count=in_progress_course_runs|length %}
        <h2 class="hd-2 emphasized course-runs-heading">{% trans "Course runs" %}</h2>
        <ul role="tablist" class="tabs">
            <li role="tab" id="tab-progress" class="tab" aria-selected="true" aria-expanded="false"
                    aria-controls="progress" tabindex="0">
                    <span>{{ in_progress_count }}</span>{% trans "In Development" %}
            </li>
            <li role="tab" id="tab-preview" class="tab" aria-selected="false" aria-expanded="false"
                aria-controls="preview" tabindex="-1">
                <span>{{ preview_count }}</span>{% trans "In Preview" %}
            </li>
            {% if is_project_coordinator %}
                <li role="tab" id="tab-studio" class="tab" aria-selected="false" aria-expanded="true"
                    aria-controls="studio" tabindex="-1" data-studio-count="{{ studio_count }}">
                    <span id="studio-count">{{ studio_count }}</span>{% trans "Studio Request" %}
                </li>
            {% endif %}
            <li role="tab" id="tab-published" class="tab" aria-selected="false" aria-expanded="false"
                aria-controls="published" tabindex="-1">
                <span>{{ published_count }}</span>{% trans "Published About Pages" %}
            </li>

        </ul>

        <div role="tabpanel" id="progress" class="tab-panel" aria-labelledby="tab-progress" aria-hidden="false" tabindex="-1">
             {% include "publisher/dashboard/_in_progress.html" %}
        </div>

        <div role="tabpanel" id="preview" class="tab-panel" aria-labelledby="tab-preview" aria-hidden="true" tabindex="-1">
            {% include "publisher/dashboard/_in_preview.html" %}
        </div>

        {% if is_project_coordinator %}
            <div role="tabpanel" id="studio" class="tab-panel" aria-labelledby="tab-studio" aria-hidden="false" tabindex="0">
                {% include "publisher/dashboard/_studio_requests.html" %}
            </div>
        {% endif %}

        <div role="tabpanel" id="published" class="tab-panel" aria-labelledby="tab-published" aria-hidden="false" tabindex="0">
            {% include "publisher/dashboard/_published.html" %}
        </div>
    </div>

    {% endwith %}
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/publisher/tabs.js' %}"></script>
    <script src="{% static 'js/publisher/views/dashboard.js' %}"></script>
{% endblock %}
