<div class="dealer_edit" *ngIf="pageId == 'edit'">
    <p style="font-size: 24px;color: #615f5f;" >{{'Edit Dealer' | translate}}</p>
    <p *ngIf="showError" style="text-align: center;color: red;font-weight: 500">{{errorMsg}}</p>
    <div class="row">
            <span style="padding: 17px 0px 0px 10px;">{{'User ID' | translate}}</span>
                <md-form-field class="example-full-width width" style="float: left;width: 83%;padding-left: 89px;display: inline-block;">
                        <input mdInput class="no-spin" [(ngModel)]="userId" name="userId" placeholder="{{'Enter User Id' | translate}}" required/>
                        <md-error class="required">{{'Enter User Id' | translate}}</md-error>
                    </md-form-field>
        </div>
    <div class="row">
        <span style="padding: 17px 0px 0px 10px;">{{'First name' | translate}}</span>
            <md-form-field class="example-full-width width" style="float: left;width: 78%;padding-left: 67px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="firstName" name="firstname" placeholder="{{'Enter First name' | translate}}" required/>
                    <md-error class="required">{{'Enter First name' | translate}}</md-error>
                </md-form-field>
    </div>
    <div class="row">
            <span style="padding: 17px 0px 0px 10px;">{{'Last name' | translate}}</span>
            <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 67px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="lastName" name=" lastname" placeholder="{{'Enter Last name' | translate}}" required/>
                    <md-error class="required">{{'Enter Last name' | translate}}</md-error>
                </md-form-field>
    </div>
    <div class="row">
            <span style="padding: 17px 0px 0px 10px;">{{'Email' | translate}} </span>
            <md-form-field class="example-full-width width" style="float:left;width: 84%;padding-left: 98px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="email" name="email" placeholder="{{'Enter email' | translate}}" required/>
                    <md-error class="required">{{'Enter email' | translate}}</md-error>
                </md-form-field>
    </div>
    <div class="row">         
            <span style="padding: 17px 0px 0px 10px;">{{'Mobile number' | translate}}</span>
            <md-form-field class="example-full-width width" style="float:left;width: 70%;padding-left: 30px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="PhoneNum" name=" phoneNum" placeholder="{{'Enter mobile number' | translate}}" required/>
                    <md-error class="required">{{'Enter mobile number' | translate}}</md-error>
                </md-form-field>
    </div>
    <div style="display: inline-flex;width: 75%;" >
        <span style="float: left;padding-bottom: 2px;margin-right: 58px;">{{'Expiration date' | translate}}</span>
        <owl-date-time  [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
    </div> 
    <!-- <div class="row">
            <span style="padding: 17px 0px 0px 10px;">Password </span>
            <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 69px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="password" name=" password" placeholder="Enter password" required/>
                    <md-error class="required">Enter password</md-error>
                </md-form-field>
    </div>
    <div class="row">
            <span style="padding: 17px 0px 0px 10px;">Confirm password </span>
            <md-form-field class="example-full-width width" style="float:left;width: 66%;padding-left: 30px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="cnfrmPass" name=" cnfrmPass" placeholder="Confirm password" required/>
                    <md-error class="required">Confirm password</md-error>
                </md-form-field>
    </div> -->
    <div class="row">
            <span style="padding: 17px 0px 0px 10px;">{{'Address' | translate}}</span>
            <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 75px;display: inline-block;">
                    <input mdInput class="no-spin" [(ngModel)]="address" name=" address" placeholder="{{'Enter Address' | translate}}" required/>
                    <md-error class="required">{{'Enter Address' | translate}}</md-error>
                </md-form-field>
    </div>
    
    <div class="row" style="padding-left:38%">  
                <button class="btn btn-primary btn-block/"(click)="editDealer()" style="background:green;cursor:pointer;width: 159px;height: 44px;">EDIT DEALER</button>
        </div>
    </div>
    <div *ngIf="pageId == 'delete'">
        <h4 style="text-align: center;">{{'Delete Dealer' | translate}}</h4>
        <h5 style="text-align: center;margin-top: 5%;font-size: 1.8rem;">{{'Are you sure ?' | translate}}</h5>
        <p style="text-align: center;font-size: 1.5rem;">you want to delete dealer</p>
        <button class="btn btn-primary btn-block/"(click)="deleteResponse('yes')" style="background:green;cursor:pointer;width: 159px;height: 44px;margin-left: 12%;">{{"Yes, Delete it!" | translate}}</button>
        <button class="btn btn-primary btn-block/"(click)="deleteResponse('no')" style="background:red;cursor:pointer;width: 159px;height: 44px;margin-left: 6%;">{{'Cancel' | translate}}</button>
    </div>