<!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('Edit Processes')"></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>Edit Processes</h3>
                    <!--item form starts-->
                    <form th:href="@{/processes/edit}"
                          method="POST"
                          th:object="${processWrapper}"
                          th:fragment="processFragment"
                          id="processApp">
                        <div class="bg-light p-3 mb-3">
                            <h6 class="mb-3">Processes</h6>
                            <process-item
                                    v-for="(process,index) in processes"
                                    v-bind:index="index"
                                    v-bind:key="index"
                                    v-bind:process="process"
                                    v-on:remove-process-item="removeProcess">
                            </process-item>
                            <button class="btn btn-secondary btn-sm" v-on:click="addNewProcess">
                                Add Process
                            </button>
                        </div>
                        <div>
                            <button class="btn btn-primary" type="submit">Submit</button>
                            <a th:href="@{/processes}" class="btn btn-light">Cancel</a>
                        </div>

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