<div class="modal-container">
    <div class="modal-header">
        <h3>Calibration manager <small>(Expert mode)</small></h3>
    </div>
    <div class="modal-body modal-body-max-height">
        <div class="alert alert-info" ng-if="calGroupedByRemote.length != 0">
            The sensor calibration data are saved in the directory&nbsp;:<br /> <strong>{{calibrationDir}}</strong>.
        </div>
        <div class="input-group input-group search-remote" ng-if="calGroupedByRemote.length != 0">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            <input type="text" class="form-control input-sm" placeholder="Search remote" ng-model="filter.value"/>
        </div>
        <br />
        <tabset class="tabset-min-height" ng-repeat="remote in calGroupedByRemote | filter:filter.value track by $index">
            <h4>Remote
                <small style="font-size: 16px;">
                    {{remote.remoteID}}
                    <span class="hexa">({{'0x' + remote.remoteID.toString(16)}})</span>
                </small>&nbsp;&nbsp;
                <span ng-if="remote.remote1" class="label label-success label-remote">Remote1</span>
                <span ng-if="remote.remote2" class="label label-success label-remote">Remote2</span>
            </h4>
            <tab ng-repeat="calibration in remote.calibrations track by $index"
                 active="remote.activeTab[calibration.sensor]">
                <tab-heading ng-click="cleanMessage()">
                    {{getSensor(calibration.sensor).shortDesc}}
                </tab-heading>
                <form class="form-inline" name="form">
                    <table class="table table-calibration">
                        <tbody ng-if="calibration.sensor != 8">
                            <tr>
                                <th scope="row">Scale</th>
                                <td>x:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val1.$error.number || form.val1.$error.required }" name="val1"
                                                    ng-model="calibration.calScale[0]" required/></td>
                                <td>y:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val2.$error.number || form.val2.$error.required }" name="val2"
                                                    ng-model="calibration.calScale[1]" required/></td>
                                <td>z:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val3.$error.number || form.val3.$error.required }" name="val3"
                                                    ng-model="calibration.calScale[2]" required/></td>
                            </tr>
                            <tr>
                                <th scope="row">Offset</th>
                                <td>x:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val4.$error.number || form.val4.$error.required }" name="val4"
                                                    ng-model="calibration.calOffset[0]" required/></td>
                                <td>y:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val5.$error.number || form.val5.$error.required }" name="val5"
                                                    ng-model="calibration.calOffset[1]" required/></td>
                                <td>z:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val6.$error.number || form.val6.$error.required }" name="val6"
                                                    ng-model="calibration.calOffset[2]" required/></td>
                            </tr>
                        </tbody>
                        <tbody ng-if="calibration.sensor == 8">
                            <tr>
                                <th scope="row" class="single-th">Scale</th>
                                <td>y:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val1.$error.number || form.val1.$error.required }" name="val1"
                                                    ng-model="calibration.calScale" required/></td>
                            </tr>
                            <tr>
                                <th scope="row" class="single-th">Offset</th>
                                <td>y:&nbsp; <input type="number" class="form-control input-sm"
                                                    ng-class="{ 'has-error': form.val2.$error.number || form.val2.$error.required }" name="val2"
                                                    ng-model="calibration.calOffset" required/></td>
                            </tr>
                        </tbody>
                    </table>
                </form>
                <div class="pull-left align-button-to-left">
                    <button type="button" class="btn btn-danger btn-xs" ng-click="delete(remote, calibration)">Delete</button>
                </div>
                <div class="pull-right align-button-to-right">
                    <button type="button" class="btn btn-link btn-xs" ng-click="cancel(remote, calibration)"
                            ng-disabled="!isUpdatedCalibration(calibration)">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-default btn-xs" ng-click="save(remote, calibration)"
                            ng-disabled="form.$invalid || !isUpdatedCalibration(calibration)">
                        Save
                    </button>
                </div>
                <div class="error-message"  ng-if="form.$invalid">
                    <span class="glyphicon glyphicon-warning-sign"></span> &nbsp;The form is not valid
                </div>
                <div class="error-message">
                    {{remote.errorMessage}}
                </div>
                <div class="info-message">
                    {{remote.infoMessage}}
                </div>
                <div class="clearfix"></div>
                <div class="hr"></div>
            </tab>
            <div dropdown is-open="remote.addSensorListDropdownOpen"
                 ng-if="remote.addSensorList.length > 0"
                 class="btn-group btn-add-sensor">
                <button type="button" class="btn btn-link" dropdown-toggle>
                    Add <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li ng-repeat="addSensor in remote.addSensorList" role="menuitem">
                        <a href="#" ng-click="addCalibraton(remote.remoteID, addSensor)">
                            {{getSensor(addSensor).shortDesc}}
                        </a>
                    </li>
                </ul>
            </div>
        </tabset>
        <div ng-if="calGroupedByRemote.length == 0" class="alert alert-info placeholder">
            <span class="glyphicon glyphicon-info-sign"></span>
            <br />
            <h5>There is no calibration data</h5>
            <br />
            Please calibrate your device using the calibration wizard <br />
            or drop calibration files (*.bson) in the directory :<br />
            <strong>{{calibrationDir}}</strong>
        </div>
        <br />
        <form class="form-inline" ng-if="false">
            <div class="form-group">
                <label for="addRemote"><h4>Remote</h4></label>
                <input type="text" class="form-control input-sm" id="addRemote" placeholder="Remote ID" />
                <button type="button" class="btn btn-default btn-sm">Add remote</button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="$close()">Close</button>
    </div>
</div>

