<div class="d-flex justify-content-center mx-0">
    <div class="row">
        <app-badge [item]="stockDataService.selectedStock"></app-badge>
    </div>
</div>

<div class="container">
    <div class="row py-4 d-flex justify-content-between">
        <div class="col col-3 d-flex justify-content-start px-0">
            <kendo-dropdownlist
                kendoDropDownFilter
                appDropDownListPopupSelector
                [data]="uncategorizedSymbols"
                class="dropdownlist-add-new mr-3"
                [popupSettings]="{ width: '250px' }"
                (valueChange)="addStockToPortfolio($event)"
            >
                <ng-template kendoDropDownListValueTemplate>
                    <kendo-svg-icon [icon]="plusIcon"></kendo-svg-icon>
                    <span class="k-icon k-i-plus"></span>
                    Add new
                </ng-template>
            </kendo-dropdownlist>
            <button kendoButton *ngIf="selectedRows.length" [look]="'flat'" [svgIcon]="trashIcon" (click)="removeStockFromPortfolio()">
                Remove
            </button>
        </div>

        <app-navigation class="col"></app-navigation>

        <div class="col-3">
            <!-- filter drop-down placeholder -->
        </div>
    </div>

    <div class="row">
        <kendo-grid
            class="stocks-grid"
            [data]="gridView"
            [sortable]="true"
            [sort]="sort"
            [selectable]="{
                mode: 'single'
            }"
            [(selectedKeys)]="selectedRows"
            [kendoGridSelectBy]="'symbol'"
            (sortChange)="sortChange($event)"
            (selectionChange)="handleSelectionChange($event)"
            [resizable]="true"
        >
            <kendo-grid-checkbox-column [width]="40"></kendo-grid-checkbox-column>
            <kendo-grid-column field="symbol" title="Symbol" [width]="100"></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]="100">
                <ng-template kendoGridHeaderTemplate let-dataItem>
                    Price
                    <span class="grid-header-subtitle">(Intraday)</span>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem>
                    {{ dataItem.price | currency : stockDataService.selectedCurrency : 'symbol' }}
                </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>
                    <kendo-chart style="height: 50px" [transitions]="false" [renderAs]="'svg'" [chartArea]="{ background: 'transparent' }">
                        <kendo-chart-value-axis>
                            <kendo-chart-value-axis-item [visible]="false" [majorGridLines]="{ visible: false }">
                            </kendo-chart-value-axis-item>
                        </kendo-chart-value-axis>
                        <kendo-chart-category-axis>
                            <kendo-chart-category-axis-item [visible]="false" [majorGridLines]="{ visible: false }">
                            </kendo-chart-category-axis-item>
                        </kendo-chart-category-axis>
                        <kendo-chart-series>
                            <kendo-chart-series-item
                                [type]="'line'"
                                [data]="dataItem.intraday"
                                [markers]="{ visible: false }"
                                [color]="dataItem.change_pct > 0 ? 'green' : 'red'"
                            >
                            </kendo-chart-series-item>
                            <kendo-chart-series-item
                                [type]="'area'"
                                [data]="dataItem.intraday"
                                [markers]="{ visible: false }"
                                [color]="dataItem.change_pct > 0 ? 'green' : 'red'"
                                [opacity]="0.2"
                            >
                            </kendo-chart-series-item>
                        </kendo-chart-series>
                        <kendo-chart-tooltip></kendo-chart-tooltip>
                    </kendo-chart>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    </div>
</div>

<div kendoDialogContainer></div>
