<div class="djatalist-container">
    <div id="djatalist-multi-errors"></div>
    <div class="djatalist-flex-row">
        {{ text_input }}   
        <button type="button" class="djatalist-btn djatalist-blue"
            onclick="addItem('id_{{ name }}_input', 'id_{{ name }}_ul', 'id_{{ name }}_datalist')">
            Add
        </button>
    </div>
    <ul id="id_{{ name }}_ul" class="djatalist-selected-box"></ul>
</div>

{{ datalist }}

<style>
    .djatalist-flex-row {
        display: flex;
        flex-direction: row;
        max-width: 100%;
    }
    .djatalist-flex-col {
        display: flex;
        flex-direction: column;
    }
    .djatalist-btn {
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #ced4da;
        padding: .375rem .75rem;
        font-size: 1rem;
        border-radius: .25rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    .djatalist-blue {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }
    .djatalist-red {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }
    .djatalist-btn.djatalist-btn.djatalist-blue:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
    }
    .djatalist-btn.djatalist-btn.djatalist-red:hover {
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
    }
    .djatalist-flex-row>input {
        flex-grow: 1;
        display: block;
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        /* border-right: none; */
        border-radius: .25rem;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    .djatalist-flex-col>input:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    .djatalist-selected-box {
        border: 1px solid;
        /* width: 98%; */
        padding: 0.25rem;
        height: 12rem;
        overflow-y: scroll;
        margin-top: 0;
    }
    .djatalist-rm-btn {
        height: 1.5rem;
        width: 1.5rem;
        padding: 0;
        border-radius: 100%;
        cursor: pointer;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 0.5rem;
    }
    .djatalist-multi-input {
        border: none;
        background-color: transparent;
        flex-grow: 1;
        cursor: default;
    }
    #djatalist-multi-errors {
        color: red;
        /* margin-bottom: 0.5rem; */
    }
</style>

<script>
    function addItem(inputElemId, targetElemId, datalistId) {
        let inputElem = document.getElementById(inputElemId);
        let object_value = inputElem.value;
        let targetElem = document.getElementById(targetElemId);

        let isDuplicate = Array.from(targetElem.children).some(child => child.children[0].value === object_value);
        if (isDuplicate) {
            document.getElementById("djatalist-multi-errors").innerHTML = "Item already added";
            return;
        }

        if (!document.getElementById(datalistId).innerHTML.includes(`<option value="${object_value}"></option>`)) {
            document.getElementById("djatalist-multi-errors").innerHTML = "Item does not exist";
            return;
        }

        targetElem.innerHTML += `
        <li class="djatalist-flex-row">
            <input class="djatalist-multi-input" type='text' value='${object_value}' name='{{ name }}' readonly>
            <button type="button" class="djatalist-rm-btn djatalist-red" title="Remove witness"
                onclick="removeItem(this)">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
            </button>
        </li>`;
        document.getElementById("djatalist-multi-errors").innerHTML = "";
        inputElem.value = "";
    }

    function removeItem(elem) {
            let li = elem.parentElement;
            li.parentElement.removeChild(li);
        }
</script>