@* the select function is provided by select-row directive*@
<div ng-controller="LCAPowerUsageCtrl" 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;">
        <div header-content-layout>
            <div header-content-layout style="margin: 0;>
                <label for="areaSelect">@Resource.Area : </label>
                <select name="areaSelect" style="width:70px" ng-disabled="!Editable"
                        ng-options="a for a in area"
                        ng-model="areaSelected"
                        ng-change="changeYear(areaSelected)"
                        class="area-selected"></select>

                <label for="yearSelect">@Resource.StaticLabelGlobal_Years : </label>
                <select name="yearSelect" style="width:70px" ng-disabled="!Editable"
                        ng-options=" y.Year for y in areaYear track by y.ParameterID"
                        @*ng-options="y.ParameterID as y.Year for y in areaYear track by y.ParameterID"*@
                        ng-model="yearSelected"
                        ng-change="onYearChange(yearSelected)"
                        class="table_text_select"></select>


                <label for="yearSelect">@Resource.EmitPara : </label>
                {{factor}}

                <div header-content-layout>
                    <label for="yearSelect">@Resource.EmitParaType : </label>
                    <select name="emitParaTypeN" id="emitParaType" ng-disabled="!Editable"
                            ng-model="emitParaType" style="width:130px"
                            @*ng-options="value for (key, value) in emitParaOptions"*@
                            ng-change="onEmitparaChange(emitParaType)"
                            class="table_text_select">
                        <option value="0">-- @Resource.StaticLabelGlobal_Select --</option>
                        <option ng-repeat="(key, value) in emitParaOptions"
                                value="{{key}}">
                            {{value}}
                        </option>
                    </select>
                    <label for="yearSelect">@Resource.ActivityDataType : </label>
                    <select name="activityDataTypeN" id="activityDataType" ng-disabled="!Editable"
                            ng-model="activityDataType" style="width:130px"
                            @*ng-options="value for (key, value) in activityOptions"*@
                            ng-change="onActivityChange(activityDataType)"
                            class="table_text_select">
                        <option value="0">-- @Resource.StaticLabelGlobal_Select --</option>
                        <option ng-repeat="(key, value) in activityOptions"
                                value="{{key}}">
                            {{value}}
                        </option>
                    </select>
                </div>

                <div ng-show="lcaDetail.isProductLCA" style="float: none; margin: 10px 0 0 0;">
                    <label for="Allocation">@Resource.Allocation</label>
                    <select name="AllocationN" id="Allocation"
                            ng-model="Allocation" style="width:130px"
                            ng-change="onAllocationChange(Allocation)"
                            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 {{Ratio}} </label>

                    <button class="header_button"
                            style="float: none; margin-left: 16px; margin-top: 10px;"
                            ng-click="dataQualityShow()"
                            ng-show="lcaDetail.isProductLCA">
                        @Resource.DataQualityLevel
                    </button>

                </div>


              </div>

            @*header content layout provide the general function like mouse over and background image*@
            <div ng-hide="Editable" style="margin-top: 10px;">
                <div class="header_image_button" ng-style="{backgroundImage: headerLayout.header_image4}"
                     ng-mouseover="headerLayout.headerImageChange(4, 2)"
                     ng-mouseleave="headerLayout.headerImageChange(4, 1)"
                     ng-click="editProcess()"
                     ng-show="lcaDetail.Status < 5">
                    <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_image8}"
                     ng-click="modelBuilder.export(modelPowerNormal,modelPowerGreen)"
                     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)"
                     ng-show="lcaDetail.Status < 5">

                    <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)"
                     ng-show="lcaDetail.Status < 5">

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

            </div>
            <div ng-show="Editable">
                <!-- Save -->
                <div class="header_image_button"
                     ng-style="{backgroundImage: headerLayout.header_image5}"
                     ng-click="saveData()"
                     ng-mouseover="headerLayout.headerImageChange(5, 2)"
                     ng-mouseleave="headerLayout.headerImageChange(5, 1)">

                    <div class="tooltip" ng-show="headerLayout.show5">
                        <div ng-style="{width: tooltipWidth(5)}">
                            @Resource.StaticLabelGlobal_Save
                        </div>
                    </div>
                </div>
                <!--Cancel-->
                <div class="header_image_button"
                     ng-style="{backgroundImage: headerLayout.header_image7}"
                     ng-click="cancelData()"
                     ng-mouseover="headerLayout.headerImageChange(7, 2)"
                     ng-mouseleave="headerLayout.headerImageChange(7, 1)">

                    <div class="tooltip" ng-show="headerLayout.show7">
                        <div ng-style="{width: tooltipWidth(7)}">
                            @Resource.StaticLabelGlobal_Cancel
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="body_content container" style="margin-top: 10px;">

    </div>
    @* end of header *@

    @* the body of index *@
    <div class="body_content">

        @*<div class="container">
                <div class="row">
                    <div class="col-3">
                    </div>
                    <div class="col-3">
                    </div>
                </div>
            </div>
            <br />*@
        <div class="title">
            @Resource.PowerNormal (kWh)
        </div>
        <div class="table_overflow">
            <table class="table">
                <thead>
                    <tr class="table-active" style="text-align:center">
                        @*<div class="table_header_wrap clearfix" style="width: 924px">*@
                        <th ng-show="lcaDetail.isProductLCA">@Resource.StaticLabelGlobal_Years</th>
                        <th>@Resource.StaticLabelGlobal_Month</th>
                        <th>@Resource.Peak</th>
                        <th>@Resource.HalfPeak</th>
                        <th>@Resource.OffPeak</th>
                        <th>@Resource.SaturdayHalfPeak</th>
                        <th>@Resource.TotalPowerUsage</th>
                        @*<th>
                                @Resource.StaticLabelGlobal_Years
                                <span tooltip-placement="right"
                                      class="tooltip-directive vertical-middle"
                                      tooltip="@Resource.TooltipSelectArea"
                                      data-trigger="click">
                                </span>
                            </th>*@
                        <th>@Resource.DescriptionAndExplanation</th>
                        <th>@Resource.KgCO2e</th>
                        <th>@Resource.StaticLabelEvidenceOfElectronicFile</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-repeat="row in modelPowerNormal | filter : searchText">
                        @*<div class="table_row survey_order_table_row">*@

                        <td ng-show="lcaDetail.isProductLCA" align="right"> {{row.showYear}}</td>
                        <td> {{row.Month}}</td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.Peak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.HalfPeak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newHalfPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.OffPeak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newOffPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.SaturdayHalfPeak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newSaturdayHalfPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div>{{row.Scalar | number:4}}</div>
                        </td>
                        @*<td>
            <div ng-hide="Editable">{{row.Year}}</div>
            <div ng-show="Editable" class="table_select" style="width:100%">
                <select ng-options=" y.Year for y in areaYear track by y.ParameterID" ng-model="row.newYear" class="table_text_select"></select>
            </div>
        </td>*@
                        <td>
                            <div ng-hide="Editable">{{row.Description}}</div>
                            <div ng-show="Editable"><input type="text" ng-model="row.newDescription" class="table_text_input" /> </div>
                        </td>
                        <td align="right"> {{row.KgCO2e | number:3}}</td>
                        <td>
                            <div ng-show="Editable" class="table_upload" ng-click="uploadFileNormal($index)">
                                <img ng-src="{{baseUrl + '/Browser_Local/img/upload_' + up + '.png'}}" style="cursor: pointer;"
                                     ng-init="up = 1" ng-mouseenter="up = 2" ng-mouseleave="up = 1" title="upload" />
                            </div>
                            <div ng-show="Editable && row.ReferenceFileLink!=null && row.ReferenceFileLink!=''" class="table_upload" ng-click="deleteFile(row)">
                                <img ng-src="{{baseUrl + '/Browser_Local/img/delete-' + delete + '.png'}}" style="cursor: pointer;"
                                     ng-init="delete = 1" ng-mouseenter="delete = 2" ng-mouseleave="delete = 1" title="upload" />
                            </div>
                            <div class="table_select">
                                <a ng-show="(row.ReferenceFileLink!=null && row.ReferenceFileLink!='')"
                                   ng-href="{{row.ReferenceFileLink}}" target="_blank"
                                   style="display: inline;">
                                    {{row.ReferenceFileLink|getFileName}}
                                    <img ng-src="{{baseUrl + '/Browser_Local/img/download_' + down + '.png'}}" style="cursor: pointer;"
                                         ng-init="down = 1" ng-mouseenter="down = 2" ng-mouseleave="down = 1" title="download" />
                                </a>
                            </div>
                        </td>
                        @*</div>*@
                    </tr>
                    <tr style="background-color: #F5F5F5" align="right">
                        <td></td>
                        <td ng-show="lcaDetail.isProductLCA"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>{{sumNormalScalar | number:4}}</td>
                        <td></td>
                        <td>{{sumNormalKgCO2e | number:3}}</td>
                        <td></td>
                    </tr>
                    <tr style="background-color: #F5F5F5" ng-show="lcaDetail.isProductLCA" align="right">
                        <td>@Resource.AllocatedKgCO2e</td>
                        <td ng-show="lcaDetail.isProductLCA"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>{{sumNormalKgCO2e * Ratio | number:4}}</td>
                        <td></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>
        <br />
        <div class="title">
            @Resource.PowerGreen
        </div>
        <div class="table_overflow">
            <table class="table">
                <thead>
                    <tr class="table-active" style="text-align:center">
                        @*<div class="table_header_wrap clearfix" style="width: 924px">*@
                        <th ng-show="lcaDetail.isProductLCA">@Resource.StaticLabelGlobal_Years</th>
                        <th>@Resource.StaticLabelGlobal_Month</th>
                        <th>@Resource.Peak</th>
                        <th>@Resource.HalfPeak</th>
                        <th>@Resource.OffPeak</th>
                        <th>@Resource.SaturdayHalfPeak</th>
                        <th>@Resource.TotalPowerUsage</th>
                        @*<th>
                                @Resource.StaticLabelGlobal_Years
                                <span tooltip-placement="right"
                                      class="tooltip-directive vertical-middle"
                                      tooltip="@Resource.TooltipSelectArea"
                                      data-trigger="click">
                                </span>
                            </th>*@
                        <th>@Resource.DescriptionAndExplanation</th>
                        <th>@Resource.KgCO2e</th>
                        <th>@Resource.StaticLabelEvidenceOfElectronicFile</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-repeat="row in modelPowerGreen">
                        @*<div class="table_row survey_order_table_row">*@

                        <td ng-show="lcaDetail.isProductLCA" align="right"> {{row.showYear}}</td>
                        <td> {{row.Month}}</td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.Peak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.HalfPeak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newHalfPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.OffPeak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newOffPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div ng-hide="Editable">{{row.SaturdayHalfPeak | number:4}}</div>
                            <div ng-show="Editable"><input type="number" step="any" ng-model="row.newSaturdayHalfPeak" class="table_text_input" /> </div>
                        </td>
                        <td align="right">
                            <div>{{row.Scalar | number:4}}</div>
                        </td>
                        @*<td>
            <div ng-hide="Editable">{{row.Year}}</div>
            <div ng-show="Editable" class="table_select" style="width:100%">
                <select ng-options=" y.Year for y in areaYear track by y.ParameterID" ng-model="row.newYear" class="table_text_select"></select>
            </div>
        </td>*@
                        <td>
                            <div ng-hide="Editable">{{row.Description}}</div>
                            <div ng-show="Editable"><input type="text" ng-model="row.newDescription" class="table_text_input" /> </div>
                        </td>
                        <td align="right"> {{row.KgCO2e | number:3}}</td>
                        <td>
                            <div ng-show="Editable" class="table_upload" ng-click="uploadFileGreen($index)">
                                <img ng-src="{{'@ViewBag.baseUrl/Browser_Local/img/upload_' + up + '.png'}}" style="cursor: pointer;"
                                     ng-init="up = 1" ng-mouseenter="up = 2" ng-mouseleave="up = 1" title="upload" />
                            </div>
                            <div class="table_select">
                                <a ng-show="(row.ReferenceFileLink!=null && row.ReferenceFileLink!='')"
                                   ng-href="{{row.ReferenceFileLink}}" target="_blank"
                                   style="display: inline;">
                                    {{row.ReferenceFileLink|getFileName}}
                                    <img ng-src="{{'@ViewBag.baseUrl/Browser_Local/img/download_' + up + '.png'}}" style="cursor: pointer;"
                                         ng-init="up = 1" ng-mouseenter="up = 2" ng-mouseleave="up = 1" title="download" />
                                </a>
                            </div>
                        </td>
                        @*</div>*@
                    </tr>
                    <tr style="background-color: #F5F5F5" align="right">
                        <td></td>
                        <td ng-show="lcaDetail.isProductLCA"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>{{sumGreenScalar | number:4}}</td>
                        <td></td>
                        <td>{{sumGreenKgCO2e | number:3}}</td>
                        <td></td>
                    </tr>
                    <tr style="background-color: #F5F5F5" ng-show="lcaDetail.isProductLCA" align="right">
                        <td>@Resource.AllocatedKgCO2e</td>
                        <td ng-show="lcaDetail.isProductLCA"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>{{sumGreenKgCO2e * Ratio | number:4}}</td>
                        <td></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 *@
        <loading ng-init="loading=false"></loading>

        <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.FootnotePowerUsage.Replace("\r\n", "<br>"))
        </div>
    </div>
</div>