{% extends "base.html" %}

{% block subtitle %}
  Gallery
{% endblock subtitle %}

{% block content %}

  <div class="container" ng-controller="Gallery">
    <div class="oppia-main-content">
      <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
          <div class="hidden-xs">
            {% if not user_email %}
              <!-- User must log in. -->
              <span class="pull-right">
                <a class="btn btn-success btn-lg protractor-test-create-exploration" href="{{gallery_redirect_url}}">
                  Create New Exploration
                </a>
              </span>
            {% elif not username %}
              <!-- User must register. -->
              <span class="pull-right">
                <a class="btn btn-success btn-lg protractor-test-create-exploration" href="/editor_prerequisites?return_url=gallery">
                  Create New Exploration
                </a>
              </span>
            {% else %}
              <span class="pull-right">
                <a class="btn btn-success btn-lg protractor-test-create-exploration"
                   ng-click="showCreateExplorationModal(getCategoryList())">
                  Create New Exploration
                </a>
                {% if allow_yaml_file_upload %}
                  <a class="btn btn-default btn-lg"
                      ng-click="showUploadExplorationModal(getCategoryList())">
                    Upload Existing Exploration
                  </a>
                {% endif %}
              </span>
            {% endif %}
          </div>

          <h3 class="oppia-page-title">
            Gallery
          </h3>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-1 oppia-gallery-sidebar oppia-light-border-right" ng-class="{'oppia-gallery-sidebar-active': gallerySidebarIsActive}">
          <div class="visible-xs">
            <div ng-if="!gallerySidebarIsActive">
              <button ng-click="toggleGallerySidebar()" class="pull-right">
                <span class="glyphicon glyphicon-chevron-right">
                </span>
              </button>
            </div>

            <div ng-if="gallerySidebarIsActive">
              <button ng-click="toggleGallerySidebar()" class="pull-right">
                <span class="glyphicon glyphicon-chevron-left">
                </span>
              </button>
            </div>
          </div>

          <div class="oppia-gallery-menu" ng-if="gallerySidebarIsActive || screenIsLarge">
            <h4><strong>Status</strong></h4>
            <ul class="nav nav-pills nav-stacked protractor-test-gallery-status">
              <li class="checkbox">
                <label>
                  <input type="checkbox" ng-model="selectedStatuses.publicized">
                  Released
                </label>
              </li>
              <li class="checkbox">
                <label>
                  <input type="checkbox" ng-model="selectedStatuses.public">
                  Beta
                </label>
              </li>
              {% if username %}
                <li class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="selectedStatuses.private">
                    Private
                  </label>
                </li>
              {% endif %}
            </ul>

            <h4><strong>Categories</strong></h4>
            <checkbox-group all-categories-label="All categories" model="selectedCategories" class="protractor-test-gallery-category">
            </checkbox-group>

            <h4><strong>Languages</strong></h4>
            <checkbox-group all-categories-label="All languages" model="selectedLanguages" class="protractor-test-gallery-language">
            </checkbox-group>
          </div>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-10 oppia-gallery-main" ng-class="{'oppia-gallery-sidebar-active': gallerySidebarIsActive}">
          <div class="tab-content oppia-gallery-tiles-container">
            <div ng-if="(allExplorationsInOrder | selectedCategoriesFilter:selectedCategories:'category' | selectedCategoriesFilter:selectedLanguages:'language' | selectedCategoriesFilter:selectedStatuses:'status').length === 0">
              <div>
                <em>No explorations selected.</em>
              </div>
              <br>
              <div>
                <em ng-if="selectedStatuses.publicized && !selectedStatuses.public">
                  However, there may be beta explorations in these categories available for playtesting. Click the 'Beta' checkbox on the left to view them!
                </em>
              </div>
            </div>

            <div ng-repeat="exploration in allExplorationsInOrder | selectedCategoriesFilter:selectedCategories:'category' | selectedCategoriesFilter:selectedLanguages:'language' | selectedCategoriesFilter:selectedStatuses:'status' track by $index" class="oppia-gallery-tile">
              <div style="position: relative;">
                <a class="btn btn-default btn-sm hidden-xs pull-right oppia-gallery-edit-btn" ng-if="exploration.is_editable" ng-href="/create/<[exploration.id]>" style="position: absolute; right: 5px;">
                  <span class="glyphicon glyphicon-pencil protractor-test-edit-exploration" title="Edit this exploration"></span>
                  Edit
                </a>
                {% if is_moderator %}
                  <a class="btn btn-default btn-sm hidden-xs pull-right oppia-gallery-edit-btn" ng-if="!exploration.is_editable && currentUserIsModerator" ng-href="/create/<[exploration.id]>" style="position: absolute; right: 5px;">
                    <span class="glyphicon glyphicon-pencil protractor-test-edit-exploration" title="Edit (as moderator)"></span>
                    Edit (as moderator)
                  </a>
                {% endif %}

                <a ng-href="/explore/<[exploration.id]>" style="margin-bottom: 2px; text-decoration: none;">
                  <div class="oppia-gallery-tile-top">
                    <div class="oppia-gallery-tile-description">
                      <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                    </div>
                  </div>

                  <div class="oppia-gallery-tile-middle" style="color: black;">
                    <span ng-if="exploration.objective" class="protractor-test-exploration-objective"><[getFormattedObjective(exploration.objective)]></span>
                    <span ng-if="!exploration.objective"><em>No objective specified.</em></span>
                  </div>

                  <div class="oppia-gallery-tile-bottom">
                    <span class="pull-right">
                      <span class="label label-info">
                        <[exploration.category]>
                      </span>
                      <span ng-if="exploration.status === 'public'" class="label label-info" style="opacity: 0.5">
                        Beta
                      </span>
                      <span ng-if="exploration.status === 'private'" class="label label-info" style="opacity: 0.5">
                        Private
                      </span>
                    </span>

                    <span class="oppia-gallery-tile-last-updated" ng-if="!gallerySidebarIsActive || screenIsLarge">
                      Last update: <[getLocaleAbbreviatedDatetimeString(exploration.last_updated)]>
                    </span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="checkboxGroup/master">
    <ul class="nav nav-pills nav-stacked">
      <li class="checkbox">
        <label>
          <input type="checkbox" ng-model="allCategoriesSelected" ng-change="onChangeSelection(true)">
          <strong><[allCategoriesLabel]></strong>
        </label>
      </li>
      <li ng-repeat="(category, status) in model" class="checkbox">
        <label>
          <input type="checkbox" ng-model="individualCategoryCheckboxStatuses[category]" ng-change="onChangeSelection(false)">
          <[category]>
        </label>
      </li>
    </ul>
  </script>

  {% include 'components/exploration_creation_button.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('galleries/Gallery.js') }}
  </script>
  {{ noninteractive_widget_html }}
{% endblock footer_js %}