{% macro warnings_and_loader() -%}
  <div ng-cloak>
    <div class="oppia-toast-container toast-top-center">
      <div ng-repeat="warning in (alertsService.warnings | limitTo:5) track by $index" class="toast toast-warning oppia-toast">
        <button type="button" class="toast-close-button" ng-click="alertsService.deleteWarning(warning)" role="button">&times;</button>
        <div class="toast-message">
          <[warning.content]>
        </div>
      </div>
    </div>

    <div>
      <div ng-repeat="message in alertsService.messages track by $index">
        <alert-message message-object="message" message-index="$index"></alert-message>
      </div>
    </div>

    <div ng-show="loadingMessage" class="oppia-loading-fullpage">
      <div class="oppia-align-center">
        <span translate="<[loadingMessage]>"></span>
        <span class="oppia-loading-dot-one">.</span>
        <span class="oppia-loading-dot-two">.</span>
        <span class="oppia-loading-dot-three">.</span>
      </div>
    </div>
    <div ng-show="!loadingMessage">
      {% block content %}{% endblock %}
      {% block footer %}{% endblock %}
    </div>
  </div>
{%- endmacro %}

<!DOCTYPE html>
<html ng-app="oppia" ng-controller="Base" itemscope itemtype="http://schema.org/Organization">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <!-- Tiles for Internet Explorer. -->
    <meta name="application-name" content="{{SITE_NAME}}">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-square70x70logo" content="{{DOMAIN_URL}}/images/logo/msapplication-tiny.png">
    <meta name="msapplication-square150x150logo" content="{{DOMAIN_URL}}/images/logo/msapplication-square.png">
    <meta name="msapplication-wide310x150logo" content="{{DOMAIN_URL}}/images/logo/msapplication-wide.png">
    <meta name="msapplication-square310x310logo" content="{{DOMAIN_URL}}/images/logo/msapplication-large.png">

    <!-- The itemprops are for G+ sharing. -->
    <meta itemprop="name" content="{{meta_name}}">
    <meta itemprop="description" content="{{meta_description}}">
    <!-- The og tags are for Facebook sharing. -->
    <meta property="og:title" content="{{meta_name}}">
    <meta property="og:site_name" content="Oppia">
    <meta property="og:url" content="{{FULL_URL}}">
    <meta property="og:description" content="{{meta_description}}">
    <meta property="og:type" content="article">
    <meta property="og:image" content="{{DOMAIN_URL}}/images/logo/288x288_logo_mint.png">

    <link rel="apple-touch-icon" href="/images/logo/favicon.png">

    <!-- The title is bound to the rootScope. The content of the block
    maintitle can be a string or a translation id. If it is a translation it
    will be replaced by its translation when the page is loading. If it is a
    string it would be displayed as is. This is the only way to translate
    the page title because the head of the file is outside the scope of
    any other controller. -->
    <title itemprop="name" translate="{% block maintitle %}Oppia{% endblock maintitle %}"></title>
    {% block base_url %}{% endblock base_url %}

    {% block header_css %}
      {% include 'header_css_libs.html' %}
    {% endblock header_css %}

    <script>
      var GLOBALS = {
        ADDITIONAL_ANGULAR_MODULES: [],
        csrf_token: JSON.parse('{{csrf_token|js_string}}'),
        csrf_token_i18n: JSON.parse('{{csrf_token_i18n|js_string}}'),
        csrf_token_create_exploration: JSON.parse('{{csrf_token_create_exploration|js_string}}'),
        DEV_MODE: JSON.parse('{{DEV_MODE|js_string}}'),
        INVALID_NAME_CHARS: JSON.parse('{{INVALID_NAME_CHARS|js_string}}'),
        ACTIVITY_STATUS_PRIVATE: JSON.parse(
          '{{ACTIVITY_STATUS_PRIVATE|js_string}}'),
        ACTIVITY_STATUS_PUBLIC: JSON.parse(
          '{{ACTIVITY_STATUS_PUBLIC|js_string}}'),
        ACTIVITY_STATUS_PUBLICIZED: JSON.parse(
          '{{ACTIVITY_STATUS_PUBLICIZED|js_string}}'),
        ALL_CATEGORIES: JSON.parse('{{ALL_CATEGORIES|js_string}}'),
        ALL_LANGUAGE_CODES: JSON.parse('{{ALL_LANGUAGE_CODES|js_string}}'),
        DEFAULT_LANGUAGE_CODE: JSON.parse(
          '{{DEFAULT_LANGUAGE_CODE|js_string}}'),
        RTE_COMPONENT_SPECS: JSON.parse('{{RTE_COMPONENT_SPECS|js_string}}'),
        CAN_SEND_ANALYTICS_EVENTS: JSON.parse(
          '{{CAN_SEND_ANALYTICS_EVENTS|js_string}}'),
        /* A list of functions to be called when an exploration is completed. */
        POST_COMPLETION_HOOKS: [],
        SYSTEM_USERNAMES: JSON.parse('{{SYSTEM_USERNAMES|js_string}}'),
        userIsLoggedIn: JSON.parse('{{user_is_logged_in|js_string}}'),
        preferredSiteLanguageCode: JSON.parse('{{preferred_site_language_code|js_string}}'),
        SUPPORTED_SITE_LANGUAGES: JSON.parse('{{SUPPORTED_SITE_LANGUAGES|js_string}}')
      };

      {% if additional_angular_modules %}
        GLOBALS.ADDITIONAL_ANGULAR_MODULES = JSON.parse('{{additional_angular_modules|js_string}}');
      {% endif %}
    </script>

    {% block header_js %}
      {% include 'header_js_libs.html' %}
    {% endblock header_js %}

    {{BEFORE_END_HEAD_TAG_HOOK}}
  </head>

  <body>
    {% if iframed %}
      {{ warnings_and_loader() }}
    {% else %}
      <div class="oppia-base-container" ng-class="{'oppia-sidebar-menu-open': sidebarIsShown, 'oppia-sidebar-menu-closed': !sidebarIsShown}">
        <div class="oppia-content-container">
          <div id="wrapper">
            <div class="oppia-main-body">

              <!-- Top navigation. -->
              <nav class="navbar navbar-default oppia-navbar oppia-prevent-selection" role="navigation">
                <div class="navbar-container">
                  <div class="navbar-header protractor-test-navbar-header pull-left">
                    <a ng-if="windowIsNarrow" ng-click="openSidebar()" class="navbar-brand oppia-navbar-menu oppia-transition-200">
                      <i class="material-icons oppia-navbar-menu-icon">&#xE5D2;</i>
                    </a>
                    <a class="oppia-navbar-brand-name oppia-transition-200" href="/" focus-on="<[LABEL_FOR_CLEARING_FOCUS]>">
                      <img src="/images/logo/288x128_logo_white.png" class="oppia-logo" ng-class="windowIsNarrow ? 'oppia-logo-small' : 'oppia-logo-wide'">
                    </a>
                    <!-- This is needed for the correct image to appear when an exploration is shared using G+. -->
                    <a style="display: none;">
                      <img src="/images/logo/288x128_logo_mint.png" itemprop="image">
                    </a>
                  </div>


                  {% if nav_mode != 'signup' %}
                    <div ng-cloak class="navbar-header pull-right">
                      <ul class="nav oppia-navbar-nav oppia-navbar-profile">
                        {% if username %}
                          <li class="dropdown pull-right">
                            <a class="dropdown-toggle oppia-navbar-dropdown-toggle" data-toggle="dropdown" ng-mouseover="onMouseoverProfilePictureOrDropdown($event)" ng-mouseleave="onMouseoutProfilePictureOrDropdown($event)">
                              <div class="oppia-navbar-profile-picture-container" ng-cloak>
                                {% if profile_picture_data_url %}
                                  <img src="{{profile_picture_data_url}}" class="oppia-navbar-profile-picture img-circle">
                                  <span class="caret" style="margin-top: 10px;"></span>
                                {% else %}
                                  <i class="material-icons md-40" style="margin-top: -1px;">&#xE853;</i>
                                  <span class="caret" style="margin-top: -26px;"></span>
                                {% endif %}

                                <div class="oppia-navbar-dashboard-indicator ng-cloak" ng-if="numUnseenNotifications > 0">
                                  <span class="oppia-navbar-dashboard-indicator-text">
                                    <[numUnseenNotifications]>
                                  </span>
                                </div>

                                <div style="display: none;" class="oppia-user-email">
                                  {{user_email}}
                                </div>

                                {% if is_admin or is_moderator %}
                                  <div class="oppia-navbar-role-indicator">
                                    {% if is_admin %}
                                      <!-- "right: 4px;" is necessary here but not in moderator to prevent 'A' from appearing off-center because 'A' is slightly thinner than 'M' in this font -->
                                      <span class="oppia-navbar-role-text" style="right: 4px;">A</span>
                                    {% elif is_moderator %}
                                      <span class="oppia-navbar-role-text">M</span>
                                    {% endif %}
                                  </div>
                                {% endif %}
                              </div>
                            </a>

                            <ul class="dropdown-menu ng-cloak oppia-navbar-dropdown" role="menu" ng-mouseover="onMouseoverProfilePictureOrDropdown($event)" ng-mouseleave="onMouseoutProfilePictureOrDropdown($event)" ng-show="profileDropdownIsActive">
                              <li>
                                <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="/profile/{{username}}">
                                  <strong>{{username}}</strong>
                                </a>
                              </li>
                              <hr class="oppia-top-right-menu-item-separator">
                              <li>
                                <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="/dashboard">
                                  <span translate="I18N_TOPNAV_DASHBOARD"></span>
                                </a>
                              </li>
                              <li>
                                <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="/notifications_dashboard">
                                  <span translate="I18N_TOPNAV_NOTIFICATIONS"></span>
                                  <span ng-if="numUnseenNotifications > 0">
                                    (<[numUnseenNotifications]>)
                                  </span>
                                </a>
                              </li>
                              <li>
                                <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="/preferences">
                                  <span translate="I18N_TOPNAV_PREFERENCES"></span>
                                </a>
                              </li>

                              {% if is_moderator %}
                                <li>
                                  <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="/moderator" target="_blank">
                                    <span translate="I18N_TOPNAV_MODERATOR_PAGE"></span>
                                  </a>
                                </li>
                              {% endif %}
                              {% if is_super_admin %}
                                <li>
                                  <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="/admin" target="_blank">
                                    <span translate="I18N_TOPNAV_ADMIN_PAGE"></span>
                                  </a>
                                </li>
                              {% endif %}
                              <hr class="oppia-top-right-menu-item-separator">
                              <li>
                                <a ng-click="onMouseoutProfilePictureOrDropdown($event)" href="{{logout_url}}">
                                  <span translate="I18N_TOPNAV_LOGOUT"></span>
                                </a>
                              </li>
                            </ul>
                          </li>
                        {% else %}
                          <li class="dropdown oppia-navbar-clickable-dropdown pull-right">
                            <div class="oppia-navbar-button-container" style="margin-right: 10px;">
                              <button class="btn oppia-navbar-button"
                                      ng-click="onLoginButtonClicked('{{login_url}}')">
                                <span translate="I18N_TOPNAV_SIGN_IN"></span>
                                <span class="caret"></span>
                              </button>
                            </div>
                            <ul class="dropdown-menu oppia-navbar-dropdown" role="menu" style="margin-right: 15px; padding: 0;" ng-mouseover="onMouseoverDropdownMenu($event)" ng-mouseleave="onMouseoutDropdownMenu($event)">
                              <li>
                                <a href style="padding: 0; width: 200px;" ng-click="onLoginButtonClicked('{{login_url}}')">
                                  <img src="/images/signin/Red-signin-Long-base-44dp.png">
                                </a>
                              </li>
                            </ul>
                          </li>
                        {% endif %}
                      </ul>
                      <ul class="nav oppia-navbar-nav">
                        {% if nav_mode != 'create' and nav_mode != 'explore' %}
                          <ul ng-if="windowIsNarrow" class="nav oppia-navbar-tabs-narrow">
                            <create-activity-button></create-activity-button>
                          </ul>
                          <ul ng-if="!windowIsNarrow" class="nav oppia-navbar-tabs">
                            <create-activity-button></create-activity-button>
                            {% if SHOW_CUSTOM_PAGES %}
                              <li class="oppia-clickable-navbar-element pull-right">
                                <a class="oppia-navbar-tab" href="/forum" translate="I18N_TOPNAV_FORUM">
                                </a>
                              </li>
                            {% endif %}
                            <li class="dropdown oppia-navbar-clickable-dropdown pull-right">
                              <a class="oppia-navbar-tab">
                                <span translate="I18N_TOPNAV_ABOUT"></span>
                                <span class="caret"></span>
                              </a>
                              <ul class="dropdown-menu oppia-navbar-dropdown" ng-mouseover="onMouseoverDropdownMenu($event)" ng-mouseleave="onMouseoutDropdownMenu($event)">
                                <li><a href="/about" translate="I18N_TOPNAV_ABOUT_OPPIA"></a></li>
                                <li><a href="/teach" translate="I18N_TOPNAV_TEACH_WITH_OPPIA"></a></li>
                                {% for additional_link in SIDEBAR_MENU_ADDITIONAL_LINKS %}
                                  <li><a href="{{additional_link['link']}}" target="_blank">{{additional_link['name']}}</a></li>
                                {% endfor %}
                                {% if SHOW_CUSTOM_PAGES %}
                                  <li><a href="/terms" translate="I18N_TOPNAV_TERMS_OF_SERVICE"></a></li>
                                  <li><a href="/privacy" translate="I18N_TOPNAV_PRIVACY_POLICY"></a></li>
                                {% endif %}
                              </ul>
                            </li>
                            <li class="oppia-clickable-navbar-element pull-right">
                              <a class="oppia-navbar-tab" href="/library" translate="I18N_TOPNAV_LIBRARY"></a>
                            </li>
                          </ul>
                        {% endif %}
                      </ul>
                    </div>
                  {% endif %}

                  <div class="collapse navbar-collapse ng-cloak">
                    {% block navbar_breadcrumb %}
                    {% endblock navbar_breadcrumb %}

                    {% block local_top_nav_options %}
                    {% endblock %}
                  </div>
                </div>
              </nav>

              <div class="oppia-top-of-page-padding">
              </div>

              {{ warnings_and_loader() }}
            </div>

            <noscript>
              <div class="oppia-page-cards-container">
                <div class="md-default-theme oppia-page-card oppia-long-text">
                  <h2>
                    <span translate="I18N_SPLASH_JAVASCRIPT_ERROR_TITLE"></span>
                    <i class="material-icons">&#xE811;</i>
                  </h2>
                  <p translate="I18N_SPLASH_JAVASCRIPT_ERROR_DESCRIPTION"
                     translate-values="{hrefUrl: 'http://www.enable-javascript.com/'}"></p>
                  <p translate="I18N_SPLASH_JAVASCRIPT_ERROR_THANKS"></p>
                </div>
              </div>
            </noscript>


            {% include 'side_nav.html' %}

          </div>
        </div>
      </div>

      {% if DEV_MODE %}
        <div class="oppia-dev-mode">
          Dev Mode
        </div>
      {% endif %}

      {% if SITE_FEEDBACK_FORM_URL %}
        <a href="{{SITE_FEEDBACK_FORM_URL}}" target="_blank"
           class="oppia-site-feedback oppia-transition-200">
          <i class="material-icons md-18" style="vertical-align: middle;">&#xE87F;</i>
            <span translate="I18N_SPLASH_SITE_FEEDBACK"></span>
          </i>
        </a>
      {% endif %}
    {% endif %}

    {% include 'directives.html' %}
    {% include 'forms/form_builder_templates.html' %}
    {% include 'footer_js_libs.html' %}
    {% include 'components/collection_summary_tile_directive.html' %}
    {% include 'components/exploration_summary_tile_directive.html' %}
    {% include 'components/rating_display.html' %}
    {% include 'components/create_activity_button_directive.html' %}
    {% include 'components/activity_tiles_infinity_grid_directive.html' %}
    {% include 'components/loading_dots_directive.html' %}

    <script>
      {{ include_js_file('app.js') }}
      {{ include_js_file('base.js') }}
      {{ include_js_file('directives.js') }}
      {{ include_js_file('filters.js') }}
      {{ include_js_file('i18n.js') }}

      {{ include_js_file('forms/formBuilder.js') }}

      {{ include_js_file('services/alertsService.js') }}
      {{ include_js_file('services/explorationContextService.js') }}
      {{ include_js_file('services/autoplayedVideosService.js') }}
      {{ include_js_file('services/searchService.js') }}

      {{ include_js_file('components/ActivityTilesInfinityGridDirective.js') }}
      {{ include_js_file('components/AlertMessageDirective.js') }}
      {{ include_js_file('components/CollectionCreationService.js') }}
      {{ include_js_file('components/CollectionSummaryTileDirective.js') }}
      {{ include_js_file('components/CreateActivityButtonDirective.js') }}
      {{ include_js_file('components/ExplorationCreationService.js') }}
      {{ include_js_file('components/ExplorationSummaryTileDirective.js') }}
      {{ include_js_file('components/LoadingDotsDirective.js') }}
      {{ include_js_file('components/ObjectEditorDirective.js') }}
      {{ include_js_file('components/RatingComputationService.js')}}
      {{ include_js_file('components/RatingDisplayDirective.js')}}
      {{ include_js_file('components/Select2DropdownDirective.js') }}

      {{ include_js_file('domain/utilities/UrlInterpolationService.js') }}

      {{ include_js_file('expressions/expressionSyntaxTree.js') }}
      {{ include_js_file('expressions/evaluator.js') }}
      {{ include_js_file('expressions/parser.js') }}

      {{ include_js_file('domain/utilities/UrlInterpolationService.js') }}

      {{ OBJECT_EDITORS_JS }}
    </script>

    {% block footer_js %}
    {% endblock footer_js %}

    {{BEFORE_END_BODY_TAG_HOOK}}
  </body>
</html>
