### Output Sample

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/partials/problem_default.md

Example of output format for the problem.

```text
623
```

--------------------------------

### Input Sample

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/partials/problem_default.md

Example of input format for the problem.

```text
123 500
```

--------------------------------

### Inline Code Example

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/md_hint.html

Use backticks (`) to format inline code snippets.

```Markdown
`std::cout()`
```

--------------------------------

### Add New Translation Language

Source: https://github.com/hydro-dev/hydro/blob/master/CONTRIBUTING.md

Example of a new translation file for Korean (ko_KR). Ensure keys are sorted alphabetically and include language metadata.

```yaml
# packages/*/locale/ko_KR.yml
__id: ko_KR # If you are creating a new language, besure to add this language meta
__langname: 한국어 # Language name in the language itself
key1: value1 # translations
key2: value2
```

--------------------------------

### C++ Code Block Example

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/md_hint.html

Use triple backticks with the language identifier to create fenced code blocks.

```c++
int main() {
  return 0;
}
```

--------------------------------

### Render Contest Duration

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/contest.html

Calculates and formats the duration of a contest. It uses a pre-defined duration if available, otherwise calculates it from start and end times.

```html
{% macro render_duration(tdoc) %} {{ tdoc.duration|round(1) if tdoc.duration else ((tdoc.endAt.getTime() - tdoc.beginAt.getTime()) /1000 / 3600)|round(1) }} {% endmacro %}
```

--------------------------------

### Create System User and Set Super Admin

Source: https://github.com/hydro-dev/hydro/blob/master/install/helm-single/readme.md

After initial deployment, manually create a system user and set them as a super administrator within the Backend pod.

```bash
hydrooj cli user create systemjudge@systemjudge.local root rootroot
hydrooj cli user setSuperAdmin 2
```

--------------------------------

### User Documentation Rendering (Grouped by Privilege)

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/partials/manage_user_priv.html

Renders user documentation, grouped by privilege. If a group has more than 50 users, it uses a compact format; otherwise, it displays detailed user info.

```html
{%- for priv, gudocs in udocs|groupby('priv') -%} {%- if gudocs|length > 50 -%} 
{%- for udoc in gudocs -%} [{{udoc._id}}]{{ user.render_inline(udoc, avatar=false, badge=false) }} {{ _('Edit') }}    {%- endfor -%} {{ priv }}  
{{ show_priv(priv) }} {%- else -%} {%- for udoc in gudocs -%} {{ udoc._id }} {{ user.render_inline(udoc, badge=false) }} {{ show_priv(udoc.priv) }} {{ udoc.priv }} {{ _('Edit') }} {%- endfor -%} {%- endif -%} {%- endfor -%}
```

--------------------------------

### Form Begin Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Defines the beginning of a form element, setting up labels, columns, and required status. Use this macro to wrap individual form fields.

```html
{% 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 %}

{% endif %}

{% if not no_label %} {{ _(label) }} {% if required %} ({{ _('required') }}) {% endif %} {% if not label_wrap %} {% endif %} {% endif %}
{% endmacro %}
```

--------------------------------

### Display Code and Download Link

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Renders a 'Code' section with a download link and the actual code if the record has code or code files.

```html
{% if rdoc['code'] or rdoc.files.code %}

{{ _('Code') }}
================

[{% if rdoc.files.hack %}{{ _('Download Hack Input') }}{% else %}{{ _('Download') }}{% endif %}](?download=true)

    {{ rdoc['code'] }}

{% endif %}
```

--------------------------------

### Import User Component

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/homework.html

Imports the user component with context for use within the template.

```html
{% import "components/user.html" as user with context %}
```

--------------------------------

### File List Rendering Logic

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/partials/files.html

This snippet shows the conditional logic for rendering a list of files or a 'no files' message. It iterates through files and displays their names and sizes.

```html
{% import "components/nothing.html" as nothing with context %}

{% if files.length %} {% if not sidebar %}{% endif %} {% if not sidebar %} {% endif %} {%- for file in files -%} {% if not sidebar %} {% endif %} {%- endfor -%}

  

{{ _('Filename') }}

{{ _('Size') }}

[{{ file.name }}]({{ urlForFile(file.name, filetype) }})

{{ size(file.size) }}

[]({{ urlForFile(file.name, filetype) }})

{% else %} {{ nothing.render('There are no files currently.', compact=true) }} {% endif %}
```

--------------------------------

### Backend Translation Usage

Source: https://github.com/hydro-dev/hydro/blob/master/CONTRIBUTING.md

Shows how to use translated strings in backend templates and code using the '_().format()' and 'i18n().format()' methods.

```javascript
// For backend (in template):
_('Welcome to {0}, {1}').format(place, name)
_('Welcome to {place}, {name}').format({ name, place })

// For backend (in code):
i18n('Welcome to {0}, {1}').format(place, name);
i18n('Welcome to {place}, {name}').format({ place, name });
```

--------------------------------

### Frontend Translation Usage

Source: https://github.com/hydro-dev/hydro/blob/master/CONTRIBUTING.md

Illustrates how to use translated strings in frontend applications using the 'substitute(i18n(), [])' function.

```javascript
// For frontend:
substitute(i18n('Welcome to {0}, {1}'), [place, name]);
substitute(i18n('Welcome to {place}, {name}'), { place, name });
```

--------------------------------

### Render Extension Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/homework.html

Defines a macro to calculate and render the homework extension time in hours.

```html
{% macro render_extension(tdoc) %}
  {{ ((tdoc['endAt'].getTime() - tdoc['penaltySince'].getTime())/ 1000 / 3600)|round(1) }}
{% endmacro %}
```

--------------------------------

### JavaScript Scoreboard Initialization

Source: https://github.com/hydro-dev/hydro/blob/master/packages/scoreboard-xcpcio/templates/xcpcio_board.html

Initializes global JavaScript variables for CDN, asset URLs, data sources, and language settings. Handles URL normalization and theme toggling.

```html
{% set page_name = 'contest_scoreboard_xcpcio' %} {% extends "layout/basic.html" %} {% block content %} function normalizePath(_) { for (; _.endsWith("/");)_ = _.slice(0, -1); return `${_}/`; } window.CDN_HOST = "{{ '/' if process.env.DEV else UiContext.cdn_prefix }}"; window.__toAssetUrl = url => window.CDN_HOST + url; window.DATA_HOST = "/"; window.DATA_REGION = "Hydro"; window.DEFAULT_LANG = "{{ 'zh-CN' if _('__id').startsWith('zh') else 'en' }}"; window.DATA_SOURCE = "{{ dataSource|safe }}"; {% if refreshInterval %}window.REFRESH_INTERVAL = {{ refreshInterval }};{% endif %} if (document.documentElement.classList.contains("theme--dark")) document.documentElement.classList.toggle("dark", !0); setInterval(() => { const location = window.location.href; if (location.includes("%2F")) { window.history.replaceState(null, "", location.replace(/%2F/g, "/")); } }, 500); #app .nav, .omnibar-toggle, #app>main>footer>div>a, #app>main>footer>div>p { display: none; } #app footer { padding-top: 0 !important; padding-bottom: 0 !important; } .nav__item .icon img { display: inherit; } table { border-spacing: 2px; } th { text-align: center; } td.unattempted, td.empty { background-color: transparent !important; } #app main { overflow-y: auto; overflow-x: hidden; }  {% if tdoc and realtime and model.contest.isLocked(tdoc) and model.contest.isDone(tdoc) and handler.user.own(tdoc) %} > {{ _('You are viewing the realtime scoreboard while the scoreboard is currently frozen.') }}  > {{ _('To allow contestants to view the scoreboard, you can unfreeze the scoreboard.') }} >  {{ _('Unlock scoreboard') }} {% endif %} This website requires JavaScript to function properly. Please enable JavaScript tocontinue. {% endblock %}
```

--------------------------------

### Jinja2 Formatting for Records and Links

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/contest_scoreboard_download_html.html

Handles the display of record data. If the column type is 'record' and has a raw value, it creates a link to the record detail. It also supports displaying multiple records, separated by slashes.

```html
{% if column.type == 'record' and column.raw %} [{{ column.value|string|nl2br|safe }}]({{ model.system.get('server.url') }}{{ url('record_detail', rid=column.raw).substr(1,9999) }}) {% elif column.type == 'records' %} {%- for record in column.raw -%} {% if loop.index0 %}/{% endif %} {% if record.raw %} [{{ record.value|string|nl2br|safe }}]({{ model.system.get('server.url') }}{{ url('record_detail', rid=record.raw).substr(1,9999) }}) {% else %} {{ record.value|string|nl2br|safe }} {% endif %} {%- endfor -%} {% else %} {{ column.value|string|nl2br|safe }} {% endif %}
```

--------------------------------

### User Privilege Display Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/partials/manage_user_priv.html

Macro to display user privilege status: PRIV_NONE, PRIV_ALL, or a list of specific privileges with additions/removals.

```html
{% import "components/user.html" as user with context %} {% macro show_priv(upriv) %} {%- if upriv == 0 -%} PRIV_NONE {%- elif upriv == -1 -%} PRIV_ALL {%- else -%} {%- for name, priv in Priv -%} {%- if priv|bitand(upriv) and not priv|bitand(defaultPriv) -%} 
+{{ name }}
{%- elif priv|bitand(defaultPriv) and not priv|bitand(upriv) -%} 
-{{ name }}
{%- endif -%} {%- endfor -%} {%- endif -%} {% endmacro %}
```

--------------------------------

### Render Homework or Contest Link

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Displays a link to the homework or contest detail page based on the associated document's rule.

```html
{% if tdoc %}

{{ _('Homework') if tdoc.rule == 'homework' else _('Contest') }}

[{{ tdoc.title }}]({{ url('homework_detail' if tdoc.rule == 'homework' else 'contest_detail', tid=tdoc.docId) }})

{% endif %}
```

--------------------------------

### Translation String with Substitution

Source: https://github.com/hydro-dev/hydro/blob/master/CONTRIBUTING.md

Demonstrates array-style and object-style substitution within translation strings. Keys and values are quoted only when necessary.

```yaml
Welcome to {0}, {1}: '{0} 오신 것을 환영합니다, {1}' # array style
Welcome to {place}, {name}: '{place} 오신 것을 환영합니다, {name}' # object style
```

--------------------------------

### Render User Inline

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Renders the submitter's information inline, without modification badges.

```html
{{ user.render_inline(udoc, modbadge=false) }}
```

--------------------------------

### Display History Links

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Renders a list of links to previous versions of the record, including the latest version.

```html
{% if allRevs|length %}

{{ _('History') }}
===================

1.  [{{ _('Latest Version') }}](?rev=)
{% for r, rtime in allRevs %}2.  [{{ datetimeSpan(rtime, false)|safe }}](?rev={{ r }})
{% endfor %}

{% endif %}
```

--------------------------------

### Form Textarea Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a complete textarea input field. It combines `form_begin`, `textarea`, and `form_end` macros, with options for column width.

```html
{% macro form_textarea(args) %}
{{ form_begin({columns:10}|assign(args)) }}
{{ textarea(args) }}
{{ form_end(args) }}
{% endmacro %}
```

--------------------------------

### Form Select Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a complete select dropdown input field. It combines `form_begin`, `select`, and `form_end` macros.

```html
{% macro form_select(args) %}
{{ form_begin({columns:5}|assign(args)) }}
{{ select(args) }}
{{ form_end(args) }}
{% endmacro %}
```

--------------------------------

### Default Privilege Display

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/partials/manage_user_priv.html

Displays the default privilege level and allows editing.

```html
# Default Privilege {%- for name, priv in Priv -%} {%- if defaultPriv|bitand(priv) -%} {{ name }}  
{%- endif -%} {%- endfor -%} {{ defaultPriv }} {{ _('Edit') }}
```

--------------------------------

### Select Options Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Iterates over options to generate select choices. This macro is a helper for the `form_select` macro.

```html
{% macro select(args) %}
{%- for k, v in args.options -%}
{{ _(v) }}
{%- endfor -%}
{% endmacro %}
```

--------------------------------

### Include Record Detail Summary

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Includes the record detail summary partial if the record status is a number.

```html
{% if typeof(rdoc['status']) === 'number' %}
{% include 'record_detail_summary.html' %}
{% endif %}
```

--------------------------------

### Jinja Macro for Inline User Rendering

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/user.html

This macro renders user information inline, with options to include avatar, badges, and moderation status. It handles both known and unknown users.

```html
{% macro render_inline(udoc, avatar=true, badge=true, modbadge=true, levelbadge=true) %}
{% if udoc %}
  {% if avatar %} ![]({{ avatarUrl(udoc.avatar|default('')) }}) {% endif %}
  [{% 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 %}]
({{ url('user_detail', uid=udoc._id) }})
  {% if badge %}
    {% if udoc.badge %}
      {% set _badge = udoc.badge.split('#') %}
      {{ _badge[0] }}
    {% endif %}
    {% if levelbadge and udoc.level %}
      {% set level = udoc.level %}
      [{{
        _('LV '
        )
      }} {{ level }}]({{ url('user_detail', uid=udoc._id) }})
    {% endif %}
    {% if modbadge %}
      {% if udoc.hasPriv(PRIV.PRIV_MOD_BADGE) %}
        SU
      {% elif udoc.hasPerm(perm.PERM_MOD_BADGE) %}
        MOD
      {% endif %}
    {% endif %}
  {% endif %}
{% else %}
  {% if avatar %} ![]({{ UiContext.cdn_prefix }}img/avatar.png) {% endif %}
  [{{ _('Unknown User') }}](#)
  {% if badge %} [LV 0](# "LV0") {% endif %}
{% endif %}
{% endmacro %}
```

--------------------------------

### Jinja Paginator Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/paginator.html

This macro generates pagination links. It iterates through different page types (first, previous, ellipsis, page, current, next, last) and constructs URLs with optional query string parameters.

```html
{% macro render(page, num_pages, add_qs='', position='bottom') %} {% if num_pages > 0 %} {%- for type, page0 in paginate(page, num_pages) -%}*   {% if type == 'first' %} [{{ _('pager_first') }}](?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}) {% elif type == 'previous' %} [{{ _('pager_previous') }}](?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}) {% elif type == 'ellipsis' %} ... {% elif type == 'page' %} [{{ page0 }}](?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}) {% elif type == 'current' %} {{ page0 }} {% elif type == 'next' %} [{{ _('pager_next') }}](?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}) {% elif type == 'last' %} [{{ _('pager_last') }}](?page={{ page0 }}{% if add_qs %}&{{ add_qs }}{% endif %}) {% endif %} {% endfor %} {% endif %} {% endmacro %}
```

--------------------------------

### Render Time Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/homework.html

Defines a macro to render a datetime span with a specific format.

```html
{% macro render_time(tdoc_time) %}
  {{ datetimeSpan(tdoc_time, false, 'YYYY-M-D H:mm')|safe }}
{% endmacro %}
```

--------------------------------

### Form Text Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a complete text input field. It combines `form_begin`, `text`, and `form_end` macros.

```html
{% macro form_text(args) %}
{{ form_begin({columns:5}|assign(args)) }}
{{ text(args) }}
{{ form_end(args) }}
{% endmacro %}
```

--------------------------------

### HTML Template Structure

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/user_sudo_redirect.html

This Jinja2 template extends a base layout, displays a title, a waiting message, and includes a script to auto-submit a form.

```html
{% extends "layout/immersive.html" %} {% block content %}

{{ 
_('Confirm Access') 
}}
==========================

Redirecting, please wait...

{% for k, v in args %}  {% endfor %} 

document.getElementById('submit').click()

{% endblock %}
```

--------------------------------

### Form Checkbox Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a complete checkbox input field. It combines `form_begin`, `checkbox`, and `form_end` macros.

```html
{% macro form_checkbox(args) %}
{{ form_begin({columns:5}|assign(args)) }}
{{ checkbox(args) }}
{{ form_end(args) }}
{% endmacro %}
```

--------------------------------

### Display Hack Target Link

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Shows a link to the hack target record if the record has a 'hackTarget' field.

```html
{% if rdoc.hackTarget %}

{{ _('Hacked') }}

[{{ rdoc.hackTarget }}]({{ url('record_detail', rid=rdoc.hackTarget) }})

{% endif %}
```

--------------------------------

### Render Clarification Subject

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/contest.html

Renders the subject for issue clarification based on a subject code. It maps specific codes to predefined strings ('General Issue', 'Technical Issue') or generates an alphabetic ID for other subjects.

```html
{% 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 %}
```

--------------------------------

### Text Input Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

A placeholder macro for text input fields. It is intended to be used within `form_text`.

```html
{% macro text(args) %}

{% endmacro %}
```

--------------------------------

### Display Programming Language

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Shows the display name of the programming language used for the record, if the problem type is not 'objective'.

```html
{% if pdoc.config.type != 'objective' %}

{{ _('Language') }}

{{ model.setting.langs[rdoc.lang].display }}

{% endif %}
```

--------------------------------

### Textarea Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a textarea element, with options for markdown support and spellcheck. Use this macro within `form_textarea`.

```html
{% macro textarea(args) %}
{% set markdown = args.markdown or false %}
{% set nospellcheck = args.nospellcheck or false %}

{{ args.value }}
{% endmacro %}
```

--------------------------------

### Render Contest Time

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/contest.html

Formats a given timestamp into a human-readable string (YYYY-M-D H:mm).

```html
{% import "components/user.html" as user with context %} {% macro render_time(tdoc_time) %} {{ datetimeSpan(tdoc_time, false, 'YYYY-M-D H:mm')|safe }} {% endmacro %}
```

--------------------------------

### Sidemenu Item Rendering Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/sidemenu.html

This Jinja2 macro defines how individual sidemenu items are rendered. It accepts an icon name, page name, optional arguments, and a label, generating a list item with a link.

```html
{% macro render_item(icon_name, page_name, args={}, label=none, menu_item=none) %}
{% set target_url = url(page_name, args) if page_name else '#' %}
*   [{% if icon_name %} {% endif %} {{ _(label or page_name) }}]({{ target_url }})
{% endmacro %}
```

--------------------------------

### Checkbox Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a checkbox input element, optionally displaying a placeholder label. Use this macro within `form_checkbox`.

```html
{% macro checkbox(args) %}
{% if args.placeholder %}{{ _(args.placeholder) }}{% endif %}
{% endmacro %}
```

--------------------------------

### Form Image Radio Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a complete image radio button group input field. It combines `form_begin`, `image_radio`, and `form_end` macros, with options for label wrapping.

```html
{% 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 %}
```

--------------------------------

### Display Code Length

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Shows the length of the submitted code, formatted by the 'size' filter.

```html
{% if rdoc.code %}

{{ _('Code Length') }}

{{ size(rdoc.code|length) }}

{% endif %}
```

--------------------------------

### HTML Table Structure for Scoreboard

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/contest_scoreboard_download_html.html

Defines the basic CSS for the HTML table used in the scoreboard, including layout, borders, and row styling. This is standard HTML and CSS for table presentation.

```html
body { font-family: "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans"; font-size: 14px; }
table { table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; font-size: inherit; }
th, td { text-align: left; border: 1px solid #CCC; padding: 5px; }
thead tr { background: #5f9fd6; color: #FFF; }	body tr:nth-child(even) { background: #F0F0F0; }
```

--------------------------------

### Set Socket URL Conditionally

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Sets the socket URL for real-time updates if the record status is a number and not a revision.

```html
{% if typeof(rdoc['status']) === 'number' and not rev %}
{{ set(UiContext, 'socketUrl', "record-detail-conn?domainId=" + rdoc.domainId + "&rid=" + rdoc._id) }}
{% endif %}
```

--------------------------------

### Render NoScript Note Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/noscript_note.html

This macro renders a note indicating that JavaScript is required. It checks for Internet Explorer and legacy session status to determine if the note should be displayed.

```html
{% macro render() %} {% if not isIE(handler.request.headers
['user-agent']) and not handler.session.legacy %}

> {{ 
_('This page needs JavaScript to work.') }}

{% else %}

> {{ 
_('This page needs JavaScript to work.') }}

{% endif %} {% endmacro %}
```

--------------------------------

### Include Record Detail Status

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Includes the record detail status partial if the record status is a number.

```html
{% if typeof(rdoc['status']) === 'number' %}
{% include 'record_detail_status.html' %}
{% endif %}
```

--------------------------------

### C Code for Hydro System Error Message

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/bsod.html

This C code snippet demonstrates how to construct an error message string for the Hydro system. It includes placeholders for dynamic content and links for user interaction.

```c
#include <string.h>
int main() {
  char answer[42];
  strcpy(answer, "undefined will tell you the answer to life the universe and everything,");
  strcpy(answer, "but first of all, she is very sorry that Hydro meets some issues now.");
  strcpy(answer, "please [wait patiently](javascript:window.location.reload() Try again"), or [contact undefined](mailto:i@undefined.moe) impatiently about this error.");
  return 0;
}
```

--------------------------------

### Radio Options Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Iterates over options to generate radio button choices. This macro is a helper for the `form_radio` macro.

```html
{% macro radio(args) %}
{%- for k, v in args.options -%}
{{ _(v) }}
{%- endfor -%}
{% endmacro %}
```

--------------------------------

### Render Judge User Inline

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Renders the judge's information inline, without badges.

```html
{% if judge_udoc %}

{{ _('Judged By') }}

{{ user.render_inline(judge_udoc, badge=false) }}

{% endif %}
```

--------------------------------

### Render Problem Title

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/record_detail.html

Renders the title of the associated problem, without tags or invisible flags.

```html
{% if pdoc %}

{{ _('Problem') }}

{{ problem.render_problem_title(pdoc, tdoc, show_tags=false, show_invisible_flag=false) }}

{% endif %}
```

--------------------------------

### Jinja2 Conditional Formatting for Problem Details

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/contest_scoreboard_download_html.html

Conditionally formats a cell's value. If the column type is 'problem_detail', it creates a link to the problem detail page; otherwise, it displays the raw value.

```html
{% if column.type == 'problem_detail' %} [{{ column.value }}]({{ model.system.get('server.url') }}{{ url(type + '_detail_problem', tid=tdoc.docId, pid=column.raw).substr(1,9999) }}) {% else %} {{ column.value }} {% endif %}
```

--------------------------------

### Container Attribute Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates HTML attributes for container elements, primarily for adding extra classes. Use this for styling wrapper elements.

```html
{% macro container_attr(container_class, args) %}
{% set extra_class = args.extra_class or none %}
class="{{ container_class }}{% if extra_class %} {{ extra_class }}{% endif %}"
{% endmacro %}
```

--------------------------------

### Form Radio Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Generates a complete radio button group input field. It combines `form_begin`, `radio`, and `form_end` macros, with options for label wrapping.

```html
{% macro form_radio(args) %}
{{ form_begin({columns:5, label_wrap:false}|assign(args)) }}
{{ radio(args) }}
{{ form_end({label_wrap:false}|assign(args)) }}
{% endmacro %}
```

--------------------------------

### Form End Macro

Source: https://github.com/hydro-dev/hydro/blob/master/packages/ui-default/templates/components/form.html

Defines the end of a form element, handling help text and row structure. Use this macro to close form fields wrapped by `form_begin`.

```html
{% 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 %} {% endif %}
{% if help_text %}

{{ _(help_text)|safe }}

{% endif %}

{% if row %}

{% endif %}
{% endmacro %}
```