<style ng-controller="ConfiguracaoLayoutController">
    .painel .destaque, .main-footer .destaque {
        color: {{StyleCorFonteSecundariaGrid}}
    }

    .painel thead th {
        font-size: {{StyleTamanhoFonteTitulosColunas}};
        color: {{StyleCorFonteTitulosColunas}};
        background: {{StyleBackgroundTitulosColunas}};
    }

    /* par */
    .painel tbody tr:nth-child(odd) td {
        background: {{StyleBackgroundLinha1}};
    }

    /* impar */
    .painel tbody tr:nth-child(even) td {
        background: {{StyleBackgroundLinha2}};
    }

</style>




<prompt-box></prompt-box>
<modal-config ng-class="{'js-show': configOpen}"></modal-config>
<!--<div class="loading-div" style="display: block"></div>-->

<div class="loading-div" style="display: flex">
    <div class="socket">
        <div class="gel center-gel">
            <div class="hex-brick " style="width:22px; height:22px;"></div>

        </div>
        <div class="gel c1 r1">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c2 r1">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c3 r1">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c4 r1">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c5 r1">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c6 r1">
            <div class="hex-brick "></div>

        </div>

        <div class="gel c7 r2">
            <div class="hex-brick "></div>

        </div>

        <div class="gel c8 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c9 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c10 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c11 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c12 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c13 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c14 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c15 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c16 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c17 r2">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c18 r2">
            <div class="hex-brick "></div>

        </div>

        <div class="gel c21 r3">
            <div class="hex-brick " style="width:12px; height:12px;"></div>

        </div>
        <div class="gel c22 r3">
            <div class="hex-brick " style="width:12px; height:12px;"></div>

        </div>

        <div class="gel c25 r3">
            <div class="hex-brick " style="width:12px; height:12px;"></div>

        </div>
        <div class="gel c26 r3">
            <div class="hex-brick " style="width:12px; height:12px;"></div>

        </div>
        <div class="gel c28 r3">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c29 r3">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c30 r3">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c31 r3">
            <div class="hex-brick "></div>

        </div>

        <div class="gel c33 r3">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c34 r3">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c35 r3">
            <div class="hex-brick "></div>

        </div>
        <div class="gel c36 r3">
            <div class="hex-brick "></div>
        </div>
    </div>
</div>

<header class="main-header" ng-style="StyleCorBackgroundCabecalho">
    <div class="logotipo" ng-hide="modoDeEdicao">
        <img ng-src="{{urlImagemEmpresa}}" alt="Grupo Inlog">
    </div>

    <h1 class="main-heading" ng-style="StyleFonteCabecalho" ng-hide="modoDeEdicao">
        {{tituloPagina}}
    </h1>

    <h1 class="main-heading" ng-style="StyleFonteCabecalho" ng-show="modoDeEdicao">
        Modo de Edição
    </h1>


    <!--<button type="button" name="button" class="show-alert" ng-click="showAlert()">show alert</button>
    <button type="button" name="button" class="show-alert" ng-click="showPrompt()">show prompt</button>
    <button ng-click="SalvarTodasConfiguracoes()" id="addLine">SalvarTodasConfiguracoes</button>
    <button ng-click="AdicionarEvento()" id="addLine">Adicionar</button>
    <button ng-click="AlterarEvento()">Alterar</button>
    <button ng-click="RemoverEvento()">Remover</button>
    <button ng-click="AddChegadaPrevistaEvento()">Add Chega Prevista</button>
    <button ng-click="AtivarFcv()">Ativar FCV Prevista</button>
    <button ng-show="estadoIUSalva == false" class="btn-blue-small btn-effect" ng-click="">Salvar Alterações</button>-->
    <p class="relogio-topo" ng-hide="modoDeEdicao" timer-clock ng-style="StyleFonteCabecalho">
        <span>{{labelRelogio}}</span>
        <span id="paginator" class="painel-contador" ng-style="StyleFontePaginador">{{totalPages == 0 ? 0 : currentPage}} • {{totalPages}}</span>
    </p>
</header>

<main class="main-content">
    <span class="btn-configuracoes" ng-click="toggleModal()">
        <i class="icon-gear"></i>
    </span>
    <painelfinalservico></painelfinalservico>
</main>

<configuracaorodapenoticia></configuracaorodapenoticia>

<div class="preview-ativacao-painel">
    <section class="preview-msg case-1" id="Preview" style="display:none;">
        <header class="msg-header">
            <p class="font-century-gothic-bold h1 title">Esse painel é apenas uma demonstração</p>
        </header>
        <div class="msg-body">
            <p>Ative o painel na tela de configuração através do botão "Ativar Painel".</p>
            <ul>
                <li><i class="icon-marker"></i><span>Local: </span>{{dispositivo.DescricaoLocal}}</li>
                <li><i class="icon-device"></i><span>Dispositivo: </span>{{dispositivo.Descricao}}</li>
            </ul>
        </div>
        <footer class="msg-footer">
            <button class="blue-button blue-button" type="button" ng-click="Cancelar()">Ok, Entendi</button>
        </footer>
    </section>

    <section class="preview-msg case-2" id="ConfirmacaoSemAtivo" style="display:none;">
        <header class="msg-header">
            <p class="font-century-gothic-bold h1 title">Deseja ativar o painel selecionado?</p>
        </header>
        <div class="msg-body">
            <ul>
                <li><i class="icon-marker"></i><span>Local: </span>{{dispositivo.DescricaoLocal}}</li>
                <li><i class="icon-device"></i><span>Dispositivo: </span>{{dispositivo.Descricao}}</li>
            </ul>
        </div>
        <footer class="msg-footer">
            <button class="blue-button gray-button" type="button" ng-click="Cancelar()">Cancelar</button>
            <button class="blue-button blue-button" type="button" ng-click="Confirmar()">Ativar</button>
        </footer>
    </section>

    <section class="preview-msg case-3" id="ConfirmacaoComAtivo" style="display:none;">
        <header class="msg-header">
            <p class="font-century-gothic-bold h1 title">Já existe um painel ativado para esse dispositivo</p>
        </header>
        <div class="msg-body">
            <p>
                Ao ativar um novo dispositivo o anterior não estará mais disponível.
                <span>Tem certeza que deseja ativar este painel?</span>
            </p>
            <ul>
                <li><i class="icon-marker"></i><span>Local: </span>{{dispositivo.DescricaoLocal}}</li>
                <li><i class="icon-device"></i><span>Dispositivo: </span>{{dispositivo.Descricao}}</li>
            </ul>
        </div>
        <footer class="msg-footer">
            <button class="blue-button gray-button" type="button" ng-click="Cancelar()">Cancelar</button>
            <button class="blue-button blue-button" type="button" ng-click="Confirmar()">Ativar mesmo assim</button>
        </footer>
    </section>
</div>
