{% extends "nav.html" %} {% block content %}
<div class="container-fluid">
    <div class="row p-2 d-flex justify-content-center">
        <div class="col">
            <table id="device-table" class="table table-hover">
                <thead>
                    <tr>
                        <th>Up</th>
                        <th>UUID</th>
                        <th>Name</th>
                        <th>Model</th>
                        <th>Revision</th>
                        <th>Feed</th>
                        <th>Flavor</th>
                        <th>Installed Firmware</th>
                        <th>Target Firmware</th>
                        <th>Update Mode</th>
                        <th>State</th>
                        <th>Force Update</th>
                        <th>Progress</th>
                        <th>Last IP</th>
                        <th>Last Seen</th>
                    </tr>
                </thead>
                <tbody id="devices-list"></tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal" id="device-config-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configure Devices</h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <input
                    id="rollout-selected-feed"
                    class="form-control mb-3"
                    placeholder="Feed"
                />
                <input
                    id="rollout-selected-flavor"
                    class="form-control mb-3"
                    placeholder="Flavor"
                />
                <select class="form-select" id="selected-fw"></select>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>
                <button
                    type="button"
                    class="btn btn-outline-light"
                    data-bs-dismiss="modal"
                    onclick="updateDeviceConfig()"
                >
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="device-rename-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Rename Device</h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <input
                    id="device-selected-name"
                    class="form-control"
                    placeholder="Name"
                />
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>
                <button
                    type="button"
                    class="btn btn-outline-light"
                    data-bs-dismiss="modal"
                    onclick="updateDeviceName()"
                >
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', path='js/devices.js') }}"></script>
{% endblock content %}