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

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

{% block page_content %}
    {% 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 %}
    <div class="publisher-container">
        <h2 class="hd-2 emphasized">{% 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 PROGRESS" %}
            </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 "PREVIEW READY" %}
            </li>
            <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>
            <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 COURSE RUNS" %}
            </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/_preview_ready.html" %}
            <p></p>
        </div>

        <div role="tabpanel" id="studio" class="tab-panel" aria-labelledby="tab-studio" aria-hidden="false" tabindex="0">
            {% include "publisher/dashboard/_studio_requests.html" %}
        </div>
        <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 %}
