<div class="scroll" scroll>
    <div class="content-left-sidebar" endrender>
        <!-- conteúdo -->
        <!-- breadcrumbs -->
        <ul class="breadcrumbs float-left">
            <li><linkto link="Terminais/Paineis" text="Painéis"></linkto></li>
            <li ng-show="!Edicao">Cadastro de painel</li>
            <li ng-show="Edicao">Configuração de painel</li>
        </ul>
        <!-- /breadcrumbs -->
        <div class="clear"></div>
        <h3 class="font-century-gothic-bold dashed-line overflow">
            <span ng-show="!Edicao" class="right-white-mark float-left">Cadastro de painel</span>
            <span ng-show="Edicao" 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-2 font-arial padding-right-20 padding-bottom-40">
            <label for="sel-dispositivo"><strong>Dispositivo *</strong></label>

            <span class="select-custom float-left" ng-class="{ 'disabled' : Edicao}" ng-style="{ 'width' : !Edicao ? 'calc(100% - 40px)' : '100%' }">
                <select id="sel-dispositivo" class="input-base" ng-model="dispositivoSelecionado" ng-change="SelecionarDispositivo(dispositivoSelecionado)"
                        ng-options="d.Codigo as d.Descricao for d in Dispositivos" ng-if="!Edicao">
                    <option value="" selected ng-if="!Edicao">Selecione</option>
                    <option value="{{dispositivoSelecionadoObjeto.Codigo}}" ng-if="Edicao" selected>{{ dispositivoSelecionadoObjeto.Descricao }}</option>
                </select>
                <select id="sel-dispositivo" class="input-base" ng-model="dispositivoSelecionado" ng-change="SelecionarDispositivo(dispositivoSelecionado)"
                        ng-disabled="Edicao" ng-style="{ 'background' : Edicao ? '#eee' : 'white' }">
                    <option value="{{dispositivoSelecionadoObjeto.Codigo}}" ng-if="Edicao" selected>{{ dispositivoSelecionadoObjeto.Descricao }}</option>
                </select>
            </span>

            <linkto ng-hide="Edicao" link="Terminais/Dispositivos/Cadastro" class="icon-plus2 add-more float-right" title="Cadastrar Dispositivo"></linkto>
            <div class="clear"></div>

            <label><strong>Local *</strong></label>
            <div class="select" ng-class="{ 'disabled' : Edicao}">
                <input class="" ng-readonly="Edicao" ng-style="{ 'background-color' : Edicao ? '#eee' : 'white' }" id="inputAutoComplete" type="text" placeholder="Pesquise por local..." ng-model="filtroLocal" ng-change="filtarPorLocal()" ng-click="clickAutoComplete()" ng-keydown="keyDownAutoComplete($event.which)" ng-class="{ 'border-red' : Obrigatorio.Local }" />
                <ul class="sel-list" id="listAutoComplete">
                    <li lastrepeatdirective ng-repeat="t in Terminais | orderBy:'-Descricao':true track by $index" ng-click="SelecionarTerminal(t)">{{ t.Descricao }}</li>
                    <li ng-show="Terminais.length == 0" ng-click="SelecionarTerminal(null)">Nenhum item encontrado com '{{filtroLocal}}'...</li>
                </ul>
            </div>

            <label><strong>Linhas</strong></label>
            <br />
            <div class="area-forms">
                <input type="text" placeholder="Pesquise pela linha..." ng-model="filtroCheck" />
                <br />
                <ul class="area-checkbox">
                    <li>
                        <label ng-click="SelecionarTodasLinhas();"><span ng-class="{ 'border-red' : Obrigatorio.Linha }" class="checkbox checkbox-{{SelecionarTodos ? 'checked' : 'unchecked'}}"></span>Todos</label>
                    </li>
                    <li lastrepeatdirective ng-repeat="l in Linhas | filter : filtroCheck | orderBy:'-DescricaoLinha':true">
                        <label ng-click="SelecionarCheckLinha(l);"><span ng-class="{ 'border-red' : Obrigatorio.Linha }" class="checkbox checkbox-{{l.Selecionado ? 'checked' : 'unchecked'}}" name="{{ l.IdentificadorLinha }}" value="{{ l.IdentificadorLinha }}"></span>{{ l.IdentificadorLinha + ' - ' + l.DescricaoLinha }}</label>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-2 font-arial padding-left-20 padding-bottom-40">
            <label><strong>Identificador</strong></label>
            <p style="line-height: 35px; margin-bottom: 10px;" ng-model="Identificador">{{Identificador | uppercase}}</p>

            <label for="sel-template"><strong>Template *</strong></label>
            <span class="select-custom" ng-class="{ 'disabled' : Edicao}">
                <select id="sel-template" class="input-base" ng-model="templateSelecionado" ng-change="SelecionarTemplate(templateSelecionado)"
                        ng-options="t.Codigo as t.Descricao for t in Templates" ng-disabled="Edicao" ng-style="{ 'background' : Edicao ? '#eee' : 'white' }">
                    <option value="">Selecione</option>
                </select>
            </span>
        </div>

        <div class="clear"></div>
        <button class="blue-button float-left margin-bottom-40" type="button" ng-click="Salvar()">Salvar</button>
        <div class="clear"></div>
        <!-- /conteúdo -->

        <rodape></rodape>
    </div>
</div>