@shzlx/ui-default 4.58.2

package/templates/components/comments_solution.html

@@ -0,0 +1,171 @@
+{% import "components/user.html" as user with context %}
+{% macro reply(mode_create, udoc, doc = {}, rdoc = {}) %}
+
+{% endmacro %}
+
+{% macro render(
+  view, docs, udict,
+  comment_ref,
+  reply_ref,
+  comment_post_perm,
+  comment_edit_perm,
+  comment_edit_self_perm,
+  comment_delete_perm,
+  comment_delete_self_perm,
+  reply_post_perm,
+  reply_edit_perm,
+  reply_edit_self_perm,
+  reply_delete_perm,
+  reply_delete_self_perm,
+  comment_placeholder = 'Write Your Comment',
+  comment_post_op = 'reply',
+  comment_edit_op = 'edit_reply',
+  comment_post_text = 'Comment',
+  comment_edit_text = 'Update',
+  reply_post_op = 'tail_reply',
+  reply_post_text = 'Reply',
+  reply_edit_op = 'edit_tail_reply',
+  reply_edit_text = 'Update',
+  comment_delete_op = 'delete_reply',
+  reply_delete_op = 'delete_tail_reply'
+) %}
+<ul class="dczcomments__list view--solution">
+{% if handler.user.hasPerm(comment_post_perm) %}
+<li class="dczcomments__item">
+  <div class="media">
+    <div class="media__left top">
+      <div class="vote vote--discussion">
+        <div class="vote-number">0</div>
+      </div>
+    </div>
+    <div class="media__body top">
+      <div class="clearfix">
+        <div class="supplementary dczcomments__supplementary">
+          {{ user.render_inline(handler.user) }}
+        </div>
+      </div>
+      <div class="hasjs--hide">
+        <form method="post" class="dczcomments__box" name="dczcomments__box__form" data-hotkey="ctrl+enter:submit,esc:vjCommentBoxCancel">
+          <div>
+            <textarea name="content" class="textbox" data-markdown required></textarea>
+          </div>
+          <div>
+            <input type="submit" class="rounded primary button dczcomments__box__submit" value="{{ _(comment_post_text) }} (Ctrl+Enter)" data-value-reply="{{ _(reply_post_text) }} (Ctrl+Enter)" data-value-comment="{{ _(comment_post_text) }} (Ctrl+Enter)" data-value-comment-update="{{ _(comment_edit_text) }} (Ctrl+Enter)" data-value-reply-update="{{ _(reply_edit_text) }} (Ctrl+Enter)">
+            <input type="button" class="rounded button nojs--hide" name="dczcomments__box__cancel" value="{{ _('Cancel') }} (Esc)">
+          </div>
+          <input type="hidden" name="operation" value="{{ comment_post_op }}">
+        </form>
+      </div>
+      <div class="nojs--hide">
+        <textarea class="textbox" name="dczcomments__dummy-box" readonly data-form="{{ {operation: comment_post_op}|json }}" placeholder="{{ _(comment_placeholder) }}"></textarea>
+      </div>
+      <div class="commentbox-placeholder"></div>
+      <ul style="display:none">
+        <li class="dczcomments__reply commentbox-container">
+          <div class="media">
+            <div class="media__body top">
+              <div class="clearfix">
+                <div class="supplementary dczcomments__supplementary">
+                  {{ user.render_inline(handler.user, badge=false) }}
+                </div>
+              </div>
+              <div class="commentbox-placeholder"></div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</li>
+{% endif %}
+{%- for doc in docs -%}
+  {% set udoc = udict[doc.owner] %}
+  <li class="dczcomments__item">
+  <div class="media">
+    <div class="media__left top">
+      <div class="vote vote--discussion">
+      {% if handler.user.hasPerm(perm.PERM_VOTE_PROBLEM_SOLUTION) %}
+        <div class="vote-number rotator--enabled">{{ doc.vote }}</div>
+        <form method="post" class="vote-op clearfix">
+          <input type="hidden" name="psid" value="{{ doc._id }}">
+          <button type="submit" name="operation" value="upvote" class="vote-button upvote{% if pssdict[doc._id].vote == 1 %} active{% endif %}" data-tooltip="{{ _('Upvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Upvote') }}"><span class="icon icon-vote--up"></span></button>
+          <button type="submit" name="operation" value="downvote" class="vote-button downvote{% if pssdict[doc._id].vote == -1 %} active{% endif %}" data-tooltip="{{ _('Downvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Downvote') }}"><span class="icon icon-vote--down"></span></button>
+        </form>
+      {% else %}
+        <div class="vote-number">{{ doc.vote }}</div>
+      {% endif %}
+      </div>
+    </div>
+    <div class="media__body top">
+      <div class="clearfix">
+        <div class="supplementary dczcomments__supplementary">
+          {{ user.render_inline(udoc) }} @ {{ datetimeSpan(doc._id)|safe }}
+        </div>
+        <div class="dczcomments__operations nojs--hide">
+        {% if pdoc %}
+          <a href="javascript:;" data-tooltip="{{ _('Copy Link') }}" data-copylink="{{ url('problem_solution_detail', pid=pdoc.pid|default(pdoc.docId), sid=doc._id) }}">
+            <span class="icon icon-link"></span>
+          </a>
+        {% endif %}
+        {% if handler.user.hasPerm(reply_post_perm) %}
+          <a href="javascript:;" data-tooltip="{{ _('Reply') }}" data-op="reply" data-type="comment" 
+            data-form="{{ {operation: reply_post_op, psid: doc._id}|json }}"
+          ><span class="icon icon-reply"></span></a>
+        {% endif %}
+        {% if (handler.user.hasPerm(comment_edit_self_perm) and handler.user.own(doc)) or handler.user.hasPerm(comment_edit_perm) %}
+          <a href="javascript:;" data-tooltip="{{ _('Edit') }}" data-op="edit" data-type="comment"
+            data-form="{{ {operation: comment_edit_op, psid: doc._id}|json }}"
+          ><span class="icon icon-edit"></span></a>
+        {% endif %}
+        {% if (handler.user.hasPerm(comment_delete_self_perm) and handler.user.own(doc)) or handler.user.hasPerm(comment_delete_perm) %}
+          <a href="javascript:;" data-tooltip="{{ _('Delete') }}" data-op="delete" data-type="comment"
+            data-form="{{ {operation: comment_delete_op, psid: doc._id}|json }}"
+          ><span class="icon icon-delete"></span></a>
+        {% endif %}
+        </div>
+      </div>
+      <div class="typo richmedia collapsible-content" data-emoji-enabled data-raw-url="{{ url('problem_solution_raw', pid=doc.parentId, psid=doc._id) }}">
+        {{ doc['content']|markdown|safe }}
+      </div>
+      <div class="commentbox-edit-target"></div>
+      <ul class="dczcomments__replies commentbox-reply-target">
+      {%- for rdoc in doc['reply'] -%}
+        {% set udoc = udict[rdoc['owner']] %}
+        <li class="dczcomments__reply{% if mode_create %} commentbox-container{% endif %}">
+          <div class="media">
+            <div class="media__body top">
+              <div class="clearfix">
+                <div class="supplementary dczcomments__supplementary">
+                  {{ user.render_inline(udoc, badge=false) }} @ {{ datetimeSpan(rdoc['_id'])|safe }}
+                </div>
+                <div class="dczcomments__operations nojs--hide">
+                {% if handler.user.hasPerm(reply_post_perm) %}
+                  <a href="javascript:;" data-tooltip="{{ _('Reply') }}" data-op="reply" data-type="reply"><span class="icon icon-reply"></span></a>
+                {% endif %}
+                {% if (handler.user.hasPerm(reply_edit_self_perm) and handler.user.own(rdoc)) or handler.user.hasPerm(reply_edit_perm) %}
+                  <a href="javascript:;" data-tooltip="{{ _('Edit') }}" data-op="edit" data-type="reply"
+                    data-form="{{ {operation: reply_edit_op, psid: doc._id, psrid: rdoc._id}|json }}"
+                  ><span class="icon icon-edit"></span></a>
+                {% endif %}
+                {% if (handler.user.hasPerm(reply_delete_self_perm) and handler.user.own(rdoc)) or handler.user.hasPerm(reply_delete_perm) %}
+                  <a href="javascript:;" data-tooltip="{{ _('Delete') }}" data-op="delete" data-type="reply"
+                    data-form="{{ {operation: reply_delete_op, psid: doc._id, psrid: rdoc._id}|json }}"
+                  ><span class="icon icon-delete"></span></a>
+                {% endif %}
+                </div>
+              </div>
+              <div class="typo richmedia collapsible-content" data-emoji-enabled data-raw-url="{{ url('problem_solution_reply_raw', pid=doc.parentId, psid=doc._id, psrid=rdoc._id) }}">
+                {{ rdoc['content']|markdown|safe }}
+              </div>
+              <div class="commentbox-edit-target"></div>
+              </div>
+          </div>
+        </li>
+      {%- endfor -%}
+      </ul>
+    </div>
+  </div>
+</li>
+{%- endfor -%}
+</ul>
+{% endmacro %}

package/templates/components/contest.html

@@ -0,0 +1,12 @@
+{% import "components/user.html" as user with context %}
+{% macro render_time(tdoc_time) %}
+{{ datetimeSpan(tdoc_time, false, 'YYYY-M-D H:mm')|safe }}
+{% endmacro %}
+
+{% macro render_duration(tdoc) %}
+{{ tdoc.duration|round(1) if tdoc.duration else ((tdoc.endAt.getTime() - tdoc.beginAt.getTime()) /1000 / 3600)|round(1) }}
+{% endmacro %}
+
+{% macro render_clarification_subject(tdoc, pdict, subject) %}
+{% if subject == 0 %}{{ _('General Issue') }}{% elif subject == -1 %}{{ _('Technical Issue') }}{% else %}{{ utils.getAlphabeticId(tdoc.pids.indexOf(subject)) }}. {{ pdict[subject].title }}{% endif %}
+{% endmacro %}

package/templates/components/form.html

@@ -0,0 +1,214 @@
+{% macro form_begin(args) %}
+{% set label = args.label %}
+{% set columns = args.columns %}
+{% set last_column = args.last_column|default(true) %}
+{% set required = args.required or false %}
+{% set hotkeys = args.hotkeys or none %}
+{% set row = args.row|default(true) %}
+{% set no_label = args.no_label or false %}
+{% set label_wrap = args.label_wrap|default(true) %}
+{% if row %}
+<div class="row">
+{% endif %}
+  <div
+    class="{% if columns %}medium-{{ columns }} {% endif %}columns form__item{% if last_column %} end{% endif %}"
+    {% if hotkeys %}data-hotkey="{{ hotkeys }}"{% endif %}
+  >
+    {% if not no_label %}
+    <label>
+      {{ _(label) }}
+    {% if required %}
+      ({{ _('required') }})
+    {% endif %}
+    {% if not label_wrap %}
+    </label>
+    {% endif %}
+    {% endif %}
+{% endmacro %}
+
+{% macro form_end(args) %}
+{% set help_text = args.help_text or none %}
+{% set row = args.row|default(true) %}
+{% set no_label = args.no_label or false %}
+{% set label_wrap = args.label_wrap|default(true) %}
+  {% if not no_label and label_wrap %}
+    </label>
+  {% endif %}
+  {% if help_text %}
+    <p class="help-text">{{ _(help_text)|safe }}</p>
+  {% endif %}
+  </div>
+{% if row %}
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro form_attr(form_class, args) %}
+{% set disabled = args.disabled or false %}
+{% set required = args.required or false %}
+{% set autofocus = args.autofocus or false %}
+{% set noAutocomplete = args.noAutocomplete or false %}
+{% set extra_style = args.extra_style or false %}
+{% set extra_class = args.extra_class %}
+{% set extra_attr = args.extra_attr %}
+{% set date = args.date or false %}
+{% set time = args.time or false %}
+{% set datetime = args.datetime or false %}
+  class="{{ form_class }}{% if extra_class %} {{ extra_class }}{% endif %}"
+  {% if disabled %}disabled{% endif %}
+  {% if required %}required{% endif %}
+  {% if autofocus %}autofocus data-autofocus{% endif %}
+  {% if noAutocomplete %}autocomplete="off"{% endif %}
+  {% if datetime %}data-pick-datetime{% endif %}
+  {% if date %}data-pick-date{% endif %}
+  {% if time %}data-pick-time{% endif %}
+  {% if extra_attr %}{{ extra_attr }}{% endif %}
+  {% if extra_style %}style="{{extra_style}}"{% endif %}
+{% endmacro %}
+
+{% macro container_attr(container_class, args) %}
+{% set extra_class = args.extra_class or none %}
+  class="{{ container_class }}{% if extra_class %} {{ extra_class }}{% endif %}"
+{% endmacro %}
+
+{% macro select(args) %}
+<div
+  name="form_item_{{ args.name }}"
+  {{ container_attr('select-container', args) }}
+>
+  <select
+    name="{{ args.name }}"
+    {{ form_attr('select', args) }}
+  >
+  {%- for k, v in args.options -%}
+    <option value="{{ k }}"{% if args.value == k %} selected{% endif %}>
+      {{ _(v) }}
+    </option>
+  {%- endfor -%}
+  </select>
+</div>
+{% endmacro %}
+
+{% macro form_select(args) %}
+{{ form_begin({columns:5}|assign(args)) }}
+{{ select(args) }}
+{{ form_end(args) }}
+{% endmacro %}
+
+{% macro radio(args) %}
+<div
+  name="form_item_{{ args.name }}"
+  {{ container_attr('radiobox-container', args) }}
+>
+{%- for k, v in args.options -%}
+  <label class="radiobox">
+    <input
+      value="{{ k }}"
+      type="radio"
+      name="{{ args.name }}"
+      {{ form_attr('radiobox__input', args) }}
+      {% if args.value == k %} checked{% endif %}
+    /> {{ _(v) }}
+  </label>
+{%- endfor -%}
+
+</div>
+{% endmacro %}
+
+{% macro form_radio(args) %}
+{{ form_begin({columns:5, label_wrap:false}|assign(args)) }}
+{{ radio(args) }}
+{{ form_end({label_wrap:false}|assign(args)) }}
+{% endmacro %}
+
+{% macro image_radio(args) %}
+<div
+  name="form_item_{{ args.name }}"
+  {{ container_attr('radiobox-container with-image', args) }}
+>
+{%- for k, v in options -%}
+  <label class="radiobox with-image">
+    <input
+      value="{{ k }}"
+      type="radio"
+      name="{{ args.name }}"
+      {{ form_attr('radiobox__input', args) }}
+      {% if value == k %} checked{% endif %}
+    />
+    <div class="radiobox__image-container" data-tooltip="{{ _(v) }}">
+      <div class="radiobox__image {{ image_class.format(k) }}"></div>
+    </div>
+  </label>
+{%- endfor -%}
+</div>
+{% endmacro %}
+
+{% macro form_image_radio(args) %}
+{{ form_begin({columns:8, label_wrap:false}|assign(args)) }}
+{{ image_radio(args) }}
+{{ form_end({label_wrap:false}|assign(args)) }}
+{% endmacro %}
+
+{% macro text(args) %}
+<div
+  name="form_item_{{ args.name }}"
+  {{ container_attr('textbox-container', args) }}
+>
+  <input
+    type="{{ 'number' if args.type == 'float' else args.type|default('text') }}"
+    name="{{ args.name }}"
+    value="{{ args.value }}"
+    {% if args.type == 'float' %} step="any"{% endif %}
+    placeholder="{{ args.placeholder }}"
+    {{ form_attr('textbox', args) }}
+  >
+</div>
+{% endmacro %}
+
+{% macro form_text(args) %}
+{{ form_begin({columns:5}|assign(args)) }}
+{{ text(args) }}
+{{ form_end(args) }}
+{% endmacro %}
+
+{% macro textarea(args) %}
+{% set markdown = args.markdown or false %}
+{% set nospellcheck = args.nospellcheck or false %}
+<div
+  name="form_item_{{ args.name }}"
+  {{ container_attr('textarea-container', args) }}
+>
+  <textarea
+    name="{{ args.name }}"
+    placeholder="{{ args.placeholder }}"
+    {% if markdown %}data-markdown{% endif %}
+    {% if nospellcheck %}spellcheck="false"{% endif %}
+    {{ form_attr('textbox', args) }}
+  >{{ args.value }}</textarea>
+</div>
+{% endmacro %}
+
+{% macro form_textarea(args) %}
+{{ form_begin({columns:10}|assign(args)) }}
+{{ textarea(args) }}
+{{ form_end(args) }}
+{% endmacro %}
+
+{% macro checkbox(args) %}
+<div
+  name="form_item_{{ args.name }}"
+  {{ container_attr('checkbox-container', args) }}
+>
+  <label class="checkbox">
+    <input type="checkbox" name="{{ args.name }}"{% if args.value %} checked{% endif %}
+      {{ form_attr('checkbox', args) }}
+    >{% if args.placeholder %}{{ _(args.placeholder) }}{% endif %}
+  </label>
+</div>
+{% endmacro %}
+
+{% macro form_checkbox(args) %}
+{{ form_begin({columns:5}|assign(args)) }}
+{{ checkbox(args) }}
+{{ form_end(args) }}
+{% endmacro %}

package/templates/components/home.html

@@ -0,0 +1,20 @@
+{% import "components/sidemenu.html" as sidemenu with context %}
+{% macro render_sidebar() %}
+<div class="section side">
+  <ol class="menu">
+    {{ sidemenu.render_item('account--circle', 'user_detail', {uid:handler.user._id}, label='My Profile') }}
+    {{ sidemenu.render_item('comment--multiple', 'home_messages') }}
+    <li class="menu__seperator"></li>
+    {{ sidemenu.render_item('web', 'home_settings', {category:'domain'}, label='Domain Settings', menu_item='home_domain') }}
+    {{ sidemenu.render_item('web', 'home_domain', label='My Domains', memu_item='home_domains') }}
+    {% if handler.user.hasPriv(PRIV.PRIV_CREATE_FILE) %}
+      <li class="menu__seperator"></li>
+      {{ sidemenu.render_item('file', 'home_files', label='My Files') }}
+    {% endif %}
+    <li class="menu__seperator"></li>
+    {{ sidemenu.render_item('wrench', 'home_settings', {category:'account'}, label='Account Settings', menu_item='home_account') }}
+    {{ sidemenu.render_item('sliders', 'home_settings', {category:'preference'}, label='Preference Settings', menu_item='home_preference')}}
+    {{ sidemenu.render_item('security', 'home_security') }}
+  </ol>
+</div>
+{% endmacro %}

package/templates/components/homework.html

@@ -0,0 +1,8 @@
+{% import "components/user.html" as user with context %}
+{% macro render_time(tdoc_time) %}
+{{ datetimeSpan(tdoc_time, false, 'YYYY-M-D H:mm')|safe }}
+{% endmacro %}
+
+{% macro render_extension(tdoc) %}
+{{ ((tdoc['endAt'].getTime() - tdoc['penaltySince'].getTime())/ 1000 / 3600)|round(1) }}
+{% endmacro %}

package/templates/components/md_hint.html

@@ -0,0 +1,39 @@
+<div class="section side">
+  <div class="section__body typo">
+    <dl>
+      <dt>{{ _('Inline codes') }}</dt>
+      <dd><pre>`std::cout()`</pre></dd>
+      <dt>{{ _('Code blocks') }}</dt>
+      <dd><pre>```c++
+int main() {
+  return 0;
+}
+```</pre></dd>
+      <dt>{{ _('Inline formulas') }}</dt>
+      <dd><pre>$E=mc^2$</pre></dd>
+      <dt>{{ _('Formula blocks') }}</dt>
+      <dd><pre>$$E=mc^2$$</pre></dd>
+      <dt>{{ _('Links') }}</dt>
+      <dd><pre>[{{ _('Text') }}](https://...)</pre></dd>
+      <dt>{{ _('Highlight') }}</dt>
+      <dd><pre>=={{ _('Text') }}==</pre></dd>
+      <dt>{{ _('Images') }}</dt>
+      <dd><pre>![{{ _('Description') }}](https://...)</pre></dd>
+      <dt>{{ _('Images With Size') }}</dt>
+      <dd><pre>![{{ _('Description') }}](url =100x100)</pre></dd>
+      <dt>{{ _('Footnote') }}</dt>
+      <dd><pre>Here is a ref[^1].
+
+[^1]: And the footnote.</pre></dd>
+      <dt>{{ _('Videos') }}</dt>
+      <dd><pre>@[video](https://.../a.mp4)</pre></dd>
+      <dt>{{ _('Mention')}}</dt>
+      <dd><pre>@[](/user/uid)</pre></dd>
+    </dl>
+    <h2>{{ _('Learn More') }}</h2>
+    <ul>
+      <li><a href="http://commonmark.org/help/" target="_blank"><span class="icon icon-link--external"></span> {{ _('CommonMark Syntax') }}</a></li>
+      <li><a href="http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm" target="_blank"><span class="icon icon-link--external"></span> {{ _('LaTeX Expressions') }}</a></li>
+    </ul>
+  </div>
+</div>

package/templates/components/noscript_note.html

@@ -0,0 +1,15 @@
+{% macro render() %}
+{% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
+<noscript><div class="section__body no-padding">
+  <blockquote class="warn">
+    <p>{{ _('This page needs JavaScript to work.') }}</p>
+  </blockquote>
+</div></noscript>
+{% else %}
+<div class="section__body no-padding">
+  <blockquote class="warn">
+    <p>{{ _('This page needs JavaScript to work.') }}</p>
+  </blockquote>
+</div>
+{% endif %}
+{% endmacro %}

package/templates/components/nothing.html

@@ -0,0 +1,6 @@
+{% macro render(text, compact=false, args=[]) %}
+<div class="nothing-placeholder{% if compact %} compact{% endif %}">
+  <div class="nothing-icon"></div>
+  {{ _(text).format(args) }}
+</div>
+{% endmacro %}

package/templates/components/paginator.html

@@ -0,0 +1,25 @@
+{% macro render(page, num_pages, add_qs='', position='bottom') %}
+{% if num_pages > 0 %}
+  <ul class="pager pager-{{ position }}">
+  {%- for type, page0 in paginate(page, num_pages) -%}
+    <li>
+    {% if type == 'first' %}
+      <a class="pager__item first link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_first') }}</a>
+    {% elif type == 'previous' %}
+      <a class="pager__item previous link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_previous') }}</a>
+    {% elif type == 'ellipsis' %}
+      <span class="pager__item ellipsis">...</span>
+    {% elif type == 'page' %}
+      <a class="pager__item page link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ page0 }}</a>
+    {% elif type == 'current' %}
+      <span class="pager__item current">{{ page0 }}</span>
+    {% elif type == 'next' %}
+      <a class="pager__item next link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_next') }}</a>
+    {% elif type == 'last' %}
+      <a class="pager__item last link" href="?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}">{{ _('pager_last') }}</a>
+    {% endif %}
+    </li>
+  {%- endfor -%}
+  </ul>
+{% endif %}
+{% endmacro %}

package/templates/components/problem.html

@@ -0,0 +1,33 @@
+{% macro render_problem_title(pdoc, tdoc=none, show_tags=true, show_invisible_flag=true, invalid=false, inline=false, show_pid=true, small=false, alphabetic=false) %}
+{%- if not invalid -%}
+  {% set _linkArgs = { pid:pdoc.pid|default(pdoc.docId) } %}
+  {% if tdoc %}{{ set(_linkArgs, 'query', {tid:tdoc.docId}) }}{% endif %}
+  <a href="{{ url('problem_detail', _linkArgs) }}"{% if small %} data-tooltip="{{ pdoc.title }}"{% endif %}>
+{%- endif -%}
+{% if show_pid %}
+<b>{%- if tdoc and alphabetic -%}{{ utils.getAlphabeticId(tdoc.pids.indexOf(pdoc.docId)) }}
+{%- elif pdoc.pid and pdoc.pid.includes('-') -%}{{ pdoc.pid.split('-').join('#') }}
+{%- else -%}{{ pdoc.pid|default(pdoc.docId) }}{%- endif -%}</b>
+{% endif %}
+{%- if not small -%}{% if show_pid %}&nbsp;&nbsp;{% endif %}{{ pdoc.title }}{%- endif -%}
+{%- if not invalid -%}
+  </a>
+{%- endif -%}
+{%- if pdoc.hidden and show_invisible_flag -%}
+  <span class="text-orange">({{ _('Hidden') }})</span>
+{%- endif -%}
+{%- if show_tags -%}{{ render_problem_tags(pdoc, inline=inline) }}{%- endif -%}
+{% endmacro %}
+
+{% macro render_problem_tags(pdoc, show_none_label=false, inline=false) %}
+{%- if pdoc.tag|length > 0 %}
+  {%- if not inline %}<ul class="problem__tags">{% endif -%}
+  {%- for tag in pdoc['tag'] %}
+    {% set _w = '"' if tag and tag.includes(' ') else '' %}
+    <li class="problem__tag"><a class="problem__tag-link" href="{{ url('problem_main', query={q:'category:'+_w+tag+_w}) }}">{{ tag }}</a></li>
+  {%- endfor -%}
+  {%- if not inline %}</ul>{% endif -%}
+{%- else -%}
+  {%- if show_none_label -%}{{ _('(None)') }}{%- endif -%}
+{%- endif -%}
+{% endmacro %}

package/templates/components/record.html

@@ -0,0 +1,21 @@
+{% macro render_status_td(rdoc, rid_key='_id', class='', allDomain=false, short=false, displayScore) %}
+<td class="col--status record-status--border {{ class }} {{ model.builtin.STATUS_CODES[rdoc.status] }}">
+  <div class="col--status__text">
+    <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc.status] }}"></span>
+    <a 
+      href="{{ url('record_detail', rid=rdoc[rid_key], domainId=rdoc.domainId) if allDomain else url('record_detail', rid=rdoc[rid_key]) }}"
+      class="record-status--text {{ model.builtin.STATUS_CODES[rdoc.status] }}"
+    >
+      {% if typeof(rdoc['score']) == 'number' %}
+      <span style="color: {{ utils.status.getScoreColor(rdoc.score|default(0)) }}">{{ displayScore|default(rdoc.score|default(0)) }}</span>
+      {% endif %}
+      {{ model.builtin.STATUS_SHORT_TEXTS[rdoc.status] if short else model.builtin.STATUS_TEXTS[rdoc.status] }}
+    </a>
+  </div>
+  {% if rdoc.status == STATUS.STATUS_JUDGING %}
+    <div class="col--status__progress-container">
+      <div class="col--status__progress" style="width: {{ rdoc['progress']|default(50)|int }}%"></div>
+    </div>
+  {% endif %}
+</td>
+{% endmacro %}

package/templates/components/sidemenu.html

@@ -0,0 +1,11 @@
+{% macro render_item(icon_name, page_name, args={}, label=none, menu_item=none) %}
+{% set target_url = url(page_name, args) if page_name else '#' %}
+<li class="menu__item" id="menu-item-{{ menu_item or page_name }}">
+  <a href="{{ target_url }}" class="menu__link{% if handler.request.path == target_url %} active{% endif %}">
+  {% if icon_name %}
+    <span class="icon icon-{{ icon_name }}"></span>
+  {% endif %}
+  {{ _(label or page_name) }}
+  </a>
+</li>
+{% endmacro %}

package/templates/components/user.html

@@ -0,0 +1,49 @@
+{% macro render_inline(udoc, avatar=true, badge=true, modbadge=true, levelbadge=true) %}
+{% if udoc %}
+<span class="user-profile-link">
+  {% if avatar %}
+    <img class="small user-profile-avatar v-center" loading="lazy" src="{{ avatarUrl(udoc.avatar|default('')) }}" width="20" height="20">
+  {% endif %}
+  <a class="user-profile-name uname--lv{{ udoc.level|default(0) }}" href="{{ url('user_detail', uid=udoc._id) }}">
+    {% if handler.user.hasPerm(perm.PERM_VIEW_USER_PRIVATE_INFO) and udoc.displayName and udoc.displayName != udoc.uname %}
+      {{ udoc.displayName }} ({{ udoc.uname }})
+    {% else %}
+      {{ udoc.uname }}
+    {% endif %}
+  </a>
+  {% if badge %}
+    {% if udoc.badge %}
+      {% set _badge = udoc.badge.split('#') %}
+      {% if _badge[0] == 'img' %}
+        <img src="{{ _badge[1] }}" class="user-profile-badge v-center" style="vertical-align:bottom;" data-tooltip="{{ _badge[2] }}" alt="{{ _badge[2] }}">
+      {% else %}
+        <span class="user-profile-badge v-center" style="background-color:#{{ _badge[1] }}{% if _badge[2] %};color:#{{ _badge[2] }}{% endif %}">{{ _badge[0] }}</span>
+      {% endif %}
+    {% endif %}
+    {% if levelbadge and udoc.level %}
+      {% set level = udoc.level %}
+      <a class="user-profile-badge v-center badge--lv{{ level }}" href="{{ url('user_detail', uid=udoc._id) }}" data-tooltip="{{ _('LV '+ level) }}: Top {{ model.builtin.LEVELS[level]|default('N/A') }}%">{{ _('LV '+ level) }}</a>
+    {% endif %}
+    {% if modbadge %}
+      {% if udoc.hasPriv(PRIV.PRIV_MOD_BADGE) %}
+        <span class="user-profile-badge v-center badge--su" data-tooltip="{{ _('SuperUser') }}">SU</span>
+      {% elif udoc.hasPerm(perm.PERM_MOD_BADGE) %}
+        <span class="user-profile-badge v-center badge--mod" data-tooltip="{{ _('Moderator') }}">MOD</span>
+      {% endif %}
+    {% endif %}
+  {% endif %}
+</span>
+{% else %}
+  <span class="user-profile-link">
+    {% if avatar %}
+      <img class="small user-profile-avatar v-center" src="{{ UiContext.cdn_prefix }}img/avatar.png" width="20" height="20">
+    {% endif %}
+    <a class="user-profile-name" href="#">
+      {{ _('Unknown User') }}
+    </a>
+    {% if badge %}
+      <a class="user-profile-badge v-center badge--lv0" href="#" title="LV0">LV 0</a>
+    {% endif %}
+  </span>
+{% endif %}
+{% endmacro %}