source: target/classes/templates/add_coalition.html@ ac151d1

<div class="container mt-5">
    <h2>Додај коалиција</h2>
    <form th:action="@{/admin/coalition/add}" th:object="${coalitionForm}" method="post">
        <input type="hidden" th:field="*{id}" />

        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" th:field="*{name}" class="form-control" required />
        </div>

        <div class="form-group">
            <label for="moto">Moto:</label>
            <input type="text" id="moto" th:field="*{motto}" class="form-control" required />
        </div>

        <div class="form-group">
            <label for="electionRealization">Election Realization:</label>
            <select id="electionRealization" th:field="*{electionRealization}" class="form-select">
                <option th:each="realization : ${realizations}" th:value="${realization.id}" th:text="${realization.name}"></option>
            </select>
        </div>

        <div class="container mt-5">
            <div class="row">
                <div class="col-md-5">
                    <label for="leftSelect">Сите партии</label>
                    <select id="leftSelect" class="form-control" size="10" multiple>
                        <option th:each="party : ${parties}" th:value="${party.id}" th:text="${party.name}"></option>
                    </select>
                </div>
                <div class="col-md-2 text-center">
                    <button id="moveRight" class="btn btn-primary mb-2">&gt;&gt;</button>
                    <button id="moveLeft" class="btn btn-primary mb-2">&lt;&lt;</button>
                </div>
                <div class="col-md-5">
                    <label for="rightSelect">Избрани партии</label>
                    <select id="rightSelect" class="form-control" size="10" name="parties"  multiple>
                        <!-- Options moved from left select will appear here -->
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary">Зачувај</button>
        </div>
    </form>
</div>

<div class="container-fluid">
    <table class="table table-striped table-hover">
        <thead class="table-header">
        <tr>
            <th>#</th>
            <th>Име</th>
            <th>Мото</th>
            <th>Реализација</th>
            <th>Членови на коалиција</th>
        </tr>
        </thead>
        <tbody>
        <tr th:onclick="|window.location.href='/admin/coalition/${coalition.id}';|" th:each="coalition, iter : ${coalitions}">
            <td th:text="${iter.count}"></td>
            <td th:text="${coalition?.name}"></td>
            <td th:text="${coalition?.motto}"></td>
            <td th:text="${coalition?.electionRealization?.name}"></td>
            <td th:text="${coalition?.getPartiesString()}"></td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    document.getElementById('moveRight').addEventListener('click', function(e) {
        e.preventDefault();
        moveSelectedOptions('leftSelect', 'rightSelect');
    });

    document.getElementById('moveLeft').addEventListener('click', function(e) {
        e.preventDefault();
        moveSelectedOptions('rightSelect', 'leftSelect');
    });

    function moveSelectedOptions(sourceId, destinationId) {
        let sourceSelect = document.getElementById(sourceId);
        let destinationSelect = document.getElementById(destinationId);

        let selectedOptions = Array.from(sourceSelect.selectedOptions);
        selectedOptions.forEach(option => {
            destinationSelect.appendChild(option);
        });
    }
</script>