<aside class="sidebar-inner">
    <header class="sidebar-inner-header">
        <h2 class="heading">
            Detalhes do Trecho
        </h2>
        <i class="icon-direction link-close" ng-click="vm.toggleSidebarInconformidades()"></i>
    </header>
    <div class="sidebar-inner-main">
        <form class="form-trecho-ativo" id="form-trecho-ativo" name="formTrechoAtivo" novalidate>
            <div class="title-container">
                <h3 class="sub-title">Trecho {{vm.trechoAtivo.Codigo}}</h3>
                <span class="comp-info">{{vm.trechoAtivo.Tipo}} | Distância: {{vm.trechoAtivo.Distancia}}m</span>
            </div>
            <div class="dias-da-semana">
                <fieldset>
                    <label class="label-default" for="seg-{{vm.trechoAtivo.Codigo}}">Seg</label>
                    <input class="input-default" type="text" id="seg-{{vm.trechoAtivo.Codigo}}" name="seg-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.seg.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.seg.Check">
                </fieldset>
                <fieldset>
                    <label class="label-default" for="ter-{{vm.trechoAtivo.Codigo}}">Ter</label>
                    <input class="input-default" type="text" id="ter-{{vm.trechoAtivo.Codigo}}" name="ter-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.ter.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.ter.Check">
                </fieldset>
                <fieldset>
                    <label class="label-default" for="qua-{{vm.trechoAtivo.Codigo}}">Qua</label>
                    <input class="input-default" type="text" id="qua-{{vm.trechoAtivo.Codigo}}" name="qua-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.qua.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.qua.Check">
                </fieldset>
                <fieldset>
                    <label class="label-default" for="qui-{{vm.trechoAtivo.Codigo}}">Qui</label>
                    <input class="input-default" type="text" id="qui-{{vm.trechoAtivo.Codigo}}" name="qui-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.qui.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.qui.Check">
                </fieldset>
                <fieldset>
                    <label class="label-default" for="sex-{{vm.trechoAtivo.Codigo}}">Sex</label>
                    <input class="input-default" type="text" id="sex-{{vm.trechoAtivo.Codigo}}" name="sex-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.sex.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.sex.Check">
                </fieldset>
                <fieldset>
                    <label class="label-default" for="sab-{{vm.trechoAtivo.Codigo}}">Sab</label>
                    <input class="input-default" type="text" id="sab-{{vm.trechoAtivo.Codigo}}" name="sab-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.sab.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.sab.Check">
                </fieldset>
                <fieldset>
                    <label class="label-default" for="dom-{{vm.trechoAtivo.Codigo}}">Dom</label>
                    <input class="input-default" type="text" id="dom-{{vm.trechoAtivo.Codigo}}" name="dom-{{vm.trechoAtivo.Codigo}}" ng-model="vm.trechoAtivo.RotasHorariosInconformidades.dom.Hora"
                        ng-change="vm.alterarInconformidade()" clock-picker data-placement="left" data-min-time="-10" data-max-time="+1M +10D"
                        data-status="enabled" ng-disabled="!vm.trechoAtivo.RotasHorariosInconformidades.dom.Check">
                </fieldset>
            </div>

            <fieldset class="field-geocode field-rua">
                <label class="label-default" for="campo-rua">Rua:</label>
                <div>
                    <input class="input-default campo-endereco" id="campo-rua" name="Rua" ng-change="vm.alterarInconformidade()" ng-model="vm.trechoAtivo.Rua"
                        maxlength="250" autocomplete="off">
                    <button class="btn-base btn-size-s btn-color-default buscar-endereco" ng-click="vm.geocodeReverse(0)" title="Clique para selecionar a rua">
                        <img class="img-cursor-geocode" src="{{vm.appPath}}/images/ico_transversal.png" alt="">
                    </button>
                </div>
            </fieldset>
            <fieldset class="field-geocode field-transversal-inicio">
                <label class="label-default" for="campo-transversal-inicio">Transversal Início:
                </label>
                <div>
                    <input class="input-default campo-endereco" id="campo-transversal-inicio" name="TransversalInicio" ng-change="vm.alterarInconformidade()"
                        ng-model="vm.trechoAtivo.TransversalInicio" maxlength="250" autocomplete="off">
                    <button class="btn-base btn-size-s btn-color-default buscar-endereco" ng-click="vm.geocodeReverse(1)" title="Clique para selecionar a rua">
                        <img class="img-cursor-geocode" src="{{vm.appPath}}/images/ico_transversal.png" alt="">
                    </button>
                </div>
            </fieldset>
            <fieldset class="field-geocode field-transversal-fim">
                <label class="label-default" for="campo-transversal-fim">Transversal Fim:
                </label>
                <div>
                    <input class="input-default campo-endereco" id="campo-transversal-fim" name="TransversalFim" ng-change="vm.alterarInconformidade()"
                        ng-model="vm.trechoAtivo.TransversalFim" maxlength="250" autocomplete="off">
                    <button class="btn-base btn-size-s btn-color-default buscar-endereco" ng-click="vm.geocodeReverse(2)" title="Clique para selecionar a rua">
                        <img class="img-cursor-geocode" src="{{vm.appPath}}/images/ico_transversal.png" alt="">
                    </button>
                </div>
            </fieldset>

            <fieldset class="featured">
                <label class="label-default" for="instrução-trecho-inconforme">Instrução:</label>
                <span class="select">
                    <select name="Instrução" id="instrução-trecho-inconforme" class="select-instrucao" ng-change="vm.alterarInconformidade()"
                        ng-model="vm.trechoAtivo.Instrucao">
                        <option ng-repeat="item in vm.listaInstrucoes track by $index" value="{{item.Codigo}}" ng-bind-html="item.Descricao"></option>
                    </select>
                </span>
            </fieldset>
        </form>

        <fieldset class="ordenacao-trechos-container">
            <label class="label-default" for="order-by">Ordenar por</label>
            <span class="select">
                <select name="orderBy" id="order-by" ng-model="vm.listaTrechoOrdem" ng-init="vm.listaTrechoOrdem = '-Inconforme'">
                    <option value="-Inconforme" selected>Inconformidades ({{vm.inconformidades.length}})</option>
                    <option value="Codigo">Sequência de trechos</option>
                </select>
            </span>
        </fieldset>

        <div class="lista-trechos-container">
            <div class="item-trecho" ng-click="vm.marcarTrecho(trecho)" ng-repeat="trecho in vm.listaTrechos | orderBy: vm.listaTrechoOrdem"
                ng-class="{'selecionado': vm.trechoAtivo.Codigo == trecho.Codigo}" data-trecho="{{trecho.Codigo}}">
                <h5 class="sub-title">Trecho {{trecho.Codigo}}</h5>
                <span class="comp-info">{{trecho.Tipo}} | Distância: {{trecho.Distancia}}m</span>
                <span class="label-status inconforme" ng-if="trecho.Inconforme && !trecho.Ajustado">
                    <i class="icon-warning-circle"></i> Inconformidade </span>
                <span class="label-status ajustado" ng-if="trecho.Inconforme && trecho.Ajustado">
                    <i class="icon-warning-circle"></i> Ajustado </span>
            </div>
        </div>
    </div>
</aside>
