<div class="container-fluid" style="background: #f9f9f9;padding:0px">
  <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
      <p>{{headTitle | translate}}</p>
      <p *ngIf="showError" style="text-align: center;color: red;font-weight: 500">{{errorMsg}}</p>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-12">
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
      </div>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-6">
          <md-form-field class="example-full-width width">
              <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId" required>
              <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
          </md-form-field>
      </div>
      <div class="col-6">
          <md-form-field class="example-full-width width">
              <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}" name="first_name" required>
              <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
          </md-form-field>
      </div>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-6">
          <md-form-field class="example-full-width width">
              <input mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}" name="last_name" required>
              <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
          </md-form-field>
      </div>
      <div class="col-6">
          <md-form-field class="example-full-width width" (click)="stren();">
              <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill"  name="emaill" placeholder="{{'Enter Email ID ' | translate}}">
          </md-form-field>
      </div>
  </div>
  <div class="row" style="margin:0px" *ngIf="updateBtn === false">
      <div class="col-6">
          <md-form-field class="example-full-width width" (click)="stre();">
              <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p1')">{{passwordIcon}}</md-icon>
              <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" (keypress)="click2($event2)" mdInput type="{{passwordtype}}" [(ngModel)]="passwordd" name="passwordd" placeholder="{{'Enter Password' | translate}}" minlength="6" maxlength="12" required>
              <md-error class="required">{{'Invalid Password' | translate}}</md-error>
          </md-form-field>
      </div>
      <div class="col-6">
          <md-form-field class="example-full-width width" (click)="stre();">
              <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p2')">{{passwordIcon_1}}</md-icon>
              <input mdInput type="{{passwordtype_1}}" [(ngModel)]="password2" name="password2" placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12" required>
              <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
          </md-form-field>
      </div>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-6">
     
          <md-form-field class="example-full-width width" (click)="stren();">
              <input type="tel" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" minlength="10" maxlength="10">
          </md-form-field> 
      </div>
      <div class="col-6">
          <md-form-field class="example-full-width width">
              <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}" name="address" required>
              <md-error class="pattern">{{'Please Enter address' | translate}}</md-error>
          </md-form-field>
      </div>
  </div>
  <div class="row" style="margin:0px">
    <div *ngIf="isOrganisation" class="col-6" style="margin-bottom: 20px;">
        <lable>Role</lable>
        <select class="form-control" [(ngModel)]="selectedRole">
            <option *ngFor="let item of role1"  [value]="item.value" >{{item.name}}</option>
        </select>
        </div>
    <div *ngIf="!isOrganisation" class="col-6" style="margin-bottom: 20px;">
        <lable>Role</lable>
        <select class="form-control" [(ngModel)]="selectedRole">
            <option *ngFor="let item of role" [value]="item.value">{{item.name}}</option>
        </select>
    </div>
      <div class="col-6" style="margin-bottom: 20px;">
          <lable>Timezone</lable>
          <select id="dbselect" >
              <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
          </select>
      </div>
  </div> 
  <!-- <div class="row" style="margin:0px">
      <div class="col-12"> <span>{{'Upload Documents' | translate}} :</span>
          <button mdTooltip="upload Documents" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')">
              <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
          </button>
      </div>
  </div>
  <div class="row" style="margin:0px" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
      <div class="col-3" style="padding-right: 0px">
          <md-select class="example-full-width width" (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype" placeholder="{{'Doc Type' | translate}}">
              <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
          </md-select>
      </div>
      <div class="col-3" style="margin-top: 4px;padding-right: 0px">
          <md-form-field class="example-full-width width">
              <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
          </md-form-field>
      </div>
      <div class="col-4" style="margin-top: 7px;padding-right: 0px">
      
          <input type="file" class="form-control" placeholder='{{"Choose a file..." | translate}}' (change)="onFileChanged($event)" />
      </div>
      <div class="col-2" style="padding-right: 0px">
          <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)">cloud_upload</md-icon>
          <md-icon style="float: right;width:50px;height:50px;color:#d81111;; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)">delete</md-icon>
      </div>
  </div> -->
  <div class="row" style="margin:0px" style="text-align: center;padding-top: 20px;">
      <div class="col-12">
          <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="check()">{{'SUBMIT' | translate}}</button>
          <button style="background-color: red;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
      </div>
  </div>
</div>
