<div class="modal-container">
    <div class="modal-header">
        <h3 class="modal-title">About IOLab <small>({{iolabVersion}})</small></h3>
    </div>
    <div class="modal-body">

        <new-version class="version-alert about"></new-version>

        <div ng-if="!hardwareState.donglePlugged" class="box-info">
            <img class="icon" src="images/ic_dongle.svg" width="48" height="48" alt="Dongle icon" />
            <div class="name">Dongle</div>
            <div class="content">Not plugged</div>
        </div>

        <div ng-if="hardwareState.donglePlugged">

            <div class="box-info">
                <img class="icon" src="images/ic_dongle.svg" width="48" height="48" alt="Dongle icon" />
                <div class="name">
                    Dongle ID: {{hardwareState.dongleID}}
                    <span>({{'0x' + hardwareState.dongleID.toString(16)}})</span>
                </div>
                <div class="content">
                    firmware version: {{hardwareState.fwVersion}}
                    <span>({{'0x' + hardwareState.fwVersion.toString(16)}})</span>
                </div>
            </div>


            <div ng-repeat="remote in [hardwareState.remote1, hardwareState.remote2]" class="box-info">

                <span ng-show="remote.pairStatus == 0">
                    <img class="icon" src="images/ic_remote2.svg" width="48" height="48" alt="Remote icon" />
                    <div class="name">Remote{{$first ? '1' : '2'}}</div>
                    <div class="content">Not paired</div>
                </span>
                <span ng-show="remote.pairStatus == 1">
                    <img class="icon" src="images/ic_remote2.svg" width="48" height="48" alt="Remote icon" />
                    <div class="name">
                        Remote{{$first ? '1' : '2'}} ID: {{remote.remoteID}}
                        <span>({{'0x' + remote.remoteID.toString(16)}})</span>
                    </div>
                    <div ng-show="remote.rfStatus == 0" class="content">
                        Not connected
                    </div>
                    <div ng-show="remote.rfStatus == 1" class="content">
                        Battery voltage: {{remote.batteryVoltage.toPrecision(3)}}V
                        <br/>rfFwVersion: {{remote.rfFwVersion}} <span>({{'0x' + remote.rfFwVersion.toString(16)}})</span>
                        <br/>sensorFwVersion: {{remote.sensorFwVersion}} <span>({{'0x' + remote.sensorFwVersion.toString(16)}})</span>
                    </div>
                    <div ng-show="remote.rfStatus == 2" class="content">
                        Just paired
                    </div>
                </span>
            </div>
        </div>

        <div style="margin-left: 10px;">
            <div style="display: inline-block; width: 55px;">Chrome :  </div> {{processVersions.chrome}} <br>
            <div style="display: inline-block; width: 55px;">Electron :</div> {{processVersions.electron}} <br>
            <div style="display: inline-block; width: 55px;">Node.js : </div> {{processVersions.node}}
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="$dismiss()">Close</button>
    </div>
</div>
