<br/>

<div class="form-group" root-access>
    <div class="row">
        <div class="col-sm-6">
            <label translate>System uptime</label>
            <div class="form-control">{{uptime|time}}</div>
        </div>
        <div class="col-sm-6">
            <label>Operations</label>
            <div root-access="small">
                <a ng:click="poweroff()" class="btn btn-danger">
                    <i class="fa fa-power-off"></i> <span translate>Power off</span>
                </a>
                <a ng:click="reboot()" class="btn btn-default">
                    <i class="fa fa-recycle"></i> <span translate>Reboot</span>
                </a>
                <a ng:click="suspend()" class="btn btn-default" ng:hide="customization.plugins.power.hideSuspend">
                    <i class="fa fa-moon-o"></i> <span translate>Suspend</span>
                </a>
                <a ng:click="hibernate()" class="btn btn-default" ng:hide="customization.plugins.power.hideHibernate">
                    <i class="fa fa-download"></i> <span translate>Hibernate</span>
                </a>
            </div>
        </div>
    </div>
</div>

<hr ng:show="!customization.plugins.power.hideBatteries" />

<div class="form-group" ng:show="!customization.plugins.power.hideBatteries">
    <label translate>Batteries</label>

    <div class="alert alert-info" ng:show="batteries.length == 0">
        <i class="fa fa-info-circle"></i> <span translate>No batteries detected</span>
    </div>

    <div class="list-group">
        <div ng:repeat="battery in batteries" class="list-group-item list-group-item-large">
            <div class="list-group-main">
                <div class="list-group-icon">
                    <i class="fa fa-fw fa-bolt"></i>
                </div>
                <h4 class="list-group-item-heading">
                    {{battery.name}} ({{battery.manufacturer}} {{battery.type}})
                </h4>
                <p class="list-group-item-text">
                    <smart-progress 
                        value="battery.capacityLeft" 
                        max="battery.fullCapacity" 
                        text="battery.capacityLeft + ' Wh'"
                        max-text="battery.fullCapacity + ' Wh'"
                    ></smart-progress>
                    <span class="label label-success" ng:show="battery.charging">
                        <i class="fa fa-plug"></i> <span translate>Charging</span>
                    </span>
                    <span class="label label-danger" ng:show="!battery.charging && battery.rate > 0">
                        <i class="fa fa-bolt"></i> <span translate>Discharging at {{battery.rate}} W</span>
                    </span>
                    <span class="label label-info" ng:show="battery.voltage > 0">
                        <span translate>{{battery.voltage}} V</span>
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>

<hr ng:show="!customization.plugins.power.hideAdapters" />

<div class="form-group" ng:show="!customization.plugins.power.hideAdapters">
    <label translate>Adapters</label>

    <div class="alert alert-info" ng:show="adapters.length == 0">
        <i class="fa fa-info-circle"></i> <span translate>No adapters detected</span>
    </div>

    <div class="list-group">
        <div ng:repeat="adapter in adapters" class="list-group-item list-group-item-large">
            <div class="list-group-main">
                <div class="list-group-icon">
                    <i class="fa fa-fw fa-plug"></i>
                </div>
                <h4 class="list-group-item-heading">
                    {{adapter.name}}
                </h4>
                <p class="list-group-item-text">
                    <span class="label label-success" ng:show="adapter.pluggedIn">
                        <i class="fa fa-plug"></i> <span translate>Plugged in</span>
                    </span>
                    <span class="label label-warning" ng:show="!adapter.pluggedIn">
                        <i class="fa fa-question"></i> <span translate>Not available</span>
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>
