{%- 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>
<!--[if lt IE 7]>      <html lang="de" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="de" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="de" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="de" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="/ui/jquery-1.12.4.min.js"></script>
    <script src="/ui/dist/js/bootstrap.min.js"></script>
    <script src="/ui/modernizr-2.6.2.min.js"></script>
    <script src="?_action=ji18n"></script>
    <!--[if lt IE 9]>
    <script src="/ui/html5shiv.min.js"></script>
    <script src="/ui/respond.min.js"></script>
    <![endif]-->
    {% block head_after %}{% endblock %}
</head>
<body>

{% block nav %}
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href=".">
                <span class="myb-icon mybblogo" aria-hidden="false"></span>
                {{ g.env.MYSTIC_FORUM_TITLE|default("Forum") }}
            </a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
            {% block navbar %}
                {% if currentUser %}
                    <ul class="nav navbar-nav navbar-right">
                        <li><p class="navbar-text">{{ __("Welcome, %user%!", {
                            user: currentUser.id == constant("mystic\\forum\\orm\\User::SUPERUSER_ID") ? ('<strong class="text-danger">' ~ (currentUser.displayName|e("html")) ~ '</strong>')|raw : ('<strong>' ~ (currentUser.displayName|e("html")) ~ '</strong>')|raw
                        }) }}
                        </p></li>
                        <li{{ g.globals.action == "search" ? ' class="active"'|raw : '' }}><a href="?_action=search"><span class="fa fa-search" aria-hidden="true"></span><span class="sr-only">{{ __("Search") }}</span></a></li>
                        <li{{ (g.globals.action == "viewuser" and g.get.user == currentUser.id) ? ' class="active"'|raw : '' }}><a href="?_action=viewuser&amp;user={{ currentUser.id|url_encode }}"><span class="fa fa-user" aria-hidden="true"></span><span class="sr-only">{{ __("View profile") }}</span></a></li>
                        <li><a href="?_action=logout&amp;next={{ g.server.REQUEST_URI|url_encode }}"><span class="fa fa-sign-out" aria-hidden="true"></span><span class="sr-only">{{ __("Log out") }}</span></a></li>
                    </ul>
                {% else %}
                    <ul class="nav navbar-nav navbar-right">
                        <li{{ g.globals.action == "search" ? ' class="active"'|raw : '' }}><a href="?_action=search"><span class="fa fa-search" aria-hidden="true"></span><span class="sr-only">{{ __("Search") }}</span></a></li>
                        <li{{ g.globals.action == "auth" ? ' class="active"'|raw : '' }}><a href="?_action=auth&amp;next={{ nextParam|url_encode }}">{{ __("Log in") }}</a></li>
                        {% if constant("REGISTRATION_ENABLED") %}
                            <li{{ g.globals.action == "register" ? ' class="active"'|raw : '' }}><a href="?_action=register&amp;next={{ nextParam|url_encode }}">{{ __("Register") }}</a></li>
                        {% endif %}
                    </ul>
                {% endif %}
            {% endblock %}
        </div>
    </div>
</nav>
{% endblock %}

{% block main %}
<div class="container">
    {% block content %}{% endblock %}
</div>
{% endblock %}

{% block footer %}
<footer class="footer">
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
    <table style="border-collapse: collapse; width: 100%; background: none">
    <tbody>
    <tr>
        <td style="padding: 0; vertical-align: middle; text-align: left; width: 100%" class="text-normal">
            &copy; {{ "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>.
        </td>
        <td style="padding: 0; vertical-align: middle; text-align: right; white-space: nowrap" class="text-normal">
            <form action="?_action=settheme" class="form-inline seamless-inline" method="post">
                <input type="hidden" name="next" value="{{ g.server.REQUEST_URI }}">
                <div class="form-group">
                    <label for="theme-select">{{ __("Theme:") }}</label>
                    <select class="form-control input-sm auto-submit" id="theme-select" name="theme">
                        {% for themeKey, themeInfo in availableThemes %}
                            <option value="{{ themeKey }}"{{ themeKey == currentTheme ? " selected" : "" }}>{{ themeInfo.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
            &nbsp;&nbsp;&nbsp;
            <form action="?_action=setlang" class="form-inline seamless-inline" method="post">
                <input type="hidden" name="next" value="{{ g.server.REQUEST_URI }}">
                <div class="form-group">
                    <label for="lang-select">{{ __("Language:") }}</label>
                    <select class="form-control input-sm auto-submit" id="lang-select" name="lang">
                        {% for langKey, langName in availableLangs %}
                            <option value="{{ langKey }}"{{ langKey == currentLang ? " selected" : "" }}>{{ langName }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </td>
    </tr>
    </tbody>
    </table>
</div>
</div>
</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 $($(btn).attr("data-area"))[0];
        }

        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]");
            }
        }

        $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
            var command = $(this).attr("data-editor-command");
            var textarea = getTextarea(this);
            commands[command](textarea);
        }).tooltip();
    });
</script>

<script>
$(function() {
    var _messages = {{ ({
        selectFiles: [
            ___("Select file", "Select files", 1),
            ___("Select file", "Select files", 2),
        ],
        filesSelected: [
            ___("%n% file selected", "No files selected", 0),
            ___("%n% file selected", "%n% files selected", 1),
            ___("%n% file selected", "%n% files selected", 2),
        ],
    })|json_encode|raw }}

    $(".auto-submit").on("change", function() {
        $(this)[0].form.submit();
    });

    $("._time").each(function(i, e) {
        var date = new Date($(e).text());
        $(e).text(date.toLocaleString());
    });
    $("._date").each(function(i, e) {
        var date = new Date($(e).text());
        $(e).text(date.toLocaleDateString());
    });
    $("._time-only").each(function(i, e) {
        var date = new Date($(e).text());
        $(e).text(date.toLocaleTimeString());
    });

    $("input[type=file]").each(function(i, e) {
        var isMultiple = !!$(e).prop("multiple");
        var isSmall = !!$(e).hasClass("small");
        var $input = $('<input type="text" readonly class="form-control" />').attr("placeholder", _messages.filesSelected[0]).css("text-overflow", "ellipsis");
        var $btn = $('<button class="btn btn-default" type="button"></button>');
        if (isSmall) {
            $input.addClass("input-sm");
            $btn.addClass("btn-sm");
        }
        $(e).after($('<div class="input-group file-input-group"></div>').append(
            $input,
            $('<span class="input-group-btn"></span>').append(
                $btn.text(_messages.selectFiles[isMultiple ? 1 : 0]).click(function() {
                    $(e).click();
                })
            )
        )).addClass("sr-only");
        $(e).on("change", function() {
            var files = $(e)[0].files;
            if (files.length < 1)
                $input.val("");
            else if (files.length === 1)
                $input.val(files[0].name);
            else
                $input.val(_messages.filesSelected[2].replace("%n%", files.length));
        });
    })
});
</script>
{% endblock %}

</body>
</html>