<div class="col-12">

    <div class="col-12">
        <button class="btn btn-dark mb-0" onclick="smallModal('createBannedWord')">{$lang.datatable.add_banned_word}</button>
    </div>
    {include file='main/datatable.tpl' tableTitle="{$lang.nav.bannedwords}"
    theads=[{$lang.datatable.uniq_id}, {$lang.datatable.word}, {$lang.datatable.created_at}, {$lang.datatable.actions}]
    data=$bannedWords }

</div>

<div id="createBannedWord" class="hidden">
    <h5 class="mt-0">{$lang.datatable.add_banned_word}:</h5>
    <form method="POST">
        <input type="hidden" name="form_key" value="{$form_key}">
        <div class="row">
            <div class="col-6">
                <label class="col-form-label mt-1" for="word">{$lang.datatable.word}</label>
                <input type="text" class="form-control" placeholder="{$lang.datatable.word}" name="word" id="word" required>
            </div>

            <div class="col-12">
                <button type="submit" name="create_banned_word" class="btn btn-success mt-4" id="submitButton">{$lang.datatable.add}</button>
            </div>
        </div>
    </form>
</div>

<div id="editBannedWord" class="hidden">
    <h5 class="mt-0">{$lang.datatable.add_banned_word}:</h5>
    <form method="POST">
        <input type="hidden" name="form_key" value="{$form_key}">
        <input type="hidden" id="bw_id" name="bw_id" value="">

        <div class="row">
            <div class="col-6">
                <label class="col-form-label mt-1" for="word">{$lang.datatable.word}</label>
                <input type="text" class="form-control" placeholder="{$lang.datatable.word}" name="word" id="word" required>
            </div>

            <div class="col-12">
                <button type="submit" name="edit_banned_word" class="btn btn-success mt-4" id="submitButton">{$lang.datatable.edit}</button>
            </div>
        </div>
    </form>
</div>



<script>
    $(document).ready(function() {

        $(".edit-banned-word").on("click", function () {
            smallModal('editBannedWord');


            let bwId = $(this).attr("data-id");
            let bWord = $(this).attr("data-word");
            const editBannedWordModal = $("#editBannedWord");

            editBannedWordModal.find("#word").val(bWord);
            editBannedWordModal.find("#bw_id").val(bwId);

        })

        var wabSection = document.getElementById('oaaSection');
        wabSection.classList.add('active');
        var widgetsAndBanners = document.getElementById('ordersAndApplications');
        widgetsAndBanners.classList.add('show');

        $("#bannedWords").addClass("active");

    });
</script>