<!--
<c-header-nav class="d-lg-flex me-auto">
  <c-nav-item>
    <a cNavLink routerLink="/#/dashboard" routerLinkActive="active">
        Dashboard
    </a>
  </c-nav-item>
</c-header-nav>
-->

<div>
  <ul class="nav navbar-nav d-md-down-none">
    <li class="nav-item px-3">
      <a class="nav-link" href="#/dashboard">Sidebar</a>
    </li>
  </ul>
</div>

<div>
  <app-dgauge #dgauge id="dgauge">

  </app-dgauge>
</div>

<div>
  <dx-data-grid #positionsContainer id="positionsContainer" [dataSource]="dataSource" [showBorders]="true"
    [columnHidingEnabled]="true" [repaintChangesOnly]="true" [highlightChanges]="true"
    (onCellClick)="onClickCell($event)" (onToolbarPreparing)="onToolbarPreparing($event)">
    <dxo-paging [enabled]="true"></dxo-paging>
    <dxo-selection mode="single"></dxo-selection>

    <dxi-column [width]="75" caption="Edit Pos" dataField="AccountName" alignment="left"
    cellTemplate="cellTemplatePos" [allowFiltering]="false" [allowSorting]="true">
      <div *dxTemplate="let data of 'cellTemplatePos'">
        <dx-button class="pos-edit-item" [width]="75">{{ data.value }}</dx-button>
      </div>
    </dxi-column>

    <dxi-column dataField="RoleString" caption="Role" [allowSorting]="true" groupIndex="0" sortOrder="desc"></dxi-column>

    <dxi-column dataField="Symbol" [allowSorting]="true" cellTemplate="symbolCellTemplate" sortOrder="asc">
      <div *dxTemplate="let cell of 'symbolCellTemplate'" [class.inc]="cell.data.Type === 0" [class.dec]="cell.data.Type === 1">
        <span class="arrow"></span>
        <a [href]="this.deals.externChartURL(cell.value)" target="_blank" >
          <span class="current-value">{{cell.text}}</span>
          <span class="lots-value"> {{cell.data.Lots}}</span>
        </a>
      </div>
    </dxi-column>

    <!-- <dxi-column dataField="Lots" [allowSorting]="true" [hidingPriority]="2"></dxi-column> -->
    <dxi-column dataField="ProfitStopsPercent" caption="SL/TP" format="#0" [allowSorting]="true"
      cellTemplate="SlTpCellTemplate" [hidingPriority]="3">
      <dxo-format type="fixedPoint" [precision]="0"></dxo-format>
      <div *dxTemplate="let cell of 'SlTpCellTemplate'" [class.inc]="cell.data.Profit > 0"
        [class.dec]="cell.data.Profit < 0">

        <!-- TODO: add alert to show alert rise price -->

        <ng-container *ngIf="cell.data.ProfitStopsPercent === 0">
          <span class="current-value">{{cell.data.Profit | number: '1.2-2' }}$</span>
        </ng-container>

        <ng-container *ngIf="cell.data.Profit > 0">
          <dx-linear-gauge id="cPos" [value]="cell.data.ProfitStopsPercent">
            <dxo-animation easing="linear" [duration]="0">
            </dxo-animation>
            <dxo-value-indicator [baseValue]="0" type="textCloud" color="#225614"></dxo-value-indicator>
            <dxo-range-container [palette]="['#caff45', '#88ff21', '#00ff00', '#00db4d']">
              <dxi-range [startValue]="0" [endValue]="25" ></dxi-range>
              <dxi-range [startValue]="25" [endValue]="50" ></dxi-range>
              <dxi-range [startValue]="50" [endValue]="75" ></dxi-range>
              <dxi-range [startValue]="75" [endValue]="100" ></dxi-range>
            </dxo-range-container>
            <dxo-geometry orientation="horizontal"></dxo-geometry>
            <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="25" [visible]="false">
            </dxo-scale>
          </dx-linear-gauge>
        </ng-container>

        <ng-container *ngIf="cell.data.Profit < 0">
          <dx-linear-gauge id="cNeg" [value]="cell.data.ProfitStopsPercent" >
            <dxo-animation easing="linear" [duration]="0">
            </dxo-animation>
            <dxo-value-indicator [baseValue]="0" type="textCloud" color="#5c1c1c"></dxo-value-indicator>
            <dxo-range-container [palette]="['#8e3535','#9e2218', '#ff0000', '#ff7070']">
              <dxi-range [startValue]="-100" [endValue]="-75" ></dxi-range>
              <dxi-range [startValue]="-75" [endValue]="-50" ></dxi-range>
              <dxi-range [startValue]="-50" [endValue]="-25" ></dxi-range>
              <dxi-range [startValue]="-25" [endValue]="0" ></dxi-range>
            </dxo-range-container>
            <dxo-geometry orientation="horizontal"></dxo-geometry>
            <dxo-scale [startValue]="-100" [endValue]="0" [tickInterval]="25" [visible]="false">
            </dxo-scale>
          </dx-linear-gauge>
        </ng-container>


      </div>
    </dxi-column>
    <dxi-column [width]="75" dataField="Value" caption="%" format="#0.##" [allowSorting]="true" cellTemplate="priceCellTemplate">
      <dxo-format type="fixedPoint" [precision]="2"></dxo-format>
      <div *dxTemplate="let cell of 'priceCellTemplate'" [class.inc]="cell.data.Profit > 0"
        [class.dec]="cell.data.Profit < 0">
        <span class="current-value">{{cell.text}}%</span>
      </div>
    </dxi-column>

    <dxi-column [width]="90" caption="Commands" cellTemplate="cellTemplateClose" [allowFiltering]="false"
      [allowSorting]="false" [hidingPriority]="4">
      <div *dxTemplate="let data of 'cellTemplateClose'">
        <dx-button [visible]="allowClosePositions(data.value)" text="Close" ></dx-button>
      </div>
    </dxi-column>


    <div *dxTemplate="let data of 'totalStat'">
      <div>
        <span [class.inc]="this.stat.TodayGainReal > 0" [class.dec]="this.stat.TodayGainReal < 0">PnL: {{this.balances}}</span>
      </div>
    </div>
  </dx-data-grid>
</div>
<div>
  <dx-data-grid #dealsContainer id="dealsContainer" [dataSource]="stat.Deals" keyExpr="Ticket" [showRowLines]="true"
    [columnHidingEnabled]="true" [showColumnLines]="false" [height]="500" [showBorders]="true">
    <dxo-scrolling mode="virtual"></dxo-scrolling>
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxi-column dataField="AccountName" [allowSorting]="true" caption="Account" [width]="180" groupIndex="0">
    </dxi-column>
    <dxi-column dataField="CloseTime" [allowSorting]="true" format="datetime" [width]="160" [hidingPriority]="3"
      sortOrder="desc"></dxi-column>
    <dxi-column dataField="Ticket" [width]="120" [hidingPriority]="1"></dxi-column>
    <dxi-column dataField="Symbol" [allowSorting]="true" cellTemplate="symbolDealCellTemplate">
    </dxi-column>
    <dxi-column dataField="Lots" alignment="left" format="#0.##" [width]="120" [hidingPriority]="2"></dxi-column>
    <dxi-column dataField="Commission" caption="Commission" alignment="left" format="#0.####" [width]="100" [hidingPriority]="2"></dxi-column>
    <dxi-column dataField="Swap" caption="Swap" alignment="left" format="#0.####" [width]="80" [hidingPriority]="2"></dxi-column>
    <dxi-column dataField="Profit" [allowSorting]="true" [width]="120" format="#0.##"></dxi-column>

    <div *dxTemplate="let cell of 'symbolDealCellTemplate'" [class.inc]="cell.data.Type === 1"
      [class.dec]="cell.data.Type === 0">
      <span class="arrow"></span>
      <span class="current-value">{{cell.text}}</span>
    </div>
  </dx-data-grid>
</div>

<dx-popup
width="100%"
height="100%"
[showTitle]="true"
[title]="getCurrentTitle()"
[hideOnOutsideClick]="true"
[dragEnabled]="false"
[(visible)]="showProperties">
    <dxo-position
        my="center"
        at="center"
        of="#targetElement">
    </dxo-position>
    <dx-button text="Save" (onClick)="onSave()"></dx-button>
    <dx-button text="Close" (onClick)="onClose()"></dx-button>
    <dx-scroll-view #scrollView id="scrollview" [scrollByContent]="true" showScrollbar="always">
        <app-properties #propsContainer [(parentVisible)]="showProperties">
        </app-properties>
    </dx-scroll-view>
</dx-popup>
