<form id="modal-criar-rota-manualmente" name="formCriarRotaManualmente"
      ng-submit="formCriarRotaManualmente.$valid && vm.criarRota(vm.formCriarRotaManualmente, vm.fecharModalCriarRotaManualmente)"
      novalidate form-validation-directive>

    <div class="content-modal-criar-rota-manualmente">
        <div id="modalNotificationOuter" class="notification-modal"></div>

        <h3 class="title-info-rota">
            <span>Informações da rota</span>
            <hr>
        </h3>

        <fieldset class="field-descricao" ng-class="{'invalid': !formCriarRotaManualmente.descricaoRota.customValidation}">
            <label for="descricao-rota" class="label-default">Nome da rota:</label>
            <input type="text" name="descricaoRota" id="descricao-rota" class="input-default" ng-model="vm.novaRota.Descricao" maxlength="250"
                required>

            <span class="message">{{formCriarRotaManualmente.descricaoRota.serverMsg || 'Informe uma descrição para a rota'}}</span>
        </fieldset>

        <fieldset class="field-apelido" ng-class="{'invalid': !formCriarRotaManualmente.apelidoRota.customValidation}">
            <label for="apelido-rota" class="label-default">Apelido:</label>
            <input type="text" name="apelidoRota" id="apelido-rota" class="input-default" ng-model="vm.novaRota.Apelido" maxlength="10"
                required>
            <span class="message">{{formCriarRotaManualmente.apelidoRota.serverMsg || 'Informe um apelido para a rota'}}</span>
        </fieldset>

        <h3 class="title-selecionar-setor">
            <span>Selecionar Setor</span>
            <hr>
        </h3>

        <div class="field-busca">
            <i class="icon-search"></i>
            <input type="search" class="input-default" placeholder="Buscar setor..." ng-model="searchSetor">
        </div>

        <div class="validation-table" ng-class="{'invalid': !formCriarRotaManualmente.codigoSetor.customValidation}">
            <input type="hidden" name="codigoSetor" id="codigo-setor" class="input-default" ng-model="vm.novaRota.CodigoSetor" required>
            <div class="scroll-table-default">
                <table class="table-criar-rota">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Setor</th>
                            <th>Apelido</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in vm.listaSetores | filter: searchSetor" ng-class="{'active': item.Codigo == vm.novaRota.CodigoSetor }"
                            ng-hide="searchSetor.length > 0 && item.Apelido.indexOf(searchSetor) == -1 && item.Descricao.indexOf(searchSetor) == -1"
                            grid-repeat-done>
                            <td>
                                <span class="radio">
                                    <span>
                                        <input type="radio" name="radioCodigoSetor" id="codigoSetor-{{$index}}" ng-value="item.Codigo" ng-model="vm.novaRota.CodigoSetor"
                                            required>
                                        <label for="codigoSetor-{{$index}}"></label>
                                    </span>
                                </span>
                            </td>

                            <td>
                                <label for="codigoSetor-{{$index}}" title="{{item.Descricao}}">{{item.Descricao}}</label>
                            </td>
                            <td>
                                <label for="codigoSetor-{{$index}}">{{item.Apelido}}</label>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <span class="message message-validation-table">{{formCriarRotaManualmente.codigoSetor.serverMsg || 'Selecione um setor antes de prosseguir'}}</span>
        </div>
    </div>

    <footer class="modal-footer">
        <a href="#" class="link-cancel" ng-click="vm.fecharModalCriarRotaManualmente()">
            <i class="icon-cross"></i> Cancelar
        </a>

        <button class="btn-base btn-size-s btn-color-default btn-action"
                ng-disabled="formCriarRotaManualmente.custom_status === 'SENDING'">
            {{formCriarRotaManualmente.custom_status == 'SENDING' ? 'Criando rota...' :
            (formCriarRotaManualmente.custom_status == 'SEND_SUCCESS' ? 'Rota criada' : 'Criar rota')}}
        </button>
    </footer>
</form>
