<garden-navbar-component #nav></garden-navbar-component>

<div class="panel panel-info" *ngIf="nav.currentCN">
    <table class="table text-center">
        <tr>
            <th class="flower-col text-center panel-heading">Flower</th>
            <th class="bed-col text-center panel-heading">Bed</th>
        </tr>
        <tr *ngFor="let each of currentList | filterBy: {commonName: nav.currentCN}">
            <td class="flower-col" [routerLink]="['/plants', each.id, {srcBed:bed}]">{{each.cultivar}}<br>{{each.commonName}}</td>
            <td class="bed-col">{{each.gardenLocation}}</td>
        </tr>
    </table>
</div>

<!--Todo Add instructions :)-->

<h3> See the flowers in a specific bed in two steps using our QR-Codes!</h3>
<h3> Instructions: </h3>
<b>Step 1)</b> Open a QR-Code Scanner App on your smartphone.<br/>
<b>Step 2)</b> Point the camera towards the QR-Code on the sign to scan it.

<style>
    .flower-col {
        width: 70%;
    }
    .bed-col {
        width: 30%;
    }
</style>
<garden-navbar-component #nav></garden-navbar-component>

<div class="panel panel-info" *ngIf="nav.currentCN">
    <table class="table text-center">
        <tr *ngIf="(currentList | filterBy: {commonName: nav.currentCN}).length !== 0">
            <th class="flower-col text-center panel-heading">Flower</th>
            <th class="bed-col text-center panel-heading">Bed</th>
        </tr>
        <tr *ngIf="(currentList | filterBy: {commonName: nav.currentCN}).length === 0">
            <th class="flower-col text-center panel-heading">No flowers found for "{{nav.currentCN}}"</th>
        </tr>
        <tr *ngFor="let each of currentList | filterBy: {commonName: nav.currentCN}">
            <td class="flower-col" [routerLink]="['/plants', each.id, {srcBed:bed}]">{{each.cultivar}}<br>{{each.commonName}}</td>
            <td class="bed-col">{{each.gardenLocation}}</td>
        </tr>
    </table>
</div>

<!--Todo Add instructions :)-->

<h3> See the flowers in a specific bed in two steps using our QR-Codes!</h3>
<h3> Instructions: </h3>
<b>Step 1)</b> Open a QR-Code Scanner App on your smartphone.<br/>
<b>Step 2)</b> Point the camera towards the QR-Code on the sign to scan it.

<style>
    .flower-col {
        width: 70%;
    }
    .bed-col {
        width: 30%;
    }
</style>
Hide list header on the homepage when there is no matching flower
Hide list header on the homepage when there is no matching flower

Issue: #9
