{%- if title -%}
{%- set title = title ~ " | " -%}
{%- endif -%}
{%- set title = title ~ (g.env.MYSTIC_FORUM_TITLE|default("Forum")) -%}
{%- set nextParam = "" -%}
{%- if g.globals.action in ["login", "register"] -%}
{%- set nextParam = g.get.next|default("") -%}
{%- else -%}
{%- set nextParam = g.server.REQUEST_URI -%}
{%- endif -%}
<!DOCTYPE html>
<html lang="{{ __("en", context: "HTML language") }}">
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="mysticBB {{ constant("MYSTICBB_VERSION") }}">
<title>{{ title }}</title>
<link rel="stylesheet" href=".?_action=ctheme">
<script src=".?_action=ji18n"></script>
{% block head_after %}{% endblock %}
</head>
<body>
{% block nav %}
<header>
<a id="brand" href=".">{{ g.env.MYSTIC_FORUM_TITLE|default("Forum") }}</a>
<nav>
{% block navbar %}
{% if currentUser %}
<a aria-label="{{ __("Search") }}" href="?_action=search"{{ g.globals.action == "search" ? ' class="active"'|raw : '' }}>
<svg viewBox="0 0 24 24" class="icon"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</a>
<a aria-label="{{ __("View profile") }}" href="?_action=viewuser&user={{ currentUser.id|url_encode }}"{{ (g.globals.action == "viewuser" and g.get.user == currentUser.id) ? ' class="active"'|raw : '' }}>
<svg viewBox="0 0 24 24" class="icon"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</a>
<a aria-label="{{ __("Log out") }}" href="?_action=logout&next={{ g.server.REQUEST_URI|url_encode }}">
<svg viewBox="0 0 24 24" class="icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
</a>
{% else %}
<a aria-label="{{ __("Search") }}" href="?_action=search"{{ g.globals.action == "search" ? ' class="active"'|raw : '' }}>
<svg viewBox="0 0 24 24" class="icon"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</a>
<a href="?_action=auth&next={{ nextParam|url_encode }}"{{ g.globals.action == "auth" ? ' class="active"'|raw : '' }}>{{ __("Log in") }}</a>
{% if constant("REGISTRATION_ENABLED") %}
<a href="?_action=register&next={{ nextParam|url_encode }}"{{ g.globals.action == "register" ? ' class="active"'|raw : '' }}>{{ __("Register") }}</a>
{% endif %}
{% endif %}
{% endblock %}
</nav>
</header>
{% endblock %}
{% block main %}
<main>
{% block content %}{% endblock %}
</main>
{% endblock %}
{% block footer %}
<footer>
<div id="about">
© {{ "now"|date("Y") }} {{ g.env.MYSTIC_FORUM_COPYRIGHT|default(g.env.MYSTIC_FORUM_TITLE)|default("Forum") }}.
Powered by <a href="https://git.jkohl.link/mystic-forum.git/tag/?h=v{{ constant("MYSTICBB_VERSION")|url_encode }}">mysticBB v{{ constant("MYSTICBB_VERSION") }}</a>.
</div>
<div id="preferences">
<form action="?_action=settheme" class="form-inline" method="post">
<input type="hidden" name="next" value="{{ g.server.REQUEST_URI }}">
<div class="form-group">
<label for="theme-select">{{ __("Theme:") }}</label>
<select id="theme-select" name="theme" onchange="this.form.submit()">
{% for themeKey, themeInfo in availableThemes %}
<option value="{{ themeKey }}"{{ themeKey == currentTheme ? " selected" : "" }}>{{ themeInfo.name }}</option>
{% endfor %}
</select>
</div>
</form>
<form action="?_action=setlang" class="form-inline" method="post">
<input type="hidden" name="next" value="{{ g.server.REQUEST_URI }}">
<div class="form-group">
<label for="lang-select">{{ __("Language:") }}</label>
<select id="lang-select" name="lang" onchange="this.form.submit()">
{% for langKey, langName in availableLangs %}
<option value="{{ langKey }}"{{ langKey == currentLang ? " selected" : "" }}>{{ langName }}</option>
{% endfor %}
</select>
</div>
</form>
</div>
</footer>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
(function() {
function insertAroundSelection(textarea, before, after) {
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var text = textarea.value;
var pre = text.substring(0, start);
var inner = text.substring(start, end);
var post = text.substring(end);
start += before.length;
end += before.length;
text = pre + before + inner + after + post;
textarea.value = text;
textarea.focus();
textarea.selectionStart = start;
textarea.selectionEnd = end;
}
function getTextarea(btn) {
return document.querySelector(btn.dataset.area);
}
var commands = {
bold: function(textarea) {
insertAroundSelection(textarea, "[b]", "[/b]");
},
italic: function(textarea) {
insertAroundSelection(textarea, "[i]", "[/i]");
},
underline: function(textarea) {
insertAroundSelection(textarea, "[u]", "[/u]");
},
strikethrough: function(textarea) {
insertAroundSelection(textarea, "[s]", "[/s]");
},
sup: function(textarea) {
insertAroundSelection(textarea, "[^]", "[/^]");
},
sub: function(textarea) {
insertAroundSelection(textarea, "[_]", "[/_]");
},
quote: function(textarea) {
insertAroundSelection(textarea, "> ", "");
},
spoiler: function(textarea) {
insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
}
}
document.querySelectorAll("button[data-editor-command]").forEach(e => {
e.addEventListener("click", function() {
const command = e.dataset.editorCommand;
const textarea = getTextarea(e);
commands[command](textarea);
});
});
})();
</script>
<script>
document.querySelectorAll("._time").forEach(e => {
const date = new Date(e.textContent.trim());
e.textContent = date.toLocaleString();
});
document.querySelectorAll("._date").forEach(e => {
const date = new Date(e.textContent.trim());
e.textContent = date.toLocaleDateString();
});
document.querySelectorAll("._time-only").forEach(e => {
const date = new Date(e.textContent.trim());
e.textContent = date.toLocaleTimeString();
});
document.querySelectorAll("[data-dismiss='modal']").forEach(e => {
e.addEventListener("click", () => {
const modal = e.closest(".modal");
if (!modal)
return;
modal.classList.add("fade");
modal.dispatchEvent(new Event("hidemodal"));
});
})
</script>
<script>
// feature detection
(function() {
var unsupportedFeatures = [];
function notSupported(feat) {
unsupportedFeatures.push("- " + feat);
}
var supports = {
cssNesting: ((function() {
try {
document.querySelector("&");
return true;
} catch (e) {
return false;
}
})()),
es6Syntax: ((function() {
try {
Function("() => {};");
return true;
} catch (e) {
return false;
}
})())
};
if (!supports.cssNesting) notSupported("CSS nesting");
if (!supports.es6Syntax) notSupported("ECMAScript 6 Syntax");
if (unsupportedFeatures.length > 0) {
alert(
"ATTENTION: This site might not work properly because your " +
"browser does not support some required features: \n\n" +
unsupportedFeatures.join("\n") +
"\n\n" +
"Please try chaning the theme to something else!"
);
}
})();
</script>
{% endblock %}
</body>
</html>