<div
    class="container"
    #container
    [ngStyle]="{
        'visibility': isOpen ? 'visible' : 'hidden',
        'max-height': maxHeight + 'px'
    }"
>
    <div class="title">Cadastro de Unidades</div>
    <form action="#" (mouseleave)="cadastrarUnidade()">
        <div class="user-details">
            <div class="input-row">
                <div class="input-bx">
                    <span class="details">Nome da Unidade</span>
                    <input type="text" name="nomeUnidade" id="nome" placeholder="Digite o nome da Unidade" minlength="5" required [(ngModel)]="nome" pattern="[a-zA-Zà-úÀ-Ú\s]*" #_nome="ngModel"/>
                    <div *ngIf="_nome.invalid && (_nome.dirty || _nome.touched)">
                        <div class="input-error" *ngIf="_nome.errors?.['minlength']">O nome deve ter no mínimo 5 caracteres.</div>
                        <div class="input-error" *ngIf="_nome.errors?.['required']">Este campo é obrigatório.</div>
                    </div>
                </div>
                <div class="input-bx">
                    <span class="details">CNES</span>
                    <input type="text" name="cnes" id="cnes" placeholder="6425679" required [(ngModel)]="cnes" #_cnes="ngModel" pattern="\d{3}\d{3}\d{1}">
                    <div>
                        <div class="input-error" *ngIf="_cnes.errors?.['pattern']">CNES deve conter apenas números.</div>
                    </div>
                </div>
            </div>
            <div class="input-row">
                <div class="input-bx">
                    <span class="details">CEP</span>
                    <input type="text" name="cep" id="cep" placeholder="18345-234" required [(ngModel)]="cep" #_cep="ngModel" pattern="\d{5}\-\d{3}"/>
                    <div>
                        <div class="input-error" *ngIf="_cep.errors?.['pattern']">CEP deve estar no formato XXXXX-XXX.</div>
                    </div>
                </div>
                <div class="input-bx">
                    <span class="details">Cidade</span>
                    <input type="text" name="cidade" id="cidade" [(ngModel)]="cidade" placeholder="Digite sua cidade">
                </div>
            </div>
            <div class="cep-button">
                <input type="submit"  (click)="buscarCep()" value="Buscar">
            </div>
        </div>
        
        <!-- Campos isolados -->
        <div class="user-details">
            <div class="input-row">
                <div class="input-bx">
                    <span class="details">Estado</span>
                    <input type="text" name="estado" id="uf" [(ngModel)]="uf" placeholder="Digite seu estado">
                </div>
                <div class="input-bx">
                    <span class="details">E-mail</span>
                    <input type="email" name="email" id="email" [(ngModel)]="email" placeholder="Digite seu e-mail">
                </div>
            </div>
            <div class="input-row">
                <div class="input-bx">
                    <span class="details">Criar Senha</span>
                    <div id="toggle" class="{{ hide ? 'show' : 'hide' }}" (click)="showHide()"></div>
                    <input type="{{ hide ? 'password' : 'text' }}" name="password" id="password" [(ngModel)]="password" placeholder="Crie uma senha">
                </div>
                <div class="input-bx">
                    <div id="toggle-confirm" class="{{ hide ? 'show' : 'hide' }}" (click)="showHide()"></div>
                    <span class="details">Confirmar Senha</span>
                    <input type="{{ hide ? 'password' : 'text' }}" name="passwordConfirm" id="passwordConfirm" [(ngModel)]="passwordConfirm" placeholder="Confirme sua senha" (blur)="cadastrarUnidade()">
                </div>
            </div>
        </div>
    </form>
</div>