<div class="row no-gutters mx-1 py-2">
  <div class="col-1">
    <button class="btn btn-link p-0" (click)="detailsExposed = !detailsExposed">{{ product.id}}</button>
  </div>
  <div class="col overflow-hidden">
    <button class="btn btn-link p-0" (click)="detailsExposed = !detailsExposed">{{getName()}}</button>
  </div>
  <div class="col overflow-hidden" *ngIf="showImageDetails()">
    {{ getPhaseCenterRA() }} <span class="badge badge-light border">RA</span>
    {{ getPhaseCenterDec() }} <span class="badge badge-light border mr-3">Dec</span>
    {{ getImageSizeX() }} <span class="badge badge-light border">x</span>
    {{ getImageSizeY() }} <span class="badge badge-light border">y</span>
  </div>
  <div class="col-auto">
    <div class="col-auto" ngbDropdown>
      <button class="btn btn-xs" [ngClass]="getStatusBadgeClass()" type="button" ngbDropdownToggle>
        {{ product.status }}
      </button>
      <ul ngbDropdownMenu>
        <li ngbDropdownItem *ngFor="let ps of productStatuses">
          <button type="button" class="btn btn-link p-0" (click)="updateStatus(ps)">{{ps}}</button>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-auto" *ngIf="canDeleteProducts">
    <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteProduct()">&times;</button>
  </div>
</div>

<div class="p-3 mx-1 mb-2 shadow bg-white" *ngIf="detailsExposed" @vslider>
  <app-product-details [product]="product"></app-product-details>
</div>
<div class="border-bottom mx-1 row no-gutters"></div>