<menu></menu>    

<div class="scroll" scroll>

    <div class="content-left-sidebar">
        <div class="clear"></div>

        <h3 class="font-century-gothic-bold dashed-line overflow"><span class="right-white-mark float-left">Configuração de Painel</span> <span class="left-white-mark float-right font-arial font-small"><em>* Campos Obrigatórios</em></span></h3>
        <div class="clear"></div>
        
        <div class="col font-arial padding-bottom-40">
            <label><strong>Local *</strong></label>
            <div class="select" style="width: 300px;">
                <span class="sel-val"><span id="txtLocal" class="txt-val txt-default">Selecione</span> <span class="sel-arrow-down"></span></span>
                <ul class="sel-list">
                    <li ng-click="SelecionarLocal('Selecione')">Selecione</li>
                    <li lastrepeatdirective ng-repeat="l in Terminais | orderBy:'-Descricao':true" ng-click="SelecionarLocal(l)">{{ l.Descricao }}</li>
                </ul>
            </div>
            <label><strong>Dispositivos</strong></label>
            <button id="mdl-002" class="modal-target blue-button float-right margin-right-10" ng-show="dispositivo" ng-click="AtivarPainel()" type="button">Ativar Painel</button>

            <div class="table-box no-border-bottom">
                <table class="table">
                    <thead class="table-sort">
                        <tr>
                            <th ng-click="OrderBy('Status')" width="70">Status</th>
                            <th ng-click="OrderBy('Descricao')">Dispositivo</th>
                            <th ng-click="OrderBy('Identificador')">Identificador</th>
                            <th width="152"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr lastrepeatdirective ng-repeat="item in Dispositivos"  ng-class="{ 'selecionado': item.Codigo == dispositivo.Codigo }">
                            <td>
                                <div ng-switch on="item.Ativo">
                                    <div ng-switch-when="1">
                                        <span class="status-green tooltip-info" data-msg="{{item.TempoAtualizacaoStatus}}"></span>
                                    </div>
                                    <div ng-switch-when="2">
                                        <span class="status-red tooltip-info" data-msg="{{item.TempoAtualizacaoStatus}}"></span>
                                    </div>
                                    <div ng-switch-default>
                                        <span class="status-gray tooltip-info" data-msg="{{item.TempoAtualizacaoStatus}}"></span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                {{item.Descricao}}
                            </td>
                            <td>{{item.Identificador | uppercase}}</td>
                            <td>
                                <div ng-switch on="item.Ativo">
                                    <div ng-switch-when="2">
                                        <button class="blue-button" type="button" ng-click="ExibirPainel(item)" style="width: 152px;">Exibir Painel</button>
                                    </div>
                                    <div ng-switch-when="1">
                                        <button class="blue-button" type="button" ng-click="ExibirPainel(item)" style="width: 152px;">Exibir Painel</button>
                                    </div>
                                    <div ng-switch-when="0">
                                        <button class="green-button" type="button" ng-click="SelecionarDispositivo(item)" style="width: 152px;">Selecionar</button>
                                    </div>
                                    <div ng-switch-default>
                                        <button class="green-button" type="button" ng-click="SelecionarDispositivo(item)" style="width: 152px;">Selecionar</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <paginacao></paginacao>
           
            <div class="clear"></div>
            
            <div class="info-base">
                <h3><i class="icon-info"></i> Instruções:</h3>
                <p>Ao ativar um dispositivo ele ficará indisponível para ativação em outros locais.</p>
                <p>Caso não encontre a configuração desejada entre em contato com o CCO.</p>
                <br />
                <p><strong>Não limpe o cache do navegador:</strong> ao limpar o cache você perderá a ativação realizada e será necessário que o CCO resete o status do dispositivo para que você ative novamente.</p>
            </div>

            <rodape></rodape>

        </div>        

        <style type="text/css">
            .painel {
                display: none;
                background: #FFFFFF center no-repeat;
                top: 0px;
                z-index: 99999999;
                left: 0px;
                right: 0px;
                bottom: 0px;
                position: absolute;
                opacity: 0.8;
            }

            .selecionado {
                background-color: aquamarine !important;
            }
        </style>
    </div>
</div>
