<div class="new-user-content" *ngIf="actualUser">
  <h4>Editar Usuario</h4>
  <form class="form-horizontal" [formGroup]="userForm" (ngSubmit)="onSubmit($event)">

    <div class="form-group">
     <div class="col-6">
        <label for="name" class="control-label required">Nombre</label>
        <input type="text" id="name" class="form-control" [(ngModel)]="actualUser.name" #name="ngModel" [ngModelOptions]="{standalone: true}">
     </div>

      <div class="col-6">
        <label for="email" class="control-label required">Email</label>
        <input type="text" id="email" class="form-control" [(ngModel)]="actualUser.email" #email="ngModel" [ngModelOptions]="{standalone: true}">
      </div>
    </div>
    
    <div class="form-group">
         <div class="col-6">
           <label for="password" class="control-label required">Clave</label>
           <input type="text" placeholder="Ingrese solo para cambiar" class="form-control" [(ngModel)]="mypass" #password="ngModel" [ngModelOptions]="{standalone: true}">
         </div>
       </div>
       
    <div class="form-group">
      <div class="col-6">
        <label for="role" class="control-label required">Rol</label>
        <select [ngClass]="{'error': userForm.controls.role.errors && userForm.get('role').touched }"
            id="role" class="form-control" formControlName="role" name="role" (change)="setTemporalRole($event)"  required>
          <option value="1" selected="{{ (actualUser.role == 1) ? 'selected' : '' }}">Supervisor</option>
          <option value="2" selected="{{ (actualUser.role == 2) ? 'selected' : '' }}">Vendedor</option>
        </select>
        <div *ngIf="userForm.controls.role.errors && userForm.get('role').touched" class="error">
          Seleccione un rol
        </div>
      </div>
    </div>

    <div class="form-group" *ngIf="actualUser.role==2">
      <!--
      <div class="col-6">
        <label for="branch" class="control-label">Sucursal</label>
        <input type="text" id="branch" class="form-control" [(ngModel)]="actualUser.branch" #branch="ngModel" [ngModelOptions]="{standalone: true}">
      </div>
    -->
      <div class="col-6">
        <label for="branch_address" class="control-label">Sucursal</label>
        <select #branch_address="ngModel" id="branch_address" class="form-control" [(ngModel)]="actualUser.branch_address" [ngModelOptions]="{standalone: true}">
            <option value="Avenida Kennedy 8036, Vitacura.">Avenida Kennedy 8036, Vitacura.</option>
            <option value="Santa Rosa 866, esquina Santa Rosa, Stgo. Centro">Santa Rosa 866, esquina Santa Rosa, Stgo. Centro</option>
            <option value="Club Hipico 1112, Stgo. Centro">Club Hipico 1112, Stgo. Centro</option>
            <option value="Viña Avenida Alessandri 1055, Esquina 22 Norte.">Viña Avenida Alessandri 1055, Esquina 22 Norte.</option>
        </select>
      </div>

    </div>



    <button class="btn btn-primary">Guardar</button>
    <button class="btn btn-info" [routerLink]="['/admin/users']">Volver</button>
  </form>
</div>

