@* the select function is provided by select-row directive*@
<div ng-controller="ItemDeliveryController" select-row lca-detail>
    @* header *@
    @* header's button style is controlled by header-content-layout, the business logic(ng-show) is controlled here *@
    <div class="body_content container" style="margin-top: 10px;">
        <div header-content-layout>

            @*header content layout provide the general function like mouse over and background image*@
            <div class="header_image_button"
                 ng-style="{ backgroundImage: headerLayout.header_image1 }"
                 ng-show="lcaDetail.Status==1"
                 ng-click="createProcess()"
                 ng-mouseover="headerLayout.headerImageChange(1, 2)"
                 ng-mouseleave="headerLayout.headerImageChange(1, 1)">

                <div class="tooltip" ng-show="headerLayout.show1">
                    <div ng-style="{ width: headerLayout.tooltipWidth(1) }">
                        @Resource.StaticLabelAddNew
                    </div>
                </div>
            </div>

            <div class="header_image_button"
                 ng-style="{ backgroundImage: headerLayout.header_image4 }"
                 ng-click="editProcess(selectRow.getSelected())"
                 ng-mouseover="headerLayout.headerImageChange(4, 2)"
                 ng-mouseleave="headerLayout.headerImageChange(4, 1)"
                 ng-show="selectRow.getSelected() != null">

                <div class="tooltip" ng-show="headerLayout.show4">
                    <div ng-style="{ width: headerLayout.tooltipWidth(4) }">
                        @Resource.StaticLabelGlobal_Edit
                    </div>
                </div>
            </div>

            <div class="header_image_button"
                 ng-style="{ backgroundImage: headerLayout.header_image6 }"
                 ng-click="deleteProcess(selectRow.getSelected())"
                 ng-mouseover="headerLayout.headerImageChange(6, 2)"
                 ng-mouseleave="headerLayout.headerImageChange(6, 1)"
                 ng-show="selectRow.getSelected() != null">

                <div class="tooltip" ng-show="headerLayout.show6">
                    <div ng-style="{ width: headerLayout.tooltipWidth(6) }">
                        @Resource.StaticLabelGlobal_Delete
                    </div>
                </div>
            </div>

            @*<div class="header_image_button"
                     ng-style="{ backgroundImage: headerLayout.header_image8 }"
                     ng-click="modelBuilder.export(model)"
                     ng-mouseover="headerLayout.headerImageChange(8, 2)"
                     ng-mouseleave="headerLayout.headerImageChange(8, 1)">

                    <div class="tooltip" ng-show="headerLayout.show8">
                        <div ng-style="{ width: tooltipWidth(8) }">
                            @Resource.StaticLabelExportBOM
                        </div>
                    </div>
                </div>*@

            @*<div class="header_image_button"
                     ng-style="{ backgroundImage: headerLayout.header_image9 }"
                     ng-click="fileImportModal.show = true;"
                     ng-mouseover="headerLayout.headerImageChange(9, 2)"
                     ng-mouseleave="headerLayout.headerImageChange(9, 1)">

                    <div class="tooltip" ng-show="headerLayout.show9">
                        <div ng-style="{ width: tooltipWidth(9) }">
                            @Resource.StaticLabelImprotBOM
                        </div>
                    </div>
                </div>*@

            @*<div class="header_image_button"
                     ng-style="{ backgroundImage: headerLayout.header_image17 }"
                     ng-click="quoteModal.show = true;"
                     ng-mouseover="headerLayout.headerImageChange(17, 2)"
                     ng-mouseleave="headerLayout.headerImageChange(17, 1)">

                    <div class="tooltip" ng-show="headerLayout.show17">
                        <div ng-style="{ width: tooltipWidth(17) }">
                            @Resource.StaticLabelReferenceData
                        </div>
                    </div>
                </div>*@

            @*<div class="header_image_button"
                 ng-style="{ backgroundImage: headerLayout.header_image11 }"
                 ng-click="search_box = !search_box"
                 ng-mouseover="headerLayout.headerImageChange(11, 2)"
                 ng-mouseleave="headerLayout.headerImageChange(11, 1)">

                <div class="tooltip" ng-show="headerLayout.show11">
                    <div ng-style="{ width: tooltipWidth(11) }">
                        @Resource.StaticLabelGlobal_Search
                    </div>
                </div>
            </div>*@

            <div class="header_search" ng-show="!Table_Edit_State">
                <input type="text" class="transition" ng-model="searchText" ng-class="{ expand: search_box }" />
            </div>

        </div>
    </div>
    @* end of header *@

    @* the body of index *@
    <div class="body_content" ng-model="currentPage" ng-init="currentPage = 1">
        <div class="table_overflow">
            <table class="table">
                <thead>
                    <tr class="table-active" style="text-align:center">
                        <th>@Resource.RAItemDeliveryMaterialNo</th>
                        <th>@Resource.RAItemDeliveryMachineName</th>
                        @*<th>工厂</th>*@
                        <th>@Resource.RAItemDeliveryQty</th>
                        <th>@Resource.RAItemDeliveryTotalWeight</th>
                        <th>@Resource.RAItemDeliveryQtyUnit (@Resource.Ton)</th>
                        @*<th>出货地址</th>*@
                        @*<th>路程一(陸運)</th>*@
                        @*<th>路程二海運</th>*@
                        @*<th>路程三陸運</th>*@
                        @*<th>路程一TKM</th>*@
                        <th>@Resource.RAItemDeliveryS2ShippingTKM</th>
                        @*<th>路程三陸運TKM</th>*@
                        <th>@Resource.RAItemDeliveryLandCarriageTotalTKM</th>
                        <th>@Resource.RAItemDeliveryLandCarriageCO2e</th>
                        <th>@Resource.RAItemDeliveryShippingCO2e</th>
                        <th>@Resource.RAItemDeliveryAirTransportCO2e</th>
                        @*<th>交易条件</th>*@
                    </tr>
                </thead>
                <tbody ng-mouseleave="setHoverColumnRow(-1, -1, -1)">
                    <tr class="survey_order_table_row"
                        ng-class="{ selected: row == selectRow.getSelected() }"
                        ng-click="selectRow.select(row)"
                        ng-dblclick="editProcess(row)"
                        ng-repeat="row in model">
                        <td ng-bind="row.MaterialNo"></td>
                        <td ng-bind="row.ModelName"></td>
                        @*<td ng-bind="row.Fab"></td>*@
                        <td ng-bind="row.DeliveryAmount"></td>
                        <td ng-bind="row.TotalWeightKg"></td>
                        <td ng-bind="row.TotalWeightT"></td>
                        @*<td ng-bind="row.DeliveryAddr"></td>*@
                        @*<td ng-bind="row.TransportLand"></td>*@
                        @*<td ng-bind="row.TransportSea"></td>*@
                        @*<td ng-bind="row.TransportLand3"></td>*@
                        @*<td ng-bind="row.TransportTkmland"></td>*@
                        <td ng-bind="row.TransportTkmsea"></td>
                        @*<td ng-bind="row.TransportTkmland3"></td>*@
                        <td ng-bind="row.TotalTkmland"></td>
                        <td ng-bind="row.TransportLandCo2e"></td>
                        <td ng-bind="row.TransportSeaCo2e"></td>
                        <td ng-bind="row.TransportAirCo2e"></td>
                        @*<td ng-bind="row.TradeCondition"></td>*@
                    </tr>
                    <tr style="border-bottom: solid 1px rgb(214, 214, 214);">
                        <td ng-show="model.length == 0">
                            @Resource.NoData
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        @* end of the body of index *@

        @*<page passed-total-page="Math.ceil((model | filter : searchText).length / 10)" passed-current-page="currentPage"></page>*@

        @* the detail modal form *@
        <form name="editForm" novalidate>
            <table-edit-modal display-option="modalFormOption" passed-form="editForm">
                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.MaterialNo</label>
                    <div class="col col-sm-8">
                        <input type="text"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.MaterialNo" />
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryMachineName</label>
                    <div class="col col-sm-8">
                        <input type="text"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.ModelName" />
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryFAB</label>
                    <div class="col col-sm-8">
                        <input type="text"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.Fab" />
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryQty</label>
                    <div class="col col-sm-8">
                        <input name="deliveryAmount"
                               type="number" step="any"
                               max="{{CONSTANTS.MAXNUMVALUE}}"
                               ng-model="selectRow.toBeEdit.DeliveryAmount">
                    </div>
                    <div class="validation_block">
                        <div ng-show="editForm.deliveryAmount.$dirty">
                            <small ng-show="editForm.deliveryAmount.$error.max">@Resource.MaxValidateMsg {{CONSTANTS.MAXNUMVALUE}}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryTotalWeight</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightKg"
                               type="number" step="any"
                               max="{{CONSTANTS.MAXNUMVALUE}}"
                               ng-model="selectRow.toBeEdit.TotalWeightKg"
                               ng-change="changeTotalWeight(selectRow.toBeEdit)">
                    </div>
                    <div class="validation_block">
                        <div ng-show="editForm.totalWeightKg.$dirty">
                            <small ng-show="editForm.totalWeightKg.$error.max">@Resource.MaxValidateMsg {{CONSTANTS.MAXNUMVALUE}}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryQtyUnit (@Resource.Ton)</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TotalWeightT">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryAddress</label>
                    <div class="col col-sm-8">
                        <input type="text"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.DeliveryAddr" />
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS1LandCarriage</label>
                    <div class="col col-sm-8">
                        <input name="transportLand"
                               type="number" step="any"
                               max="{{CONSTANTS.MAXNUMVALUE}}"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.TransportLand"
                               ng-change="changeTransportLand(selectRow.toBeEdit)">
                    </div>
                    <div class="validation_block">
                        <div ng-show="editForm.transportLand.$dirty">
                            <small ng-show="editForm.transportLand.$error.max">@Resource.MaxValidateMsg {{CONSTANTS.MAXNUMVALUE}}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS1TKM</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportTkmland">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS2Shipping</label>
                    <div class="col col-sm-8">
                        <input name="transportSea"
                               type="number" step="any"
                               max="{{CONSTANTS.MAXNUMVALUE}}"
                               ng-model="selectRow.toBeEdit.TransportSea"
                               ng-change="changeTransportSea(selectRow.toBeEdit)">
                    </div>
                    <div class="validation_block">
                        <div ng-show="editForm.transportSea.$dirty">
                            <small ng-show="editForm.transportSea.$error.max">@Resource.MaxValidateMsg {{CONSTANTS.MAXNUMVALUE}}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS2ShippingTKM</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportTkmsea">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS2AirTransport</label>
                    <div class="col col-sm-8">
                        <input name="transportAir"
                               type="number" step="any"
                               max="{{CONSTANTS.MAXNUMVALUE}}"
                               ng-model="selectRow.toBeEdit.TransportAir"
                               ng-change="changeTransportAir(selectRow.toBeEdit)">
                    </div>
                    <div class="validation_block">
                        <div ng-show="editForm.transportAir.$dirty">
                            <small ng-show="editForm.transportAir.$error.max">@Resource.MaxValidateMsg {{CONSTANTS.MAXNUMVALUE}}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS2AirTransportTKM</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportTkmair">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS3LandCarriage</label>
                    <div class="col col-sm-8">
                        <input name="transportLand3"
                               type="number" step="any"
                               max="{{CONSTANTS.MAXNUMVALUE}}"
                               ng-model="selectRow.toBeEdit.TransportLand3"
                               ng-change="changeTransportLand3(selectRow.toBeEdit)">
                    </div>
                    <div class="validation_block">
                        <div ng-show="editForm.transportLand3.$dirty">
                            <small ng-show="editForm.transportLand3.$error.max">@Resource.MaxValidateMsg {{CONSTANTS.MAXNUMVALUE}}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryS3LandCarriageTKM</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportTkmland3">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryLandCarriageTotalTKM</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TotalTkmland">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryLandCarriageCO2e</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportLandCo2e">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryShippingCO2e</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportSeaCo2e">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryAirTransportCO2e</label>
                    <div class="col col-sm-8">
                        <input name="totalWeightT"
                               type="number" step="any"
                               readonly="readonly"
                               ng-model="selectRow.toBeEdit.TransportAirCo2e">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">@Resource.RAItemDeliveryTradeCondition</label>
                    <div class="col col-sm-8">
                        <input type="text" ng-model="selectRow.toBeEdit.TradeCondition" />
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="survey_btn_wrap">
                    <div class="survey_content" style="float: right">
                        <div class="row">
                            <button class="header_button"
                                    style="float: left; margin-left: 16px;"
                                    ng-click="save()"
                                    ng-show="lcaDetail.Status==1"
                                    ng-disabled="editForm.$invalid">
                                @Resource.StaticLabelGlobal_Save
                            </button>
                        </div>
                    </div>
                </div>
            </table-edit-modal>
        </form>
        @* end of the detail modal form *@

        @*<table-edit-modal display-option="fileImportModal">
                <div file-import-process import-option="fileImportOptions"></div>
            </table-edit-modal>*@

        <table-edit-modal display-option="quoteModal">
            <div></div>
            <div quote quote-options="quoteOptions"></div>
        </table-edit-modal>
        @*<div class="footnote">
                @Html.Raw(@Resource.FootnoteRefrigerant.Replace("\r\n", "<br>"))
            </div>*@
    </div>
</div>