<div class="main-content">
  <div class="container-fluid">
      <div class="row">
          <div class="col-md-8">
              <div class="card">
                  <div class="card-header card-header-green">
                      <h4 class="card-title">{{action}} usuario</h4>
                  </div>
                  <div class="card-body">
                    <div class="row">

                        <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                            <input matInput placeholder="Rut" type="text" [(ngModel)]="data.card_code" formatRut>
                            </mat-form-field>
                        </div>
                        <div class="col-md-4">
                        <mat-form-field class="example-full-width">
                            <input matInput placeholder="Nombre" [(ngModel)]="data.first_name">
                            </mat-form-field>
                        </div>
                        <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                            <input matInput placeholder="Apellido" [(ngModel)]="data.last_name">
                            </mat-form-field>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                        <mat-form-field class="example-full-width">
                            <mat-select placeholder="Estado" [(ngModel)]="data.status">
                            <mat-option *ngFor="let status of statuses" [value]="status.id">
                                {{status.name}}
                            </mat-option>
                            </mat-select>
                        </mat-form-field>
                        </div>
                        <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                            <input matInput placeholder="Email" type="email" [(ngModel)]="data.email">
                            </mat-form-field>
                        </div>
                        <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                            <input matInput placeholder="Password" type="password" [(ngModel)]="data.pw">
                            </mat-form-field>
                        </div>
                    </div>
                    
                    <!--<button mat-raised-button type="button" (click)="save()" class="btn btn-danger pull-right">Guardar</button>-->
                    <button mat-raised-button type="submit" (click)="save()" class="btn btn-success pull-right">Guardar</button>
                    <button mat-raised-button type="button" (click)="dismiss()" class="btn btn-default pull-right">Cancelar</button>
                    <div class="clearfix"></div>
                  </div>
              </div>
          </div>
          <div class="col-md-4">
              <div class="card card-profile">
                  <div class="card-avatar">
                      <a>
                        <img class="img-product" src="{{(data.avatar == '' ? 'assets/img/default.png' : data.avatar)}}" />
                        <input type="file" id="changeImage" (change)="changeImagePlay($event)" style="display:none" accept="image/x-png,image/gif,image/jpeg" />
                      </a>
                  </div>
                  <div class="card-body">
                      <!--
                      <h6 class="card-category text-gray">CEO / Co-Founder</h6>
                      <h4 class="card-title">Alec Thompson</h4>
                      <p class="card-description">
                          Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
                      </p>
                      -->
                      <a (click)="changeImage($event)" style="color:white !important;" class="btn btn-primary"><i class="fa fa-photo" aria-hidden="true"></i> Cambiar imagen</a>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
