<div id="addForm" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">add new packages</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="package" class="col-sm-2 col-form-label">package</label>
                    <div class="col-sm-10">
                        <input id="package" type="text" list="knownPackages" class="form-control" placeholder="AUR package" name="package" required>
                        <datalist id="knownPackages"></datalist>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close</button>
                <button type="button" class="btn btn-success" data-bs-dismiss="modal" onclick="requestPackages()">request</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addPackages()">add</button>
            </div>
        </div>
    </div>
</div>

<div id="failedForm" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h4 class="modal-title">failed</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <p>Packages update has failed.</p>
                <p id="errorDetails"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">close</button>
            </div>
        </div>
    </div>
</div>

<div id="successForm" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h4 class="modal-title">success</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <p>Packages update has been run.</p>
                <ul id="successDetails"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">close</button>
            </div>
        </div>
    </div>
</div>