{% extends "base.html" %}

{% block subtitle %}
  Dashboard
{% endblock subtitle %}

{% block content %}
  <div class="container" ng-controller="Dashboard">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="oppia-main-content">
          <h3 class="oppia-page-title">
            Dashboard
          </h3>

          <div class="container">
            <div class="row">
              <div class="col-lg-8 col-md-8 col-sm-8">
                <h4>Most recent updates to explorations and threads</h4>
                <div>
                  <span class="pull-right" ng-if="jobQueuedMsec" style="opacity: 0.7; font-size: smaller;">
                    Last updated: <[getLocaleAbbreviatedDatetimeString(jobQueuedMsec)]>
                  </span>
                  <!-- This seems to be needed because otherwise, in Firefox, the 'last updated' string gets merged into the table of recent updates. -->
                  <br>
                </div>

                <div ng-if="recentUpdates.length === 0">
                  <em>No recent updates.</em>
                </div>

                <div ng-if="recentUpdates.length > 0">
                  <table class="table">
                    <tr>
                      <th></th>
                      <th>Exploration</th>
                      <th>Last updated</th>
                      <th>by</th>
                      <th>Subject</th>
                    </tr>
                    <tr ng-repeat="update in recentUpdates">
                      <td>
                        <span ng-if="update.type === 'exploration_commit'"
                              class="glyphicon glyphicon-flag"
                              title="Exploration commit"></span>
                        <span ng-if="update.type === 'feedback_thread'"
                              class="glyphicon glyphicon-comment"
                              title="Feedback thread"></span>
                      </td>
                      <td>
                        <span ng-if="update.type === 'exploration_commit'">
                          <a ng-href="<[getEditorPageUrl(update.activity_id)]>">
                            <[update.activity_title]>
                          </a>
                        </span>
                        <span ng-if="update.type === 'feedback_thread'">
                          <a ng-href="<[getEditorPageUrl(update.activity_id, '/feedback')]>">
                            <[update.activity_title]>
                          </a>
                        </span>
                      </td>
                      <td><[getLocaleAbbreviatedDatetimeString(update.last_updated_ms)]></td>
                      <td><[update.author_username]></td>
                      <td><[update.subject]></td>
                    </tr>
                  </table>
                </div>
              </div>

              <div class="col-lg-4 col-md-4 col-sm-4">
                <div>
                  <a class="btn btn-success" ng-click="showCreateExplorationModal()">
                    Create New Exploration
                  </a>
                </div>

                <div ng-if="!isEmpty(privateExplorationIds)">
                  <hr>
                  <h4>Private explorations</h4>
                    <ul>
                      <li ng-repeat="expId in privateExplorationIds">
                        <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
                      </li>
                    </ul>
                  </h4>
                </div>

                <div ng-if="!isEmpty(betaExplorationIds)">
                  <hr>
                  <h4>Beta explorations</h4>
                  <ul>
                    <li ng-repeat="expId in betaExplorationIds">
                      <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
                    </li>
                  </ul>
                </div>

                <div ng-if="!isEmpty(releasedExplorationIds)">
                  <hr>
                  <h4>Released explorations</h4>
                  <ul>
                    <li ng-repeat="expId in releasedExplorationIds">
                      <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
                    </li>
                  </ul>
                </div>

                <div ng-if="isEmpty(privateExplorationIds) && isEmpty(betaExplorationIds) && isEmpty(releasedExplorationIds)">
                  <p>
                    <em>You currently aren't managing or collaborating on any explorations.</em>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    {% include 'components/exploration_creation_button.html' %}
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('/dashboard/Dashboard.js') }}
  </script>
{% endblock footer_js %}