<!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('Home Page')"></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 class="mb-4 d-flex justify-content-between">
                        <h3>Add Stitched Offline Items For QC</h3>
                    </div>
                    <form th:action="'/ctp/quality-control/qc-finished-item'" method="post" id="qcForm"
                        th:object="${wrapper}">
                        <div class="bg-light p-3 mb-3">
                            <h6 class="mb-3">Search Stitched Item</h6>
                            <div class="form-row">
                                <div class="col-sm-3 form-group">
                                    <stitching-offline-item
                                            v-on:stitching-offline-item-select="onItemSelect"
                                    ></stitching-offline-item>
                                </div>
                                <div class="col-sm-3 form-group">
                                    <label>Finishing Account</label>
                                    <select class="form-control" name="account-id" th:field="*{finishedAccountId}" required>
                                        <option value="">Please select</option>
                                        <option th:each="account : ${accounts}"
                                            th:value="${account.id}"
                                            th:text="${account.title}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="bg-light p-3 mb-3">
                            <h6 class="mb-3">Stitched Items</h6>
                            <stitched-item-table
                                    v-bind:items="items"
                                    v-on:remove-item="removeItem">
                            </stitched-item-table>
                        </div>
                        <div class="alert alert-danger" v-if="hasDuplicates()">Duplicate Item Selected</div>
                        <button class="btn btn-primary" type="submit" v-bind:disabled="hasDuplicates()">Submit</button>
                        <a th:href="@{/quality-control/qc-finished-items}" class="btn btn-light">Cancel</a>
                    </form>
                    <script th:inline="javascript">
                    </script>
                    <script th:src="@{/js/vendor/compressor.min.js}"></script>
                    <script th:src="@{/js/qc/finished-items-qc-form.js}"></script>
                </div>
            </main>
        </div>
        <div th:replace="_fragments :: page-footer-scripts"></div>
    </body>
</html>