<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head('Add Users')"></head>
    <body>
        <div class="container-fluid">
            <header class="row page-header" th:replace="_fragments :: page-header"></header>
            <main class="row page-main">
                <div class="col-sm">
                    <div th:replace="_notices :: page-notices"></div>
                    <h3>Add Users</h3>
                    <!--item form starts-->
                    <form th:action="@{ ${user.username } ? ('/users/edit/' + ${user.username}) : '/users/edit'   }"
                          method="POST"
                          th:object="${user}"
                          th:fragment="userFragment"
                          id="userApp">
                        <input hidden="hidden" th:field="*{password}">
                        <div class="bg-light p-3 mb-3">
                            <h6 class="mb-3">User</h6>
                            <div class="form-row">
                                <div class="col-sm-3 form-group">
                                    <label>Username</label>
                                    <input class="form-control" th:readonly="${isNew}" th:field="*{username}" requried>
                                </div>
                                <div class="col-sm-3 form-group">
                                    <label>Password</label>
                                    <input class="form-control" th:field="*{newPassword}" th:readonly="${isNew}" required>
                                </div>
                                <div class="col-sm-3 form-group">
                                    <label for="enable">Enabled</label>
                                    <div class="form-check">
                                        <input class="custom-control-label:" type="checkbox" id="enable" th:field="*{enabled}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-light p-3 mb-3">
                            <h6 class="mb-3">Roles</h6>
                            <authority v-for="(auth,index) in authorities"
                                       v-bind:key="index"
                                       v-bind:index="index"
                                       v-bind:authority="auth"
                                       v-on:role-remove="removeRole"
                            ></authority>
                            <button class="btn btn-secondary btn-sm" v-on:click="addRole">
                                Add Roles
                            </button>
                        </div>
                        <div class="bg-light p-3 mb-3">
                            <h6 class="mb-3">Inventory Accounts</h6>
                            <inventory-account v-for="(account,index) in inventoryAccounts"
                                       v-bind:key="index"
                                       v-bind:index="index"
                                       v-bind:account="account"
                                       v-on:account-remove="removeAccount"
                            ></inventory-account>
                            <button class="btn btn-secondary btn-sm" v-on:click="addAccount">
                                Add Accounts
                            </button>
                        </div>
                        <div>
                            <button class="btn btn-primary" type="submit">Submit</button>
                            <a th:href="@{/users}" class="btn btn-light">Cancel</a>
                        </div>

                    </form>
                    <script th:inline="javascript">
                        window.ctp.user = [[${user}]];
                        window.ctp.roles = [[${roles}]];
                        window.ctp.accounts = [[${accounts}]];
                    </script>
                    <script th:src="@{/js/vendor/compressor.min.js}"></script>
                    <script th:src="@{/js/user-form.js}"></script>
                </div>
            </main>
        </div>
        <div th:replace="_fragments :: page-footer-scripts"></div>
    </body>
</html>