{% load staticfiles %}

    <link rel="stylesheet" type="text/css" href="{% static '/advisor/static/css/style.css' %}"/>
    <script src='{% static "/advisor/static/app/constants.ini" %}'></script>

{%verbatim%}
    <div class="container addOn" id="parent-menu" block-ui="IMTBlockUI">
        <div class="row">
            <div class="col-xs-12">
                <span  style="font-size:20px;font-weight:bold">IMT Advisor</span>
                <span><strong style="display:inline;color:orange;font-size:large">&nbsp;&nbsp;BETA</strong></span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h4 style="font-size:16px">Job Name:&nbsp;<span style="font-weight:bold">{{ jobName }}</span></h4>
                <h6 ng-if="modeval == 'offline'" style="color:#1E4A93;font-weight:bold">{{offlineMessage}}{{time}}{{offlineMessageSso}}</h6>

            </div>
        </div>

        <div class="row" ng-if="!recommend_status && !ImtError">
            <div class="imtSelectionContainer col-xs-12">
                
                <h6 ng-if="excel" style="color:#1E4A93;font-weight:bold">Your compatibility matrix for Advisor is older than 2 weeks, perform the following steps: <br>1. Log in to <a style="text-decoration:underline;cursor:pointer" uib-tooltip="Click to follow link  https://mysupport.netapp.com/matrix/" tooltip-placement="bottom" tooltip-append-to-body='true' href="https://mysupport.netapp.com/matrix/" target="_blank"> IMT</a>.<br>2. From the Header Menu, click Reports > complete daily exports<br>3.	Download > FAS_SAN_Host_.xls & SAN-Switch_(FAS,_E-Series)_.xls<br>4.  Replace the old files with the new ones in the following location:  -\Users\< username >\IMTAdvisor\IMTCompatibilityMatrix\ <br>5.  Click IMT Advisor button to view the recommendations.</h6>
                
                <h5 style="padding-left:11px;font-weight:bold;font-size:small !important">{{multipleRecords}}</h5>
                
                <div class="row" id="block-1">
                    <div class="col-xs-12 col-md-4">
                        <div class="form-group">
                            <label>Select version of {{ firstTitle }} - {{ontapSelection.value.CollectionTarget}}</label>
                            <select class="form-control" name="ontapSel" ng-options="data.ComponentName for data in ontapData.value" ng-model="ontapSelection.value" ng-change="changedValue(ontapSelection)">
                            </select>
                        </div>
                    </div>
                    <div ng-if="secondTitle" class="col-xs-12 col-md-8">
                        <div class="form-group">
                            <label>Select version of {{ secondTitle }} - {{switchSelection.value.CollectionTarget}}</label>
                            <select class="form-control" name="switchSel" ng-options="data.ComponentName for data in switchData.value" ng-model="switchSelection.value" ng-change="changedValue(switchSelection)">
                            </select>
                        </div>
                        <span>{{switchSelection.value.SubComponentType}} : {{switchSelection.value.SubComponentName}}</span>
                    </div>
                </div>
                <hr/>

                <!--div class="row"  id="block-2" ng-if="modeSwitch">
                    <div class="col-xs-12">
                        <label>Select mode for recommendation:</label>
                        <div class="radio">
                            <label><input type="radio" ng-model="mode.value" value="online" name="mode" id="online">Online</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" ng-model="mode.value" value="offline" name="mode" id="offline">Offline</label>
                        </div>
                    </div>
                </div>
                <hr/-->

                <!--<div class="row"  id="block-3">-->
                    <!--<div class="col-xs-12">-->
                        <!--<label>Select Host version</label>-->
                    <!--</div>-->
                <!--</div>-->
                    <br>
                <div class="row" id="block-4" ng-repeat="host in hostData track by $index" ng-init="grandparent=$index">
                    <div class="col-xs-12">
                        <div ng-repeat="j in host">
                                <p ng-if="j.ComponentType == 'Host OS'"><label>Host:&nbsp;{{ j.CollectionTarget }}</label></p>
                            </div>
                        <table st-table="imt" class="table table-bordered">
                            <thead>
                                <tr class="heading-row">
                                    <td class="text-center">
                                        <input ng-if="hostData.length == 1" type="checkbox" 
                                            ng-model="checkedHosts[$index]" 
                                            ng-init="checkedHosts[$index]=true" 
                                            ng-change="updateCheckBoxStatus($index)"/>
                                        <input ng-if="hostData.length > 1" type="checkbox" ng-model="checkedHosts[$index]" ng-change="updateCheckBoxStatus($index)"/>
                                    </td>
                                    <td><label>ComponentType</label></td>
                                    <td><label>ComponentName</label></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="bb in host track by $index" ng-init="parent=$index">
                                    <td cs-select="row"></td>
                                    <td>{{ bb.ComponentType }}</td>
                                    <td ng-if="bb.ComponentName.length > 1">
                                        <label>Select {{ bb.ComponentType }} version</label>
                                        <div class="select-wrap">
                                            <div class="selected-item"
                                                 ng-click="showSelectionOptions(grandparent, parent)" >
                                                 <span class="selected-item-content">
                                                    {{ hostDataState[grandparent][parent]['ComponentName'][0].ComponentName }}
                                                 </span>
                                                 <span class="glyphicon glyphicon-chevron-down pull-right"></span>
                                            </div>
                                            <div class="select-options"
                                                 id="select-options-{{grandparent}}-{{parent}}">
                                                <ul>
                                                    <li ng-repeat="comp in bb.ComponentName track by $index"
                                                        ng-init="child=$index"
                                                        ng-click="changeSelection(grandparent, parent, child)">
                                                        <pre>{{comp.ComponentName | formatList}}</pre>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        <!--select class="form-control"
                                                ng-model="hostDataState[$parent.$parent.$index][$parent.$index]['ComponentName'][0]"
                                                ng-options="comp.ComponentName for comp in bb.ComponentName">
                                        </select-->
                                    </td>
                                    <td class="single-option" ng-if="bb.ComponentName.length == 1">
                                        <pre>{{ hostDataState[grandparent][parent]['ComponentName'][0].ComponentName | formatList}}</pre>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!--<div ng-repeat="j in host">-->
                                <!--<p ng-if="j.ComponentType == 'Host HBA'">{{HBAMsg}}</p>-->
                            <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="col-xs-12 footer-fixed">
                <h6 style="color:#1E4A93;font-weight:bold;display:inline-block;padding:0;margin:0;">{{modeCommonMessage}}<br>{{HBAMsg}}</h6>
                  <button type="button" ng-click="getAllSelectedValues()" class="btn btn-primary pull-right" ng-disabled="noCheckBoxSelected">Next</button>
            </div>
        </div>


        <div ng-if="recommend_status">
            <div class="row">
                <div class="col-xs-12" id="result-block-1">
                    <h6 ng-if="mode == 'online'" style="color:#1E4A93;font-weight:bold">{{viewDetailsCriteriaMessage}}</h6>
                    <button class="btn btn-primary pull-left" ng-click="displaymainAddOn()">
                        <span class="glyphicon glyphicon-backward"></span>&nbsp;Back
                    </button>
                    <button class="btn btn-primary pull-right" ng-click="downloadView()">
                        <span class="glyphicon glyphicon-download-alt"></span>&nbsp;Export
                    </button>
                </div>
            </div>
            </br>
            <div class="imtRecommendationContainer">
            <div class="row" id="result-block-2">
                <div class="col-xs-12">
                    <div ng-repeat="i in recommendationData" class="table-div">
                        <!--<div ng-repeat="j in i.componentsList">-->
                            <p><label>Host OS:&nbsp;</label>{{ i.CollectionTarget }}</p>

                        <table class="table table-bordered">
                            <thead>
                                <tr style="font-size:14px">
                                    <th>Components</th>
                                    <th>Parsed Data</th>
                                    <th>Current Configuration</th>
                                    <!--<th>ONTAP Upgrade</th>-->
                                    <!--<th>Latest ONTAP / Host Upgrade</th>-->
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-weight:bold">Status</td>
                                    <td style="font-weight:bold">Parsed Data</td>
                                    <td style="font-weight:bold">{{ i.Actual }}</td>
                                    <!--<td style="font-weight:bold">{{ i.OntapUpgrade }}</td>-->
                                    <!--<td style="font-weight:bold">{{ i.Recommended }}</td>-->
                                </tr>
                                <tr ng-repeat="j in i.componentsList">
                                    <td style="font-weight:bold;width:150px">{{ j.componentType }}</td>
                                    <td style="width:280px">{{ j.parsedData }}</td>
                                    <td style="width:280px">{{ j.ExistingComponent }}</td>
                                    <!--<td style="width:300px">{{ j.OntapComponent }}</td>-->
                                    <!--<td style="width:300px">{{ j.RecommendedComponent }}</td>-->
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td value="j">
                                        <a ng-if="i.Actual=='Supported' && mode=='online'" href="" target="_blank" ng-click="viewDetails(i.componentsList,'Existing')">
                                            <span><b>View Details</b></span>
                                        </a>
                                    </td>
                                    <!--<td value="j">-->
                                        <!--<a ng-if="i.OntapUpgrade=='Supported' && mode=='online'" href="" target="_blank" ng-click="viewDetails(i.componentsList,'Ontap')">-->
                                            <!--<span class="n-top-hat__link-text"><b>View Details</b></span>-->
                                        <!--</a>-->
                                    <!--</td>-->
                                    <!--<td value="j">-->
                                        <!--<a ng-if="i.Recommended=='Supported' && mode=='online'" href="" target="_blank" ng-click="viewDetails(i.componentsList,'Recommended')">-->
                                            <!--<span><b>View Details</b></span>-->
                                        <!--</a>-->
                                    <!--</td>-->
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div></div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <span ng-if="ImtError != 'Old Excel' && ImtError != 'Excel not found'" style="color:#1E4A93;text-align: center;padding-top: 20%;font-size: 18px;">{{ImtError}}</span>
                <span ng-if="ImtError == 'Old Excel'" style="color:#1E4A93;text-align: center;font-size: 14px;">Your compatibility matrix for IMT Advisor is older than 30 days, perform the following steps: <br> 1. Log in to <a style="text-decoration:underline;cursor:pointer" uib-tooltip="Click to follow link  https://mysupport.netapp.com/matrix/" tooltip-placement="bottom" tooltip-append-to-body='true' href="https://mysupport.netapp.com/matrix/" target="_blank"> IMT</a>.  <br>2. From the Header Menu, click Reports > complete daily exports.  <br> 3. Download > FAS_SAN_Host_.xls & SAN-Switch_(FAS,_E-Series)_.xls <br>  4. Replace the files in the following location. -/Users/< username >/IMTAdvisor/IMTCompatibilityMatrix/ <br> 5. Click IMT Advisor button to view the recommendations.</span>
                <span ng-if="ImtError == 'Excel not found'" style="color:#1E4A93;text-align: center;font-size: 14px;">You do not have the exported data for the offline mode. Perform the following steps: <br> 1. Log in to  <a style="text-decoration:underline;cursor:pointer" uib-tooltip="Click to follow link  https://mysupport.netapp.com/matrix/" tooltip-placement="bottom" tooltip-append-to-body='true' href="https://mysupport.netapp.com/matrix/" target="_blank"> IMT</a>. <br>2. From the Header Menu, click Reports > Complete Daily Export.<br>3. Download > FAS_SAN_Host_.xls and SAN-Switch_(FAS,_E-Series)_.xls.<br> 4. Add it with the new files in this location: -/Users/< username >/IMTAdvisor/IMTCompatibilityMatrix/ <br> 5. Click IMT Advisor button to view the recommendations.</span>
            </div>
        </div>
        <div id="imtFileError">{{fileDownloadError}}
        </div>

    </div>

        
{%endverbatim%}