<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
  <head>
    <title>{% block title %}{{ title }} - {{ SITE_LONG_NAME }}{% endblock %}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    {% if misc_config.meta_keywords %}
      <meta name="keywords" content="{{ misc_config.meta_keywords }}">
    {% endif %}
    {% if meta_description %}
      <meta name="description" content="{{ meta_description }}">
    {% endif %}
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicons-->
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#FFBB33">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    {# Chrome 39 for Android colour #}
    <meta name="theme-color" content="#FFBB33">
    {% if og_image %}
      <meta property="og:image" content="{{ request.build_absolute_uri(og_image) }}">
    {% endif %}
    {% block og_title %}{% endblock %}
    <meta property="og:site_name" content="{{ SITE_LONG_NAME }}">
    <meta property="og:url"
      content="{{ DMOJ_SCHEME }}://{{ DMOJ_CANONICAL|default(site.domain) }}{{ request.get_full_path() }}">
    {% if meta_description %}
      <meta property="og:description" content="{{ meta_description }}">
    {% endif %}
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script>window.bad_browser = true</script>
    <![endif]-->
    {% block meta %}{% endblock %}
    {% if not INLINE_FONTAWESOME %}
      <link rel="stylesheet" href="{{ FONTAWESOME_CSS }}">
    {% endif %}
    <link rel="stylesheet" type="text/css" href="{{ static('markdown.css') }}">
    {% compress css %}
      <link rel="stylesheet" href="{{ static('style.css') }}">
      {% if INLINE_FONTAWESOME %}
        <link rel="stylesheet" href="{{ static('fontawesome/css/all.min.css') }}">
      {% endif %}
      <link rel="stylesheet" type="text/css" href="{{ static('libs/featherlight/featherlight.min.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ static('libs/clipboard/tooltip.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ static('libs/select2/select2.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ static('icofont/icofont.min.css') }}">
    {% endcompress %}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Noto+Sans&display=swap" rel="stylesheet">
    <link rel="canonical"
      href="{{ DMOJ_SCHEME }}://{{ DMOJ_CANONICAL|default(site.domain) }}{{ request.get_full_path() }}">
    {% if request.user.is_impersonate %}
      <style>
        #nav-container {
          background: #893e89 !important;
        }
      </style>
    {% endif %}

    {% if use_darkmode %}
      <link rel="stylesheet" href="{{ static('darkmode.css') }}">
      <link rel="stylesheet" href="{{ static('darkmode-svg.css') }}">
    {% endif %}

    <noscript>
      <style>
        #content {
          margin: 80px auto auto;
        }

        #navigation {
          top: 27px;
        }
      </style>
    </noscript>
    {% if request.profile.css_background %}
      <style>
        @media(min-width: 800px) {
          #page-container {
            background: {{request.profile.css_background|safe}};
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
          }
        }
      </style>
    {% endif %}
    {% if not INLINE_JQUERY %}
      <script src="{{ JQUERY_JS }}"></script>
    {% else %}
      <script src="{{ static('libs/jquery-3.4.1.min.js') }}"></script>
    {% endif %}
  </head>
  <body>
    <svg width="0" height="0" style="display: block">
      <defs>
        <clipPath id="rating-clip"><circle cx="8" cy="8" r="7"/></clipPath>
      </defs>
    </svg>
    <nav id="navigation" class="unselectable">
      <div id="nav-container" style="display: flex">
        <span id="navicon"><i class="fa fa-bars"></i></span>
        <ul id="nav-list">
          <li class="home-nav-element"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li>
          <li class="home-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li>
          {% for node in mptt_tree(nav_bar) recursive %}
            <li>
              <a href="{{ node.path }}" id="fa-icon-links" class="normal-text nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}">
                <span class="nav-fa-icon{{'-active' if node.key in nav_tab else''}}">
                  {% if node.key == "problems" %} <i class="fa fa-puzzle-piece"></i> {% endif %}
                  {% if node.key == "submit" %} <i class="fa fa-code"></i> {% endif %}
                  {% if node.key == "user" %} <i class="fa fa-user"></i> {% endif %}
                  {% if node.key == "contest" %} <i class="fa fa-ranking-star"></i> {% endif %}
                  {% if node.key == "group" %} <i class="fa fa-building-columns"></i> {% endif %}
                  {% if node.key == "about" %} <i class="fa fa-at"></i> {% endif %}
                </span>
                {{ user_trans(node.label) }}
                {% if not node.is_leaf_node %}
                  <div href="javascript:void(0)" class="nav-expand">></div>
                {% endif %}
              </a>
              {% with children=node.get_children() %}
                {% if children %}<ul>{{ loop(children) }}</ul>{% endif %}
              {% endwith %}
            </li>
          {% endfor %}
        </ul>

        <div style="display: flex; font-size: larger; align-items: center; height: 100%; gap: 1em;">
          {% if request.user.is_authenticated %}
            <span title="{{_('Chat')}}">
              <a id="chat-icon" href="{{ url('chat', '') }}" class="fab fa-weixin navbar-icon" aria-hidden="true" style="font-size: 22.5px;">
                {% set unread_chat = request.profile.count_unread_chat_boxes %}
                {% if unread_chat %}
                  <sub class="unread_boxes">{{unread_chat}}</sub>
                {% endif %}
              </a>
            </span>

            {% set unseen_cnt = request.profile.count_unseen_notifications %}
            <span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
              <a href="{{ url('notification') }}" class="far fa-bell navbar-icon" id="notification" aria-hidden="true" style="font-size: 22.5px;">
                {% if unseen_cnt > 0 %}
                  <sub class="unread_boxes">{{unseen_cnt}}</sub>
                {% endif %}
              </a>
            </span>
          {% endif %}
          <span title="{{_('Language')}}">
            <div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
              {% if LANGUAGE_CODE == "vi" %}
                <h4 class="black nav-right-text">Tiếng Việt</h4>
              {% endif %}
              {% if LANGUAGE_CODE == "en" %}
                <h4 class="black nav-right-text">English</h4>
              {% endif %}
            </div>
            <div id="lang-dropdown" class="dropdown" role="tooltip">
              {% for language in language_info_list(LANGUAGES) %}
                <div value="{{ language.code }}"
                  class="dropdown-item lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
                  {{ language.name_local }}
                </div>
              {% endfor %}
              <div class="popper-arrow" data-popper-arrow></div>
            </div>
          </span>
          <span title="{{_('Dark Mode')}}">
            <a class="far fa-moon navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1" style="font-size: 22.5px;"></a>
          </span>
          {% if request.user.is_authenticated %}
            <span id="user-links">
              <img class="user-img" src="{{ gravatar(request.profile, 32) }}" height="24" width="24">
              <i class="fa fa-angle-down" style="font-size: 18px; padding-top: 8px;"></i>
            </span>
            <div class="dropdown" id="userlink_dropdown" role="tooptip">
              <div class="popper-arrow" data-popper-arrow></div>
              <a href="{{ url('user_page') }}">
                <div class="dropdown-item"><i class="fa fa-user"></i> {{ _('Profile') }}</div>
              </a>
              {% if request.user.is_staff or request.user.is_superuser %}
                <a href="{{ url('admin:index') }}">
                  <div class="dropdown-item"><i class="fa fa-user-shield"></i> {{ _('Admin') }}</div>
                </a>
              {% endif %}
              {% if request.user.is_superuser %}
                <a href="{{ url('internal_problem') }}">
                  <div class="dropdown-item"><i class="fa fa-circle-info"></i> {{ _('Internal') }}</div>
                </a>
                <a href="{{ url('site_stats') }}">
                  <div class="dropdown-item"><i class="fa fa-chart-pie"></i> {{ _('Stats') }}</div>
                </a>
              {% endif %}
              <a href="{{ url('user_bookmark') }}">
                <div class="dropdown-item"><i class="fa fa-bookmark"></i> {{ _('Bookmarks') }}</div>
              </a>
              <a href="{{ url('user_edit_profile') }}">
                <div class="dropdown-item"><i class="fa fa-gear"></i> {{ _('Settings') }}</div>
              </a>
              {% if request.user.is_impersonate %}
                <a href="{{ url('impersonate-stop') }}" data-force_new_page="1">
                  <div class="dropdown-item"><i class="fa fa-eye"></i> {{_('Stop impersonating')}}</div>
                </a>
              {% else %}
                <a href="#" id="logout" class="red">
                  <div class="dropdown-item"><i class="fa fa-right-from-bracket"></i>
                    {{ _('Log out') }}
                    <form id="logout-form" action="{{ url('auth_logout') }}" method="POST">
                      {% csrf_token %}
                    </form>
                  </div>
                </a>
              {% endif %}
            </div>
          {% else %}
            <span class="anon">
              <a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><h4 class="nav-right-text">{{ _('Log in') }}</h4></a>
              <a href="{{ url('registration_register') }}"><h4 class="nav-right-text">{{ _('Sign up') }}</h4></a>
            </span>
          {% endif %}
        </div>
      </div>
      <div id="nav-shadow"></div>
    </nav>
    <div id="loading-bar"></div>
    {% if request.in_contest %}
      <div id="contest-info">
        <div id="contest-info-main">
          <a href="{{ url('contest_view', request.participation.contest.key) }}" style="vertical-align: middle; display: inline">
            {{ request.participation.contest.name }} -
            {% if request.participation.spectate %}
              {{ _('spectating') }}
            {% elif request.participation.end_time %}
              <div id="contest-time-remaining" data-secs="{{request.participation.end_time}}">
                {{ request.participation.time_remaining|timedelta("localized") }}
              </div>
            {% else %}
              {{ _('virtual') }}
            {% endif %}
          </a>
        </div>
        <div id="contest-info-toggle" class="{{'contest-info-toggle-mode-on' if request.contest_mode else 'contest-info-toggle-mode-off'}}">
          {% if request.contest_mode %}
            <i class="fa fa-toggle-on white"></i> {{_('In contest')}}
          {% else %}
            <i class="fa fa-toggle-off white"></i> {{_('Out contest')}}
          {% endif %}
        </div>
      </div>
    {% endif %}
    <div id="page-container">
      <div id="media">
        {% block media %}{% endblock %}
      </div>
      <noscript>
        <div id="noscript">{{ _('This site works best with JavaScript enabled.') }}</div>
      </noscript>
      <main id="content" class="{{'wrapper' if layout != 'no_wrapper'}}">
        {% block title_row %}
          <h2 class="title-row">
            {% block content_title %}
              {% if content_title %}{{ content_title }}{% else %}{{ title }}{% endif %}
            {% endblock %}
          </h2>
        {% endblock %}
        {% block header %}{% endblock %}
        {% block title_ruler %}
          <hr>
        {% endblock %}
        <div id="content-body">{% block body %}{% endblock %}</div>
      </main>

      {% if i18n_config.announcement %}
        <div id="announcement">{{ i18n_config.announcement|safe }}</div>
      {% endif %}

      {% compress js %}
        <script>{{ inlinei18n(LANGUAGE_CODE)|safe }}</script>
        <script src="{{ static('libs/popper.min.js') }}"></script>
        <script src="{{ static('libs/jquery-cookie.js') }}"></script>
        <script src="{{ static('libs/jquery-taphold.js') }}"></script>
        <script src="{{ static('libs/jquery.unveil.js') }}"></script>
        <script src="{{ static('libs/moment.js') }}"></script>
        <script src="{{ static('libs/select2/select2.js') }}"></script>
        <script src="{{ static('libs/clipboard/clipboard.js') }}"></script>
        {% include "extra_js.html" %}
        <script src="{{ static('common.js') }}"></script>
        <script src="{{ static('libs/clipboard/tooltip.js') }}"></script>
        <script type="text/javascript" src="{{ static('libs/featherlight/featherlight.min.js') }}"></script>
        <script>
          moment.locale('{{ LANGUAGE_CODE }}');
          $(function () {
            $('img.unveil').unveil(200);
          });
        </script>
      {% endcompress %}
      <div id="js_media">
        {% block js_media %}{% endblock %}
      </div>
      {% if request.in_contest %}
        <script>$(function () {
          if ($("#contest-time-remaining").length) {
            count_down($("#contest-time-remaining"));
          }

          var selected = null,
          x_pos = 0, y_pos = 0,
          x_elem = 0, y_elem = 0;

          $('#contest-info').mousedown(function () {
            selected = $(this);
            x_elem = x_pos - selected.offset().left;
            y_elem = y_pos - (selected.offset().top - $(window).scrollTop());
            return false;
          });

          if (localStorage.getItem("contest_timer_position")) {
            data = localStorage.getItem("contest_timer_position").split(":");
            $("#contest-info").css({
              left: data[0],
              top: data[1]
            });
          }

          $("#contest-info").show();

          $("#contest-info-toggle").on('click', function() {
            $.post("{{url('contest_mode_ajax')}}", function() {
              window.location.reload();
            })
          });

          $(document).mousemove(function (e) {
            x_pos = e.screenX;
            y_pos = e.screenY;

            if (selected !== null) {
              left_px = (x_pos - x_elem);
              top_px = (y_pos - y_elem);
              left_px = Math.max(Math.min(left_px, window.innerWidth), 0) / window.innerWidth * 100 + '%';
              top_px = Math.max(Math.min(top_px, window.innerHeight), 0) / window.innerHeight * 100 + '%';
              localStorage.setItem("contest_timer_position", left_px + ":" + top_px);

              selected.css({
                left: left_px,
                top: top_px
              });
            }
          });

          $(document).mouseup(function () {
            selected = null;
          })
        });
        </script>
      {% endif %}

      {% if request.user.is_authenticated %}
        <script>
          window.user = {
            email: '{{ request.user.email|escapejs }}',
            id: '{{ request.user.id|escapejs }}',
            name: '{{ request.user.username|escapejs }}'
          };
        </script>
      {% else %}
        <script>window.user = {};</script>
      {% endif %}

      {% if misc_config.analytics %}
        {{ misc_config.analytics|safe }}
      {% endif %}

      <div id="bodyend">
        {% block bodyend %}{% endblock %}
      </div>
      <script src="{{ static('katex_config.js') }}"></script>
      {% include "katex-load.html" %}
      {% block footer %}
        <footer>
          <span id="footer-content">
            <br>
            <a class="background-footer" target="_blank" href="https://dmoj.ca">proudly powered by <b>DMOJ</b></a>|<a target="_blank" href="https://github.com/LQDJudge/online-judge"> developed by LQDJudge team</a>
            {% if i18n_config.footer %}
              {{ i18n_config.footer|safe }} |
            {% endif %}
            <form action="{{ url('set_language') }}" method="post" style="display: inline" id="form-lang">
              {% csrf_token %}
              <input name="next" type="hidden" value="{{ request.get_full_path() }}">
              <select name="language" onchange="form.submit()" style="height: 1.5em">
                {% for language in language_info_list(LANGUAGES) %}
                  <option value="{{ language.code }}" {% if language.code == LANGUAGE_CODE %}selected{% endif %}>
                    {{ language.name_local }} ({{ language.code }})
                  </option>
                {% endfor %}
              </select>
            </form>
          </span>
        </footer>
      {% endblock %}
    </div>
  </body>
</html>