<div id="package-rebuild-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form id="package-rebuild-form" onsubmit="return false">
                <div class="modal-header">
                    <h4 class="modal-title">Rebuild depending 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-rebuild-repository-input" class="col-3 col-form-label">repository</label>
                        <div class="col-9">
                            <select id="package-rebuild-repository-input" class="form-control" name="repository" required>
                                {% for repository in repositories %}
                                    <option value="{{ repository.id }}" data-repository="{{ repository.repository }}" data-architecture="{{ repository.architecture }}">{{ repository.repository }} ({{ repository.architecture }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="package-rebuild-dependency-input" class="col-3 col-form-label">dependency</label>
                        <div class="col-9">
                            <input id="package-rebuild-dependency-input" type="text" class="form-control" placeholder="packages dependency" name="package" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" onclick="packagesRebuild()"><i class="bi bi-play"></i> rebuild</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const packageRebuildModal = document.getElementById("package-rebuild-modal");
    const packageRebuildForm = document.getElementById("package-rebuild-form");

    const packageRebuildDependencyInput = document.getElementById("package-rebuild-dependency-input");
    const packageRebuildRepositoryInput = document.getElementById("package-rebuild-repository-input");

    function packagesRebuild() {
        const packages = packageRebuildDependencyInput.value;
        const repository = getRepositorySelector(packageRebuildRepositoryInput);
        if (packages) {
            bootstrap.Modal.getOrCreateInstance(packageRebuildModal).hide();
            const onSuccess = update => `Repository rebuild has been run for packages which depend on ${update}`;
            const onFailure = error => `Repository rebuild failed: ${error}`;
            doPackageAction("/api/v1/service/rebuild", [packages], repository, onSuccess, onFailure);
        }
    }

    ready(_ => {
        packageRebuildModal.addEventListener("shown.bs.modal", _ => {
            const option = packageRebuildRepositoryInput.querySelector(`option[value="${repository.architecture}-${repository.repository}"]`);
            option.selected = "selected";

        });
        packageRebuildModal.addEventListener("hidden.bs.modal", _ => {
            packageRebuildForm.reset();
        });
    });
</script>
