@* the select function is provided by select-row directive*@
    <div ng-controller="LCATransportCtrl" 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: 0px; max-width: 100%;">
        <div header-content-layout>
            <div style="margin: 10px 0 10px 0;" ng-show="lcaDetail.isProductLCA">
                <label for="AllocationUpStream">@Resource.UpstreamTransport @Resource.Allocation</label>
                <select name="AllocationUpStreamN" id="Allocation"
                        ng-model="AllocationUpstream" style="width:130px"
                        ng-change="onAllocationUpstreamChange(AllocationUpstream)"
                        ng-disabled="lcaDetail.Status==5"
                        class="table_text_select">
                    <option value="-1">-- @Resource.StaticLabelGlobal_Select --</option>
                    <option value="99">@Resource.AllocationNon</option>
                    <option value="0">@Resource.AllocationWeight</option>
                    <option value="1">@Resource.AllocationAreaSize</option>
                    <option value="2">@Resource.AllocationPcsPerYear</option>
                    <option value="3">@Resource.AllocationEconomic</option>
                    <option value="4">@Resource.AllocationWorkHour</option>
                </select>
                <label for="Ratio">@Resource.Ratio {{RatioUpstream}} </label>
            </div>

            <div style="margin: 10px 0 0 0;" ng-show="lcaDetail.isProductLCA">
                <label for="AllocationDownStream">@Resource.DownstreamTransport @Resource.Allocation</label>
                <select name="AllocationDownStreamN" id="Allocation"
                        ng-model="AllocationDownstream" style="width:130px"
                        ng-change="onAllocationDownstreamChange(AllocationDownstream)"
                        ng-disabled="lcaDetail.Status==5"
                        class="table_text_select">
                    <option value="-1">-- @Resource.StaticLabelGlobal_Select --</option>
                    <option value="99">@Resource.AllocationNon</option>
                    <option value="0">@Resource.AllocationWeight</option>
                    <option value="1">@Resource.AllocationAreaSize</option>
                    <option value="2">@Resource.AllocationPcsPerYear</option>
                    <option value="3">@Resource.AllocationEconomic</option>
                    <option value="4">@Resource.AllocationWorkHour</option>
                </select>
                <label for="Ratio">@Resource.Ratio {{RatioDownstream}} </label>
            </div>

        </div>
        <div header-content-layout style="margin-top: 10px;">
            <div style="float: right;color:red;">
                <div ng-if="!lcaDetail.HasProductLifeCycle_DeliverySales">
                    @Resource.HasNoDeliverySalesText
                </div>
            </div>

            @*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<5"
                 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, 'csv')"
                 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" ng-model="searchText" ng-class="{expand: search_box}" class="transition" />
            </div>

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

    @* the body of index *@
    <div class="body_content">
        <div class="table_overflow">
            <table class="table">
                <thead>
                    <tr class="table-active" style="text-align:center">
                        <th>@Resource.Type</th>
                        <th>@Resource.TransportDate</th>
                        <th>@Resource.ShipmentNo</th>
                        @*<th>@Resource.ModeOfTransport</th>*@
                        <th>@Resource.StartLocation</th>
                        <th>@Resource.EndLocation</th>
                        <th>@Resource.TransportDistance (km)</th>
                        @*<th>@Resource.TransportShipmentQuantity</th>*@
                        <th>@Resource.ShipmentProductWeight (kg)</th>
                        <th>@Resource.Parameter</th>
                        <th>@Resource.ParameterUnit</th>
                        <th>@Resource.MataDataDQI</th>
                        <th>@Resource.TransportScalar</th>
                        <th>@Resource.KgCO2e</th>
                    </tr>
                </thead>
                <tbody ng-mouseleave="setHoverColumnRow(-1, -1, -1)">
                    <tr class="survey_order_table_row"
                        ng-repeat="row in model | filter : searchText | smarterLimitTo : 10 : (currentPage - 1) * 10"
                        ng-class="{ selected: row == selectRow.getSelected() }"
                        ng-click="selectRow.select(row)"
                        ng-dblclick="editProcess(row)">
                        <td>
                            <span ng-show="row.TransportType == 0">@Resource.UpstreamTransport</span>
                            <span ng-show="row.TransportType == 1">@Resource.DownstreamTransport</span>
                        </td>
                        <td ng-bind="row.TransportDate | date : 'yyyy/MM/dd'"></td>
                        <td ng-bind="row.JourneyNO"></td>
                        @*<td ng-bind="row.ModeOfTransport"></td>*@
                        <td ng-bind="row.StartLocation"></td>
                        <td ng-bind="row.EndLocation"></td>
                        <td ng-bind="row.TransportDistance" align="right"></td>
                        @*<td ng-bind="row.TransportQuantity" align="right"></td>*@
                        <td ng-bind="row.TransportWeight" align="right"></td>
                        <td ng-bind="row.ParameterValue" align="right"></td>
                        <td ng-bind="row.ParameterUnit"></td>
                        <td>
                            <span ng-if="row.DQI == 0">@Resource.MetaDataDQI1</span>
                            <span ng-if="row.DQI == 1">@Resource.MetaDataDQI2</span>
                            <span ng-if="row.DQI == 2">@Resource.MetaDataDQI3</span>
                        </td>
                        <td align="right">{{ row.Scalar | number : 4}}</td>
                        <td align="right">{{ row.KgCO2e | number : 4}}</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.length / 10)" passed-current-page="currentPage"></page>

        <div class="summary">
            <table class="table" style="table-layout: fixed;">
                <thead>
                    <tr class="table-active" align="center">
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>@Resource.Type</th>
                        <th>@Resource.KgCO2e</th>
                        <th ng-show="lcaDetail.isProductLCA">@Resource.AllocatedKgCO2e</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-show="model.length > 0" style="background-color: #F5F5F5"
                        ng-repeat="sum in summary">
                        <td class="td-1"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <span ng-show="sum.TransportType == 0">@Resource.UpstreamTransport</span>
                            <span ng-show="sum.TransportType == 1">@Resource.DownstreamTransport</span>
                        </td>
                        <td align="right">{{sum.totalKgCO2e|number:4}}</td>
                        <td ng-if="sum.TransportType == 0" ng-show="lcaDetail.isProductLCA" align="right">{{sum.totalKgCO2e * RatioUpstream |number:4}}</td>
                        <td ng-if="sum.TransportType == 1" ng-show="lcaDetail.isProductLCA" align="right">{{sum.totalKgCO2e * RatioDownstream |number:4}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        @* the detail modal form *@
        <form name="editForm">
            <table-edit-modal display-option="modalFormOption" passed-form="editForm">
                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.Type
                    </label>
                    <div class="col col-sm-8">
                        <select name="TransportType" id="Allocation" ng-model="selectRow.toBeEdit.TransportType" required">
                            <option value="">-- @Resource.StaticLabelGlobal_Select --</option>
                            <option value="0">@Resource.UpstreamTransport</option>
                            <option value="1">@Resource.DownstreamTransport</option>
                        </select>
                        <div class="validation_block">
                            <div ng-show="editForm.TransportType.$dirty">
                                <small ng-show="editForm.TransportType.$error.required">
                                    @Resource.RequiredMessage
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.TransportDate
                        <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipTransportDate"></span>
                    </label>
                    <div class="col col-sm-8">
                        <input name="transportDate"
                               type="text"
                               placeholder="yyyy/MM/dd"
                               ng-model="selectRow.toBeEdit.TransportDate"
                               ng-pattern="/^((\d{4})\/(\d{2})\/(\d{2}))$/">
                        <div class="validation_block">
                            <div ng-show="editForm.transportDate.$dirty">
                                <small ng-show="editForm.transportDate.$error.pattern">
                                    @Resource.DateValidateMsg
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

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

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

                @*<div class="row">
            <label class="col-sm-4 col-form-label">
                @Resource.ModeOfTransport
                <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipModeOfTransport"></span>
            </label>
            <div class="col col-sm-8">
                <select name="modeOfTransport"
                        required
                        ng-model="selectRow.toBeEdit.ModeOfTransport"
                        ng-options="value for (key, value) in modeOfTransports">
                    <option value="">-- @Resource.StaticLabelGlobal_Select --</option>
                </select>
            </div>
            <div class="validation_block">
                <div ng-show="editForm.modeOfTransport.$dirty">
                    <small ng-show="editForm.modeOfTransport.$error.required">
                        @Resource.SelectValidateMsg
                    </small>
                </div>
            </div>
        </div>*@

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.StartLocation
                        <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipStartLocation"></span>
                    </label>
                    <div class="col col-sm-8">
                        <input type="text" ng-model="selectRow.toBeEdit.StartLocation">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.EndLocation
                        <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipEndLocation"></span>
                    </label>
                    <div class="col col-sm-8">
                        <input type="text" ng-model="selectRow.toBeEdit.EndLocation">
                    </div>
                    <div class="validation_block"></div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.TransportDistance (km)
                        <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipTransportDistance"></span>
                    </label>
                    <div class="col col-sm-8">
                        <input name="transportDistance"
                               type="number" step="any"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.TransportDistance"
                               ng-change="updateScalar(selectRow.toBeEdit)">
                        <div class="validation_block">
                            <div ng-show="editForm.transportDistance.$dirty">
                                <small ng-show="editForm.transportDistance.$error.required &&
                    !editForm.transportDistance.$error.number">
                                    @Resource.RequiredMessage
                                </small>
                                <small ng-show="editForm.transportDistance.$error.number">
                                    @Resource.NumberValidateMsg
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                @*<div class="row">
            <label class="col-sm-4 col-form-label">
                @Resource.TransportVanType
                <span tooltip-placement="right" class="tooltip-directive" tooltip-html-unsafe="@Html.Raw(@Resource.TooltipTransportVanType.Replace("\r\n", "<br>"))"></span>
            </label>
            <div class="col col-sm-8">
                <select name="transportType"
                        required
                        ng-model="selectRow.toBeEdit.TransportType"
                        ng-options="value for (key, value) in transportTypes">
                    <option value="">-- @Resource.StaticLabelGlobal_Select --</option>
                </select>
            </div>
            <div class="validation_block">
                <div ng-show="editForm.transportType.$dirty">
                    <small ng-show="editForm.transportType.$error.required">
                        @Resource.SelectValidateMsg
                    </small>
                </div>
            </div>
        </div>*@
                @*
        <div class="row">
            <label class="col-sm-4 col-form-label">
                @Resource.TransportShipmentQuantity
                <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipTransportQuantity"></span>
            </label>
            <div class="col col-sm-8">
                <input name="transportQuantity"
                       type="number" step="any"
                       placeholder="@Resource.RequiredMessage"
                       required
                       ng-model="selectRow.toBeEdit.TransportQuantity"
                       ng-change="updateScalar(selectRow.toBeEdit)">
                <div class="validation_block">
                    <div ng-show="editForm.transportQuantity.$dirty">
                        <small ng-show="editForm.transportQuantity.$error.required &&
            !editForm.transportQuantity.$error.number">
                            @Resource.RequiredMessage
                        </small>
                        <small ng-show="editForm.transportQuantity.$error.number">
                            @Resource.NumberValidateMsg
                        </small>
                    </div>
                </div>
            </div>
        </div>
                *@
                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.ShipmentProductWeight (kg)
                        <span tooltip-placement="right" class="tooltip-directive" tooltip="@Resource.TooltipProductWeightIncludingWrappingMaterials"></span>
                    </label>
                    <div class="col col-sm-8">
                        <input name="transportWeight"
                               type="number" step="any"
                               placeholder="@Resource.RequiredMessage"
                               required
                               ng-model="selectRow.toBeEdit.TransportWeight"
                               ng-change="updateScalar(selectRow.toBeEdit)">
                        <div class="validation_block">
                            <div ng-show="editForm.transportWeight.$dirty">
                                <small ng-show="editForm.transportWeight.$error.required &&
                                    !editForm.transportWeight.$error.number">
                                    @Resource.RequiredMessage
                                </small>
                                <small ng-show="editForm.transportWeight.$error.number">
                                    @Resource.NumberValidateMsg
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

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

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

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.Parameter
                    </label>
                    <div class="col col-sm-8">
                        <input type="number" step="any" ng-model="selectRow.toBeEdit.ParameterValue" ng-change="updateKgCO2e(selectRow.toBeEdit)"
                               name="ParameterValue"
                               placeholder="@Resource.RequiredMessage"
                               required />
                        <div class="header_image_button simapro-image-button"
                             ng-click="selectSimaproProcess(selectRow.toBeEdit, null, false)">
                        </div>
                        <div class="validation_block">
                            <div ng-show="editForm.ParameterValue.$dirty">
                                <small ng-show="editForm.ParameterValue.$error.required &&
                                    !editForm.ParameterValue.$error.number">
                                    @Resource.RequiredMessage
                                </small>
                                <small ng-show="editForm.ParameterValue.$error.number">
                                    @Resource.NumberValidateMsg
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.ParameterUnit
                    </label>
                    <div class="col col-sm-8">
                        <input name="Unit"
                               type="text"
                               ng-model="selectRow.toBeEdit.ParameterUnit">
                    </div>
                    <div class="validation_block">
                    </div>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.ParaDesc
                    </label>
                    <div class="col col-sm-8">
                        <input type="text" ng-model="selectRow.toBeEdit.ParameterDescription" />
                    </div>
                </div>

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

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

                <div class="row">
                    <label class="col-sm-4 col-form-label">
                        @Resource.MataDataDQI
                    </label>
                    <div class="col col-sm-8">
                        <select name="dqi"
                                required
                                ng-model="selectRow.toBeEdit.DQI">
                            <option value="">-- @Resource.StaticLabelGlobal_Select --</option>
                            <option value="0">@Resource.MetaDataDQI1</option>
                            <option value="1">@Resource.MetaDataDQI2</option>
                            <option value="2">@Resource.MetaDataDQI3</option>
                        </select>
                    </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="dataQualityShow(selectRow.getSelected())"
                                    ng-show="isEdit && lcaDetail.isProductLCA">
                                @Resource.DataQualityLevel
                            </button>
                            <button class="header_button"
                                    style="float: left; margin-left: 16px;"
                                    ng-click="save()"
                                    ng-show="lcaDetail.Status<5"
                                    ng-disabled="editForm.$invalid">
                                @Resource.StaticLabelGlobal_Save
                            </button>
                        </div>
                    </div>
                </div>
            </table-edit-modal>
        </form>
        @* end of the detail modal form *@

        <simapro display-option="simaproOption">
            <div>@Resource.PartNumber : <span ng-bind="selectRow.getSelected().PartNumber"></span></div>
            <div>@Resource.MaterialName : <span ng-bind="selectRow.getSelected().Name"></span></div>
        </simapro>

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

        <quality display-option="dataQualityOption">
        </quality>

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