{% 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="rollout-table" class="table table-hover">
                </table>
            </div>
        </div>
    </div>
    {% if compare_permissions(["rollout.write"], request.user.permissions) %}
        <div class="modal modal-lg fade" id="rollout-create-modal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create Rollout</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <form id="rollout-form" class="needs-validation" novalidate>
                        <div class="modal-body">
                            <div class="input-group mb-3 has-validation">
                                <span class="input-group-text">Name</span>
                                <input class="form-control" id="rollout-selected-name" required />
                                <div class="invalid-feedback">Name missing.</div>
                            </div>
                            <div class="input-group mb-3 has-validation">
                                <span class="input-group-text">Feed</span>
                                <input class="form-control" id="rollout-selected-feed" required />
                                <div class="invalid-feedback">Feed missing. Use "default" if working with a single feed.</div>
                            </div>
                            <div class="form-group">
                                <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>
                                <button type="submit" class="btn btn-outline-light w-100">Save changes</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% else %}
        <div class="modal modal-lg fade" id="rollout-create-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 rollouts.</div>
                        <form id="rollout-form">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <script src="{{ url_for('static', path='js/rollouts.js') }}"></script>
{% endblock content %}
