{% extends "nav.html.jinja" %}
{% block content %}
    <div class="container-fluid">
        <div class="row p-2 pt-4 g-4 d-flex justify-content-center">
            <div class="col">
                <table id="software-table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Version</th>
                            <th>Compatibility</th>
                            <th>Size</th>
                        </tr>
                    </thead>
                    <tbody id="software-list">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% if compare_permissions(["software.write"], request.user.permissions) %}
        <div class="modal modal-lg fade" id="upload-modal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <ul class="nav nav-underline nav-justified w-100" role="tablist">
                            <li class="nav-item">
                                <button class="nav-link active"
                                        aria-current="page"
                                        id="upload-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#upload-tab-content"
                                        type="button"
                                        role="tab">Upload File</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link"
                                        id="url-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#url-tab-content"
                                        type="button"
                                        role="tab">Remote URL</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane active" id="upload-tab-content">
                            <div class="modal-body">
                                <form id="upload-form">
                                    <div class="row g-3 row-cols-1">
                                        <div id="upload-alerts"></div>
                                        <div class="col">
                                            <input class="form-control"
                                                   type="file"
                                                   accept=".swu"
                                                   id="file-upload"
                                                   name="file" />
                                        </div>
                                        <div class="col">
                                            <input class="btn btn-outline-light w-100"
                                                   id="file-upload-submit"
                                                   type="submit"
                                                   value="Upload" />
                                            <div class="progress border border-light bg-dark d-none"
                                                 style="height: 36px"
                                                 role="progressbar"
                                                 aria-valuenow="0"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                                <div class="progress-bar progress-bar-striped bg-success progress-bar-animated"
                                                     id="upload-progress"
                                                     style="width: 0%">0%</div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane" id="url-tab-content">
                            <div class="modal-body">
                                <form id="url-form">
                                    <div class="row g-3 row-cols-1">
                                        <div id="url-alerts"></div>
                                        <div class="col">
                                            <div class="input-group">
                                                <span class="input-group-text">File URL</span>
                                                <input class="form-control" type="url" id="file-url" />
                                            </div>
                                        </div>
                                        <div class="col">
                                            <input class="btn btn-outline-light w-100"
                                                   id="url-submit"
                                                   type="submit"
                                                   value="Upload" />
                                            <div class="progress border border-light bg-dark d-none"
                                                 style="height: 36px"
                                                 role="progressbar"
                                                 aria-valuenow="0"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                                <div class="progress-bar progress-bar-striped bg-success progress-bar-animated"
                                                     id="url-progress"
                                                     style="width: 0%">0%</div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="modal modal-lg fade" id="upload-modal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        Unavailable
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning m-0" role="alert">You do not have permission to add software files.</div>
                        <form id="upload-form">
                        </form>
                        <form id="url-form">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <script src="{{ url_for('static', path='js/util.js') }}"></script>
    <script src="{{ url_for('static', path='js/software.js') }}"></script>
{% endblock content %}
