{% extends 'manage/users/master.twig' %}
{% from 'macros.twig' import pagination, container_title, avatar %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_select %}

{% block manage_content %}
    <div class="container">
        {{ container_title('<i class="fas fa-ban fa-fw"></i> Issuing a ban on user #' ~ ban_user.id ~ ' ' ~ ban_user.username) }}

        <form method="post" enctype="multipart/form-data" action="{{ url('manage-users-ban', {'user': ban_user.id}) }}" class="manage__ban">
            {{ input_csrf() }}

            <div class="manage__ban__field">
                <div class="manage__ban__title">Duration</div>
                <div class="manage__ban__desc">Specify the date/time when the ban will expire. There are various common presets, as well as the ability to specify a completely custom value and the ability to permanently ban someone. Custom values are UTC.</div>
                <div class="manage__ban__duration">
                    <div class="manage__ban__duration__main">{{ input_select('ub_expires', ban_durations, ban_value_expires|default(0), null, null, null, null, {'tabindex': '1', 'id': 'ub_expires'}) }}{# this is fucking stupid #}</div>
                    <div class="manage__ban__duration__custom manage__ban__duration__value__custom--hidden">{{ input_text('ub_expires_custom', null, ban_value_expires_custom|default(), 'datetime-local', null, null, {'id': 'ub_expires_custom'}, '2') }}</div>
                </div>
            </div>

            <div class="manage__ban__field">
                <div class="manage__ban__title">Severity</div>
                <div class="manage__ban__desc">An arbitrary severity rating of the ban ranging between -10 and 10 with a default value of 0. At this point this value does nothing but in the future it may be used to restrict what someone can still do while banned; a severity of -10 could basically function as not being banned at all aside from the appearance and 10 could prevent logging in entirely, but at this point it does nothing so just leave it at 0 or yoink it however you like.</div>
                <div class="manage__ban__severity">
                    <div class="manage__ban__severity__slider"><input name="ub_severity" id="ub_severity" class="input__range" type="range" min="-10" max="10" value="0" step="1" tabindex="3" value="{{ ban_value_severity|default(0) }}"></div>
                    <div class="manage__ban__severity__display"><input id="ub_severity_display" class="input__text" type="number" readonly></div>
                </div>
            </div>

            <div class="manage__ban__field">
                <div class="manage__ban__title">Public reason</div>
                <div class="manage__ban__desc">A concise explanation of why this ban is being placed. Reason displayed publicly to the banned user as well as at the top of their profile to other logged in users, reasons are not displayed to guests. May be left empty but that doesn't really help anyone, probably.</div>
                <div class="manage__ban__reason">
                    <textarea name="ub_reason_pub" class="input__textarea" tabindex="4">{{ ban_value_reason_pub|default() }}</textarea>
                </div>
            </div>

            <div class="manage__ban__field">
                <div class="manage__ban__title">Private reason</div>
                <div class="manage__ban__desc">Only displayed to other staff. Additional information for context so others can know why this ban was placed. If it's obvious or the details can also be found in the user notes section, you are free to leave this field untouched.</div>
                <div class="manage__ban__reason">
                    <textarea name="ub_reason_priv" class="input__textarea" tabindex="5">{{ ban_value_reason_priv|default() }}</textarea>
                </div>
            </div>

            <div class="manage__ban__actions">
                <button class="input__button input__button--destroy" tabindex="6"><i class="fas fa-gavel"></i>&nbsp;HAMMER TIME&nbsp;<i class="fas fa-gavel"></i></button>
            </div>
        </form>
    </div>

    <script>
        window.addEventListener('load', function() {
            const ubExpires = $i('ub_expires'),
                ubExpiresCustom = $i('ub_expires_custom'),
                ubSeverity = $i('ub_severity'),
                ubSeverityDisplay = $i('ub_severity_display');

            const updateExpires = function() {
                ubExpiresCustom.parentNode.classList.toggle('manage__ban__duration__value__custom--hidden', ubExpires.value != '-2');
            };

            const updateSeverity = function() {
                ubSeverityDisplay.value = ubSeverity.value;
            };

            ubExpires.addEventListener('input', function(ev) { updateExpires(); });
            ubSeverity.addEventListener('input', function(ev) { updateSeverity(); });

            updateExpires();
            updateSeverity();
        });
    </script>
{% endblock %}