<div class="k-custom-notification">
    <div class="k-widget k-notification k-notification-info">
        <div class="k-notification-wrap">
            <kendo-svgicon [icon]="infoIcon"></kendo-svgicon>
            <div class="k-notification-content">Select rows and right click the Grid in order to choose the desired
                Chart and generate it.</div>
        </div>
    </div>
</div>

<kendo-grid #grid [data]="gridData" [selectable]="selectableSettings" [height]="500" [kendoGridSelectBy]="selectBy"
    [selectedKeys]="mySelection" (cellClick)="onCellClick($event)" (selectionChange)="onSelectionChange()">
    <kendo-grid-checkbox-column [showSelectAll]="true" [width]="35"></kendo-grid-checkbox-column>

    <kendo-grid-column class="grid-symbol-col" field="symbol" title="Symbol" [width]="80"></kendo-grid-column>
    <kendo-grid-column field="name" title="Name" [width]="140"></kendo-grid-column>

    <kendo-grid-column class="price-col" field="price" title="Price" [width]="80">
        <ng-template kendoGridHeaderTemplate let-dataItem>
            Price
            <span class="grid-header-subtitle">(Intraday)</span>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            {{ dataItem.price | currency: 'USD' }}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="day_change" title="Change" media="(min-width: 768px)">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span
                [ngClass]="{ 'grid-cell-positive' : dataItem.day_change > 0, 'grid-cell-negative' : dataItem.day_change < 0 }">
                {{ dataItem.day_change > 0 ? ('+' + dataItem.day_change) : dataItem.day_change }}
            </span>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="change_pct" title="%Change" media="(min-width: 768px)">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span
                [ngClass]="{ 'grid-cell-positive' : dataItem.change_pct > 0, 'grid-cell-negative' : dataItem.change_pct < 0 }">
                {{ dataItem.change_pct > 0 ? ('+' + dataItem.change_pct) : dataItem.change_pct }}%
            </span>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="volume" title="Volume" [width]="100" media="(min-width: 768px)">
        <ng-template kendoGridCellTemplate let-dataItem>
            {{ dataItem.volume | numberFormat }}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column class="grid-avg-volume-col" field="volume_avg" title="Avg Vol" media="(min-width: 768px)">
        <ng-template kendoGridHeaderTemplate let-dataItem>
            Avg Vol
            <span class="grid-header-subtitle">(3 month)</span>
        </ng-template>

        <ng-template kendoGridCellTemplate let-dataItem>
            {{ dataItem.volume_avg | numberFormat }}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="market_cap" title="Market Cap" media="(min-width: 1200px)">
        <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.market_cap | numberFormat}}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column class="grid-pe-ratio-col" media="(min-width: 1200px)" field="pe" title="PE Ratio">
        <ng-template kendoGridHeaderTemplate let-dataItem>
            PE Ratio
            <span class="grid-header-subtitle">(TTM)</span>
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column class="grid-one-day-chart" media="(min-width: 992px)" field="intraday" title="1 Day Chart"
        [width]="170" [sortable]="false">
        <ng-template kendoGridCellTemplate let-dataItem>
            <day-chart [data]="dataItem.intraday" [changePct]="dataItem.change_pct">
            </day-chart>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-excel fileName="Stocks.xlsx" [fetchData]="allData">
        <kendo-excelexport-column field="symbol" title="Symbol"></kendo-excelexport-column>
        <kendo-excelexport-column field="Name" title="Name"></kendo-excelexport-column>
        <kendo-excelexport-column field="price_col" title="Price"></kendo-excelexport-column>
        <kendo-excelexport-column field="day_change" title="Change"></kendo-excelexport-column>
        <kendo-excelexport-column field="change_pct" title="% Change"></kendo-excelexport-column>
        <kendo-excelexport-column field="volume" title="Volume"></kendo-excelexport-column>
        <kendo-excelexport-column field="volume_avg" title="Average Volume"></kendo-excelexport-column>
        <kendo-excelexport-column field="market_cap" title="Market Capital"></kendo-excelexport-column>
        <kendo-excelexport-column field="pe" title="PE Ratio"></kendo-excelexport-column>
    </kendo-grid-excel>
</kendo-grid>

<kendo-contextmenu #gridmenu [items]="items" (select)="onSelect($event)" [openOnClick]="{toggle:'click'}">
    <ng-template kendoMenuItemTemplate let-item="item" let-index="index">
        <span *ngIf="item.iconClass" [ngClass]="item.iconClass" class="chart-png"></span>
        <div class="menu-item">{{ item.text }}</div>
    </ng-template>
</kendo-contextmenu>

<kendo-window title="Stock Portfolio Details" *ngIf="opened" (close)="close()" [top]="150" [minWidth]="250"
    [width]="700" [height]="550">
    <window-component [data]="mySelection" [chartConfiguration]="chartConfiguration"></window-component>
</kendo-window>