<div fxLayout="column" fxFlex="100%" fxLayoutAlign="start" fxLayoutGap="20px">
  <div class="common-header" fxLayout="row" fxFlex="40px">
    <knk-common-header></knk-common-header>
  </div>
  <div *ngIf="wizard.currStep > 0" class="wrapper" fxLayout="row" fxFlex="80px">
    <knk-wizard-header [pair]="wizard.pair" [exchange]="wizard.exchange" class="wrapper"
                       (cancel)="discardAndCancel()"></knk-wizard-header>
  </div>
  <div fxLayout="row">
    <knk-wizard fxLayout="column" fxFlex="100%" #wizard [linear]="false" [dataset]="getDataSet()">
      <knk-step-one [knok]="newknok" knkWizardStep></knk-step-one>
      <knk-step-two (changeValid)="wizard.changeValid($event)" [knok]="newknok" (changestatus)="updateIndicator($event)"
                    [precision]="wizard.precision" [currency]="wizard.currency" [nonBaseCurrency]="wizard.nonBaseCurrency" knkWizardStep></knk-step-two>
    </knk-wizard>
  </div>

  <div *ngIf="wizard.currStep === 0" fxLayout="row" fxLayoutAlign="center" class="button-section">
    <button class="botton-continue" mat-raised-button [disabled]="!wizard.currentStep || !wizard.currentStep.valid"
            (click)="wizard.moveNext()">Continue
    </button>
  </div>

  <div *ngIf="wizard.currStep > 0 && !wizard.isInvalid" fxLayout="row" fxLayoutAlign="center"
       class="button-section form-footer">
    <button *ngIf="!isPreviewDisplayed" class="botton-continue footer" mat-raised-button (click)="previewKnok()">
      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100%">
        <span fxLayout="column" fxLayoutAlign="center center" fxFlex="100%">Preview Knok</span>
        <i fxLayout="column" fxLayoutAlign="center end" class="material-icons footer-icon">remove_red_eye</i></div>
    </button>
    <button *ngIf="isPreviewDisplayed" class="btn-publish botton-continue footer" mat-raised-button
            (click)="publishKnok()">
      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100%">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100%">
          <span class="price">Publish Knok for 20.00$ / 48Tokens</span>
          <span class="time">Tokens price available for 0:20</span>
        </div>

        <i fxLayout="column" fxLayoutAlign="center end" class="material-icons footer-icon">send</i></div>
    </button>
  </div>
  <mat-error *ngIf="backendError" fxLayout="row" fxLayoutAlign="center">{{backendError.msg}}</mat-error>
</div>
<div [fxHide]="!isPreviewDisplayed" class="preview-container">
  <div class="preview-form" fxLayout="column" fxLayoutGap="10px">
    <div fxLayout="row">
      <knk-wizard-step-header [caption]="['','']" fxLayout="row" [showTitle]="false" [showRecent]="false">Here you
        should state the price value ranges for entry, exit and stop loss. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Maecenas nisi urna, molestie ac sem vitae, molestie volutpat leo.
        Vestibulum vel rhoncus odio. Suspendisse urna magna, porta sed eros ut, hendrerit tincidunt lorem&nbsp;<a
          href="#">Learn more</a></knk-wizard-step-header>
    </div>
    <div fxLayout="row" class="btn-close" fxLayoutAlign="end start">
      <button (click)="isPreviewDisplayed=false" mat-button><i class="material-icons">add</i></button>
    </div>

    <div fxLayout="row" fxFlex="100%" class="general-section">
      <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="10px" fxFlex="100%" class="container">
        <div fxLayout="row" class="general">
          <div fxLayout="column" fxFlex="22%">
            <div>Currency Pair</div>
            <div class="value">{{wizard.pair}}</div>
          </div>
          <div fxLayout="column" fxFlex="22%">
            <div>Exchange</div>
            <div class="value">{{wizard.exchange}}</div>
          </div>
          <div fxLayout="column" fxFlex="22%">
            <div>Potential Profit</div>
            <div>{{profitStatus}} ({{profitValue | number: '.0-2'}}%)</div>
          </div>
          <div fxLayout="column" fxFlex="34%">
            <div *ngIf="dataUser" fxLayout="row">
              <div class="user-info delimited" fxLayout="column" fxLayoutAlign="center start" fxFlex="70px">
                <i *ngIf="dataUser.user && !dataUser.user.hasAvatar" class="material-icons user-img">account_circle</i>
                <img *ngIf="dataUser.user && dataUser.user.hasAvatar" class="user-img" [src]="avatarHref"/>
              </div>
              <div fxLayout="column" fxLayoutAlign="center">
                <!-- <div fxLayout="column" fxLayoutAlign="center" fxFlex="70%"  fxLayoutGap="10px"> -->
                <div fxLayout="row" class="user-name">{{dataUser.user.firstName}} {{dataUser.user.lastName}}</div>
                <div fxLayout="row" fxLayoutGap="5px">
                  <i class="followers material-icons users">people</i>
                  <div class="followers-number">0</div>
                  <div fxLayoutAlign="end center">
                    <i *ngFor="let rate of ratingValue" class="material-icons">
                      {{rate === 1 ? 'star' : rate === 0 ? 'star_border' : 'star_half'}}</i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="center" class="price-range">
          <div fxLayout="column" fxLayoutGap="10px">
            <div>{{wizard.currency}} Entry Price Range</div>
            <div class="value">{{entryPriceRange}}</div>
          </div>
          <div fxLayout="column" fxLayoutAlign="end center" fxFlex="30px">
            <i class="material-icons">
              play_arrow
            </i>
          </div>
          <div class="exit-price-range" fxLayout="column" fxLayoutGap="10px">
            <div>{{wizard.currency}} Exit Price Range</div>
            <div class="value">{{exitPriceRange}}</div>
          </div>
        </div>
        <div fxLayout="row" class="price-chart">
          <canvas #canvas>{{chart}}</canvas>
        </div>
      </div>
    </div>

    <div *ngIf="newknok.hasTechnical" fxLayout="row" fxFlex="100%" class="ta-section">
      <div fxLayout="column" fxLayoutAlign="start" fxFlex="100%" class="analytic-section">
        <div fxLayout="row" fxLayoutAlign="center start">
          <div fxLayout="column" fxFlex="50px" class="box">TA</div>
          <div fxLayout="column" fxFlex="*" fxLayoutGap="10px">
            <div fxLayout="row" fxFlex="60px" fxLayoutAlign="start center" class="analytic-section-header">
              {{newknok.technical.header}}
            </div>
            <div fxLayout="row" *ngIf="technicalImage" class="uploaded-graph" fxLayoutAlign="center center">
              <img [src]="technicalImage"/>
            </div>
            <div fxLayout="row" fxLayoutAlign="start start" class="description">
              <div [innerHTML]="newknok.technical.description"></div>
            </div>
            <div fxLayout="row" fxLayoutAlign="end end" class="analytic-tags">
              <mat-chip-list>
                <mat-chip *ngFor="let tag of newknok.technical.tags">
                  {{tag.name}}
                </mat-chip>
              </mat-chip-list>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div *ngIf="newknok.hasFundamental" fxLayout="row" fxFlex="100%" class="fa-section">
      <div fxLayout="column" fxLayoutAlign="start" fxFlex="100%" class="analytic-section">
        <div fxLayout="row" fxLayoutAlign="center start">
          <div fxLayout="column" fxFlex="50px" class="box">FA</div>
          <div fxLayout="column" fxFlex="*" fxLayoutGap="10px">
            <div fxLayout="row" fxFlex="60px" fxLayoutAlign="start center" class="analytic-section-header underline">
              {{newknok.fundamental.header}}
            </div>
            <div fxLayout="row" fxLayoutAlign="start start" class="description">
              <div *ngIf="dataUser" class="user-info" fxLayout="column" fxLayoutAlign="center start" fxFlex="70px">
                <i *ngIf="dataUser.user && !dataUser.user.hasAvatar" class="material-icons user-img">account_circle</i>
                <img *ngIf="dataUser.user && dataUser.user.hasAvatar" class="user-img" [src]="avatarHref"/>
              </div>
              <div fxLayout="column" fxLayoutAlign="center start" [innerHTML]="newknok.fundamental.description"></div>
            </div>
            <div fxLayout="row" fxLayoutAlign="end end" class="analytic-tags">
              <mat-chip-list>
                <mat-chip *ngFor="let tag of newknok.fundamental.tags">
                  {{tag.name}}
                </mat-chip>
              </mat-chip-list>
            </div>
            <div fxLayout="column" fxFlex="100%" fxLayoutGap="10px" class="analytic-reference"
                 *ngIf="newknok.fundamental.references">
              <div fxLayout="row" *ngFor="let ref of referesesContent" class="analytic-reference-item">
                <!-- <iframe [src]="getRefByLink(ref)"></iframe> -->
                <div fxLayout="column" fxLayoutAlign="start start" fxFlex="100%">
                  <div fxLayout="row" fxLayoutAlign="start start">
                    <div fxLayout="row" class="ref-header">{{ref.header}}</div>
                  </div>
                  <div fxLayout="row" fxLayoutAlign="start start">
                    <div class="ref-img" fxLayout="column">
                      <img [src]="ref.image"/>
                    </div>
                    <div fxLayout="column" fxLayoutAlign="start start">
                      <div fxLayout="row" fxLayoutAlign="start center">
                        <div fxLayout="column" class="ref-published-by">
                          {{ref.publishedBy}}
                        </div>
                        <div fxLayout="column" class="ref-published">
                          {{getTimeAgo(ref.published)}}
                        </div>
                      </div>
                      <div class="ref-description">{{ref.description}}&nbsp;<a (click)="openRef(ref.url)">...</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div fxLayout="column" fxFlex="50px" fxLayoutAlign="start center" style="margin-top: 20px;">
  <div *ngIf="wizard.currStep > 0" class="indicator" fxLayout="column" fxLayoutAlign="start center">
    <i class="material-icons">check</i>
  </div>
  <div *ngIf="wizard.currStep > 0" class="marker" [style.marginTop.px]="(200-7) - indicatorPos">
  </div>
</div>
