<div>
    <div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
        <div class="p-2" style="width: 150px">Name</div>
        <div class="p-2" style="flex-grow: 1">Description</div>
        <div class="p-2 text-center" style="width: 100px">Created</div>
        <div class="p-2 text-right" style="width: 100px">$/Kg</div>
    </div>
    <div class="border-bottom w-100 py-2 text-center">
        <a (click)="createComponent()" [routerLink]="">+ Add Component</a>
    </div>
    <div *ngFor="let c of store.components | async" class="border-bottom d-flex w-100 py-2">
        <div class="px-2" style="width: 150px"><a (click)="createComponent(c)" [routerLink]="">{{c.name}}</a></div>
        <div class="px-2" style="flex-grow: 1">{{c.description}}</div>
        <div class="px-2 text-center" style="width: 100px">{{c.createdOn.seconds * 1000 | date}}</div>
        <div class="px-2 text-right" style="width: 100px">{{c.price | currency}}</div>
    </div>
</div>
