<div class="main-content">
  <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 ">Recetas por autorizar</h4>
                      <p class="card-category"> Listado de recetas pendientes de autorizar</p>
                  </div>
                  <div class="card-body">
                     
                      <div class="table-responsive">
                          <table class="table">
                              <thead class="table table-hover table-bordered">
                                  <th>Nro.</th>
                                  <th>Cliente</th>
                                  <th>Grs/día</th>
                                  <th>Periodo</th>
                                  <th>Grs/Periodo</th>
                                  <th>Doctor</th>
                                  <th>Imagenes</th>
                                  <th>Opciones</th>
                              </thead>
                              <tbody>
                                  <tr *ngIf="prescriptions.length == 0">
                                      <td colspan="8">No hay datos para mostrar</td>
                                  </tr>
                                  <tr *ngFor="let prescription of prescriptions; let i = index">
                                      <td>{{prescription.id}}</td>
                                      <td>{{prescription.first_name}} {{prescription.last_name}}</td>
                                      <td>{{prescription.day_declared_qty | number}} x {{prescription.total_days_in_range | number}} días</td>
                                      <td>{{prescription.start_at | date:'dd/MM'}} al {{prescription.expire_at | date:'dd/MM'}} </td>
                                      <td>{{prescription.pending_qty | number}} grs</td>
                                      <td>{{prescription.doctor_name}}<br />{{prescription.doctor_cardcode | rut}}</td>
                                      <td>
                                          <img [src]="file" *ngFor="let file of renderFiles(prescription.files)" (click)="lightbox(file)" class="img-receta" />
                                      <td>
                                        <button (click)="aprobar(i)" class="btn btn-xs btn-success">Aprueba</button>
                                        <button (click)="rechazar(i)" class="btn btn-xs btn-danger">Rechaza</button>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
