<p class="grid-section-title">Explore the market</p>
<kendo-grid [kendoGridBinding]="(gridData | async)!" [rowClass]="rowCallback">
    <kendo-grid-column field="currency" title="Crypto currency">
        <ng-template kendoGridCellTemplate let-dataItem>
            <div class="currency-container">
                <img class="coin-logo" src="assets/coinslogo/{{ dataItem.currency }}.png" alt="coin logo" />
                <span class="currency">
                    {{ dataItem.currency }}
                </span>
                <span class="crypto-symbol"> ({{ dataItem.symbol }}) </span>
            </div>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="currentPrice" title="Price">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span
                [@positiveState]="dataItem.currentPrice > prevDataItem.currentPrice ? true : false"
                [@negativeState]="dataItem.currentPrice < prevDataItem.currentPrice ? true : false"
            >
                {{ dataItem.currentPrice | currency }}
            </span>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column class="priceColumn" field="change_24h" title="24h%">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span> {{ dataItem.change_24h | number }}% </span>
            <kendo-svg-icon [icon]="downArrowIcon" *ngIf="dataItem.change_24h < prevDataItem.change_24h"></kendo-svg-icon>
            <kendo-svg-icon [icon]="upArrowIcon" *ngIf="dataItem.change_24h > prevDataItem.change_24h"></kendo-svg-icon>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="volume" title="Market Cap" format="c"> </kendo-grid-column>
</kendo-grid>
