fields.html

<!--
  ~ Copyright (c) 2022 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0
  ~
  ~ SPDX-License-Identifier: EPL-2.0
  -->
<!-- Scrollable modal -->
<div id="fieldsModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                Adjust fields for things table
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="input-group input-group-sm mb-1 mt-1 has-validation">
                    <label class="input-group-text">Field Path</label>
                    <input type="text" class="form-control" id="fieldPath"></input>
                    <button class="btn btn-outline-secondary btn-sm" id="fieldCreate" data-bs-toggle="tooltip"
                        title="Add a new field with the given path">
                        <i class="bi bi-plus-square"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="fieldDelete" data-bs-toggle="tooltip"
                        title="Delete selected field">
                        <i class="bi bi-trash3"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="fieldUp">
                        <i class="bi bi-chevron-up"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="fieldDown">
                        <i class="bi bi-chevron-down"></i>
                    </button>
                    <div class="invalid-feedback"></div>
                </div>
                
                <table class="table table-striped table-hover table-sm has-validation">
                    <tbody id="fieldList"></tbody>
                </table>
                <h6>Field Details</h6>
                <div class="input-group input-group-sm mb-1">
                    <label class="input-group-text">Field Label</label>
                    <input type="text" class="form-control form-control-sm" id="fieldLabel"></input>
                    <button class="btn btn-outline-secondary btn-sm" id="fieldUpdate"
                        data-bs-toggle="tooltip" title="Save selected field details">
                        <i class="bi bi-save2"></i>
                        Save
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>