{% extends "board/base.html" %}
{% load i18n %}

{% block title %}Create new ban for {{ post.id }} {{ block.super }}{% endblock %}

{% block content %}
<form id="form" action="{% url 'board:ban_create' url=board.url id=post.id %}" method="post" autocomplete="off"> 
    {% csrf_token %}
    <table>
        <tr>
            <th>{% translate 'Post ID' %}:</th>
            <td>{{post.id}}</td>
        </tr>
        <tr>
            <th>{% translate 'Board' %}:</th>
            <td>{{board.url}}</td>
        </tr>
        <tr>
            <th>IP:</th>
            <td>{{post.ip}}</td>
        </tr>
        <tr>
            <th>{% translate 'Template search' %}:</th>
            <td><input id="template_search" type="text" /></td>
        </tr>
        <tr>
            <th>{% translate 'Template' %}</th>
            <td>
                <select id="templates">
                    <option class="template_option" data-board="" data-reason="" data-duration="">Custom</option>
                {% for template in templates %}
                    <option class="template_option" data-board="{{template.board.id}}" data-reason="{{template.ban_reason}}" data-duration="{{template.duration}}">{{template.name}}</option>
                {% endfor %}
                </select>
            </td>
        </tr>
        {{form.as_table}}
        <tr>
            <th>{% translate "Previous bans" %}:</th>
            <td>{{previous_bans|length}}</td>
        </tr>
        <tr>
            <th>{% translate "Current bans" %}:</th>
            <td id="current_bans">{{current_bans|length}}</td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" id="submit" value="{% translate 'Create ban' %}" /></td>
        </tr>
    </table>
</form>

<script>
function submitConfirm(e) {
    if($("#current_bans").text() !== '0') {
        let result = window.confirm("There is already at least one ban for this IP address on this board, are you sure you want to continue?");
        if (!result) {
            e.preventDefault();
            return;
        }
    }
}

function templateSelect(e) {
    let selected = $($(e.target).find(":selected"));
    // uh oh, mixing django templates and JS
    let banReason = $("#{{form.ban_reason.auto_id}}");
    let duration = $("#{{form.duration.auto_id}}");
    let board = $("#{{form.board.auto_id}}");
    banReason.val(selected.attr("data-reason"));
    duration.val(selected.attr("data-duration"));

    if(parseInt(selected.attr("data-global"))) {
        board.val("");
    } else {
        board.val(selected.attr("data-board"));
    }

    let controls = [
        banReason,
        duration,
    ];

    let readonly = (selected.val() !== "Custom");
    controls.forEach(c => c.attr("readonly", readonly));
}

function templateSearch(e) {
    let search = $(e.target).val();
    let element = $("#templates option").toArray().find(element => {
        let re = new RegExp(search, "i");
        return element.value.search(re) !== -1;
    });

    if(typeof element === "undefined") {
        return;
    }

    $("#templates")
        .val(element.value)
        .trigger("change");
}

$("#submit").on("click", submitConfirm);
$("#templates").on("change", templateSelect);
$("#template_search").on("input propertychange paste", templateSearch);
$("#template_search").select();

</script>
{% endblock content %}