{% extends "nav.html.jinja" %}
{% 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">
                </table>
            </div>
        </div>
    </div>
    <div class="modal modal-lg fade" id="device-config-modal">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Devices</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="device-name-form">
                        <div class="input-group mb-3">
                            <span class="input-group-text">Name</span>
                            <input id="device-name" class="form-control" />
                            <button type="submit" class="btn btn-outline-light">Apply</button>
                        </div>
                    </form>
                    <hr>
                    <ul class="nav nav-underline nav-justified w-100" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active"
                                    aria-current="page"
                                    id="rollout-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#rollout-tab-content"
                                    type="button"
                                    role="tab">Software Rollout</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link"
                                    id="manual-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#manual-tab-content"
                                    type="button"
                                    role="tab">Manual Software</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link"
                                    id="latest-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#latest-tab-content"
                                    type="button"
                                    role="tab">Latest Software</button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3">
                        <div class="tab-pane active" id="rollout-tab-content">
                            <form id="device-software-rollout-form" class="needs-validation" novalidate>
                                <div class="form-group mb-3">
                                    <div class="input-group mb-3 has-validation">
                                        <span class="input-group-text">Feed</span>
                                        <input id="device-selected-feed"
                                               class="form-control"
                                               value="default"
                                               required />
                                        <div class="invalid-feedback">Feed missing. Use "default" if working with a single feed.</div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-outline-light w-100">Use Software Rollout</button>
                            </form>
                        </div>
                        <div class="tab-pane" id="manual-tab-content">
                            <form id="device-software-manual-form" class="needs-validation" novalidate>
                                <div class="form-group mb-3">
                                    <div class="input-group mb-3 has-validation">
                                        <span class="input-group-text">Software</span>
                                        <select class="form-control"
                                                id="selected-sw"
                                                data-size="5"
                                                data-style-base="form-control"
                                                title="Select software"
                                                data-live-search="true"
                                                data-live-search-normalize="true"
                                                required></select>
                                        <div class="invalid-feedback">Software missing.</div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-outline-light w-100">Use Manual Software</button>
                            </form>
                        </div>
                        <div class="tab-pane" id="latest-tab-content">
                            <form id="device-software-latest-form" class="needs-validation" novalidate>
                                <button type="submit" class="btn btn-outline-light w-100">Use Latest Software</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', path='js/devices.js') }}"></script>
{% endblock content %}
