<div class="main-content main-atf">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-green">
                        <h4 class="card-title">{{action}} categoría</h4>
                        <p class="card-category">Los cambios se aplicarán de inmediato en la App.</p>
                    </div>
                    <div class="card-body">
                      <div class="row">
                        <div class="col-md-4">
                          <img class="img-product" src="{{(data.banner == '' ? 'assets/img/product.png' : data.banner)}}" />
                          <button class="btn btn-primary" (click)="changeImage($event)"> <i class="fa fa-photo" aria-hidden="true"></i> Cambiar imagen </button>
                          <input type="file" id="changeImage" (change)="changeImagePlay($event)" style="display:none" accept="image/x-png,image/gif,image/jpeg" />
                        </div>
                        <div class="col-md-8">
                          <div class="row">
                            <div class="col-md-8">
                              <div class="row">
                                <div class="col-md-6">
                                  <mat-form-field class="example-full-width">
                                    <input matInput placeholder="Nombre" type="text" [(ngModel)]="data.name">
                                  </mat-form-field>
                                </div>
                                <div class="col-md-6">
                                  <mat-form-field class="example-full-width">
                                    <mat-select placeholder="Categoría superior" [(ngModel)]="data.parent">
                                      <mat-option *ngFor="let category of categories" [value]="category.id">
                                        {{category.name}}
                                      </mat-option>
                                    </mat-select>
                                  </mat-form-field>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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>
    </div>
  </div>
  