
<ng-container *ngIf="!isContinued">
  <ng-container *ngIf="isFormExists(currencyForm)">
    <div fxLayout="row" fxLayoutAlign="center start" fxFlex="1 1 100">
      <section class="knk-create-wizard" fxFlex="1 1 910px">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="40px" fxFlexFill>
          <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
            <div fxLayout="row" fxLayoutAlign="space-between center">
              <div fxFlexAlign="baseline">
                <div class="knk-create-wizard__heading">Create & Publish a Knok</div>
              </div>
              <div fxFlexAlign="baseline">
                <ng-select class="knk-ng-select knk-ng-select--compact" (change)="log($event)" [searchable]="false" [clearable]="true" [hideSelected]="false" dropdownPosition="auto" placeholder="Load Recent">
                  <ng-option [value]="{&quot;currency&quot;: &quot;BHC&quot;, &quot;trade&quot;: &quot;BTC&quot;, &quot;exchange&quot;: &quot;4&quot;}">BHC / BTC</ng-option>
                  <ng-option [value]="{&quot;currency&quot;: &quot;BHC&quot;, &quot;trade&quot;: &quot;USD&quot;, &quot;exchange&quot;: &quot;1&quot;}">BHC / USD</ng-option>
                </ng-select>
              </div>
            </div>
            <form [formGroup]="currencyForm">
              <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
                <div class="knk-base-card mdc-elevation-transition" fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="33">
                  <div fxLayout="column" fxFlex="1 1 33" fxLayoutGap="20px">
                    <div class="knk-create-wizard__title">Currency</div>
                    <ng-select class="knk-ng-select" formControlName="currency" [searchable]="true" [clearable]="true" [hideSelected]="true" dropdownPosition="auto" placeholder="Choose Currency">
                      <ng-container *ngIf="availableCurrencies.length">
                        <ng-container *ngFor="let currency of availableCurrencies">
                          <ng-option [value]="currency?.code">{{currency?.longName}}</ng-option>
                        </ng-container>
                      </ng-container>
                    </ng-select>
                  </div>
                  <div fxLayout="column" fxFlex="1 1 33" fxLayoutGap="20px">
                    <div class="knk-create-wizard__title">Trading Pair</div>
                    <ng-select class="knk-ng-select" formControlName="trade" (change)="prepareExchangesByTradeValue($event)" [searchable]="false" [clearable]="true" [hideSelected]="true" dropdownPosition="auto" placeholder="Select">
                      <ng-container *ngIf="availableUniqueTradingPairs.length">
                        <ng-container *ngFor="let trade of availableUniqueTradingPairs">
                          <ng-option [value]="trade.currency2">{{trade?.currency1}} / {{trade?.currency2}}</ng-option>
                        </ng-container>
                      </ng-container>
                    </ng-select>
                  </div>
                </div>
                <div class="knk-base-splitter"></div>
                <div class="knk-base-card mdc-elevation-transition" fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="14">
                  <div fxLayout="column" fxFlex="1 1 33" fxLayoutGap="20px">
                    <div class="knk-create-wizard__title">Exchanges</div>
                    <div>
                      <input formControlName="exchange" type="hidden" value="">
                      <ng-container *ngIf="availableExchanges.length">
                        <ng-container *ngFor="let exchange of availableExchangesFiltered">
                          <div>
                            <label class="knk-toggle-label">
                              <input class="knk-toggle-label__input" name="exchange" type="radio" [value]="exchange.exchangeId" [disabled]="exchange.disabled" [checked]="exchange.selected" (change)="selectSomeExchange(exchange)"><span class="knk-toggle-label__model" [ngClass]="{&quot;knk-toggle-label__model--selected&quot;: exchange.selected, &quot;knk-toggle-label__model--disabled&quot;: exchange.disabled}">{{exchange?.exchangeName}}</span>
                            </label>
                          </div>
                        </ng-container>
                      </ng-container>
                    </div>
                  </div>
                  <div fxLayout="column" fxFlex="1 1 52" fxLayoutGap="20px"></div>
                </div>
                <div fxLayout="row" fxLayoutAlign="center center">
                  <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded ng-button-distorted--continue" (click)="continue()" [disabled]="!isFormValid(currencyForm)" [type]="'button'">Continue</ng-button-distorted>
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>
    </div>
  </ng-container>
</ng-container>
<ng-template #continueTpl>
  <ng-container *ngIf="isContinued &amp;&amp; !isPreviewed">
    <ng-container *ngIf="isFormExists(priceForm)">
      <div fxLayout="column" fxFlex="1 1 100">
        <section class="knk-lead-panel knk-lead-panel--sticky">
          <div fxLayout="row" fxLayoutAlign="space-between stretch">
            <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
              <div class="knk-lead-panel__label">Currency Pair</div>
              <div class="knk-lead-panel__record">{{selectedCurrency}} / {{selectedTrade}}</div>
            </div>
            <div class="knk-lead-panel__spacer"></div>
            <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
              <div class="knk-lead-panel__label">Exchange</div>
              <div class="knk-lead-panel__record">{{selectedExchange}}</div>
            </div>
            <div class="knk-lead-panel__spacer"></div>
            <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
              <div class="knk-lead-panel__label">Analysis</div>
              <div class="knk-lead-panel__record">
                <div class="knk-icon-analysis" [ngClass]="{'knk-icon-analysis--technical': selectedTA}">TA</div>
                <div class="knk-icon-analysis" fxFlexOffset="15px" [ngClass]="{'knk-icon-analysis--fundamental': selectedFA}">FA</div>
              </div>
            </div>
            <div class="knk-lead-panel__spacer"></div>
            <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
              <div class="knk-lead-panel__label" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px"><span>Feedback meter</span></div>
              <div class="knk-feedback-meter">
                <div class="knk-feedback-meter__model">
                  <div class="knk-feedback-meter__connect">
                    <div class="knk-feedback-meter__spin" [style.left.%]="indicatorValue"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="knk-lead-panel__spacer"></div>
            <div class="knk-lead-panel__tile" fxLayout="column" fxLayoutAlign="center start" fxFlex>
              <div fxLayout="row" fxLayout.lt-lg="row wrap" fxLayoutGap="40px">
                <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded ng-button-distorted--preview" (click)="previewKnok()" [disabled]="!valid?.priceForm" [type]="'button'"><i class="material-icons ng-button-distorted__icon">visibility</i>&#160;Preview and Publish</ng-button-distorted>
                <ng-button-distorted class="ng-button-distorted--outlined ng-button-distorted--rounded ng-button-distorted--cancel" (click)="discardAndCancel()" [type]="'button'">Cancel</ng-button-distorted>
              </div>
            </div>
          </div>
        </section>
        <div fxLayout="row" fxLayoutAlign="center start">
          <section class="knk-create-wizard" fxFlex="1 1 910px" [style.marginTop.px]="30" [style.marginBottom.px]="95">
            <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
              <section>
                <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="40px" fxFlexFill>
                  <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
                    <form [formGroup]="priceForm">
                      <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="50px">
                        <div class="knk-card">
                          <div class="knk-card__headline knk-card__headline--colourful knk-create-wizard__title" [ngClass]="{'knk-card__headline--success': validationStatuses.entryPriceRanges === 'success','knk-card__headline--warning': validationStatuses.entryPriceRanges === 'warning','knk-card__headline--wrong': validationStatuses.entryPriceRanges === 'wrong'}">Entry Price Range</div>
                          <div class="knk-card__content knk-card__content--endline">
                            <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="20px">
                              <div fxFlex="1 1 50">
                                <div class="knk-price-card" fxLayout="column" fxFlex="1 1 100" [ngClass]="{'knk-price-card--success': validationStatuses.entryPriceRanges === 'success','knk-price-card--warning': validationStatuses.entryPriceRanges === 'warning','knk-price-card--wrong': validationStatuses.entryPriceRanges === 'wrong'}">
                                  <div fxLayout="row" fxFlex="1 1 auto" fxLayoutGap="15px">
                                    <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center"><span class="knk-price-card__label">From</span></div>
                                  </div>
                                  <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center" fxLayoutGap="15px">
                                    <input-number formControlName="entryPriceFrom" #entryFrom="inputNumber" [min]="0" [step]="priceStep" [minFractionDigits]="priceFractionDigits"></input-number><span class="knk-price-card__currency">{{selectedTrade}}</span>
                                  </div>
                                  <ng-container *ngIf="errors &amp;&amp; errors?.priceForm &amp;&amp; errors.priceForm?.entryPriceFrom">
                                    <div class="knk-error knk-price-card__error">{{errors.priceForm?.entryPriceFrom}}</div>
                                  </ng-container>
                                </div>
                              </div>
                              <div fxFlexAlign="center"><i class="material-icons">navigate_next</i></div>
                              <div fxFlex="1 1 50">
                                <knk-price-switcher [parentPrice]="entryFrom" [selectedTrade]="selectedTrade" #entrySwitcher [(showInPercent)]="switcherValue[0]" [parentValue]="entryFrom.priceValue">
                                  <div class="knk-price-card" fxLayout="column" fxFlex="1 1 100" [ngClass]="{'knk-price-card--success': validationStatuses.entryPriceRanges === 'success','knk-price-card--warning': validationStatuses.entryPriceRanges === 'warning','knk-price-card--wrong': validationStatuses.entryPriceRanges === 'wrong'}">
                                    <div fxLayout="row" fxFlex="1 1 auto" fxLayoutGap="15px">
                                      <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center"><span class="knk-price-card__label">To</span><span class="knk-price-card__label">Price spread {{entrySwitcher?.showInPercent ? (entryPriceSpread(true) | number: knokPriceFormat) : (entryPriceSpread(false) | number: '.0-2')}} {{entrySwitcher?.showInPercent ? '/ ' + selectedTrade : '%'}}</span></div>
                                      <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center">
                                        <ng-template #entryTooltipTpl>{{entrySwitcher.showInPercent ? 'Switch to #' : 'Switch to %'}}</ng-template>
                                        <svg class="knk-price-card__switch knk-price-card__switch--svg" [tooltipHtml]="entryTooltipTpl" placement="top" container="body" containerClass="knk-tooltip" (click)="entrySwitcher?.switch()">
                                          <use *ngIf="!entrySwitcher?.showInPercent" xlink:href="/public/images/switch.svg#rate"></use>
                                          <use *ngIf="entrySwitcher?.showInPercent" xlink:href="/public/images/switch.svg#number"></use>
                                        </svg>
                                      </div>
                                    </div>
                                    <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center" fxLayoutGap="15px">
                                      <input-number formControlName="entryPriceTo" #entryTo [min]="0" [step]="priceStep" [minFractionDigits]="priceFractionDigits"></input-number><span class="knk-price-card__currency">{{entrySwitcher?.label}}</span>
                                    </div>
                                    <ng-container *ngIf="errors &amp;&amp; errors?.priceForm &amp;&amp; errors.priceForm?.entryPriceTo">
                                      <div class="knk-error knk-price-card__error">{{errors.priceForm?.entryPriceTo}}</div>
                                    </ng-container>
                                  </div>
                                </knk-price-switcher>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="knk-card">
                          <div class="knk-card__headline knk-card__headline--colourful knk-create-wizard__title" [ngClass]="{'knk-card__headline--success': validationStatuses.exitPriceRanges === 'success','knk-card__headline--warning': validationStatuses.exitPriceRanges === 'warning','knk-card__headline--wrong': validationStatuses.exitPriceRanges === 'wrong'}">Exit Price Range</div>
                          <div class="knk-card__content knk-card__content--endline">
                            <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="20px">
                              <div fxFlex="1 1 50">
                                <knk-price-switcher [parentPrice]="entryTo" [selectedTrade]="selectedTrade" #potentialProfitSwitcher [(showInPercent)]="switcherValue[1]" [parentValue]="entryTo.priceValue">
                                  <div class="knk-price-card" fxLayout="column" fxFlex="1 1 100" [ngClass]="{'knk-price-card--success': validationStatuses.exitPriceRanges === 'success','knk-price-card--warning': validationStatuses.exitPriceRanges === 'warning','knk-price-card--wrong': validationStatuses.exitPriceRanges === 'wrong'}">
                                    <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="15px">
                                      <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center"><span class="knk-price-card__label">From</span><span class="knk-price-card__label knk-price-card__label--profit" [ngClass]="{'knk-price-card__label--success': validationStatuses.profit === 'success','knk-price-card__label--warning': validationStatuses.profit === 'warning','knk-price-card__label--wrong': validationStatuses.profit === 'wrong'}">Potential profit {{potentialProfitSwitcher.showInPercent ? (knokPotentialProfitPercent(true) | number: knokPriceFormat) : (knokPotentialProfitPercent(false) | number: '.0-2')}} {{potentialProfitSwitcher.showInPercent ? '/ ' + selectedTrade : '%'}}</span></div>
                                      <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center">
                                        <ng-template #potentialProfitTooltipTpl>{{potentialProfitSwitcher.showInPercent ? 'Switch to #' : 'Switch to %'}}</ng-template>
                                        <svg class="knk-price-card__switch knk-price-card__switch--svg  knk-mvp-field__hint" [tooltipHtml]="potentialProfitTooltipTpl" placement="top" container="body" containerClass="knk-tooltip" (click)="potentialProfitSwitcher?.switch()">
                                          <use *ngIf="!potentialProfitSwitcher?.showInPercent" xlink:href="/public/images/switch.svg#rate"></use>
                                          <use *ngIf="potentialProfitSwitcher?.showInPercent" xlink:href="/public/images/switch.svg#number"></use>
                                        </svg>
                                      </div>
                                    </div>
                                    <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="start center" fxLayoutGap="15px">
                                      <input-number formControlName="exitPriceFrom" #exitFrom [min]="0" [step]="priceStep" [minFractionDigits]="priceFractionDigits"></input-number><span class="knk-price-card__currency">{{potentialProfitSwitcher?.label}}</span>
                                    </div>
                                    <ng-container *ngIf="errors &amp;&amp; errors?.priceForm &amp;&amp; errors.priceForm?.exitPriceFrom">
                                      <div class="knk-error knk-price-card__error">{{errors.priceForm?.exitPriceFrom}}</div>
                                    </ng-container>
                                  </div>
                                </knk-price-switcher>
                              </div>
                              <div fxFlexAlign="center"><i class="material-icons">navigate_next</i></div>
                              <div fxFlex="1 1 50">
                                <knk-price-switcher [parentPrice]="exitFrom" [selectedTrade]="selectedTrade" #exitSwitcher [(showInPercent)]="switcherValue[2]" [parentValue]="exitFrom.priceValue">
                                  <div class="knk-price-card" fxLayout="column" fxFlex="1 1 100" [ngClass]="{'knk-price-card--success': validationStatuses.exitPriceRanges === 'success','knk-price-card--warning': validationStatuses.exitPriceRanges === 'warning','knk-price-card--wrong': validationStatuses.exitPriceRanges === 'wrong'}">
                                    <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="15px">
                                      <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center"><span class="knk-price-card__label">To</span><span class="knk-price-card__label">Price spread {{exitSwitcher?.showInPercent ? (exitPriceSpread(true) | number: knokPriceFormat) : (exitPriceSpread(false) | number: '.0-2')}} {{exitSwitcher?.showInPercent ? '/ ' + selectedTrade : '%'}}</span></div>
                                      <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center">
                                        <ng-template #exitTooltipTpl>{{exitSwitcher.showInPercent ? 'Switch to #' : 'Switch to %'}}</ng-template>
                                        <svg class="knk-price-card__switch knk-price-card__switch--svg" [tooltipHtml]="exitTooltipTpl" placement="top" container="body" containerClass="knk-tooltip" (click)="exitSwitcher?.switch()">
                                          <use *ngIf="!exitSwitcher?.showInPercent" xlink:href="/public/images/switch.svg#rate"></use>
                                          <use *ngIf="exitSwitcher?.showInPercent" xlink:href="/public/images/switch.svg#number"></use>
                                        </svg>
                                      </div>
                                    </div>
                                    <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="start center" fxLayoutGap="15px">
                                      <input-number formControlName="exitPriceTo" [min]="0" [step]="priceStep" [minFractionDigits]="priceFractionDigits"></input-number><span class="knk-price-card__currency">{{exitSwitcher?.label}}</span>
                                    </div>
                                    <ng-container *ngIf="errors &amp;&amp; errors?.priceForm &amp;&amp; errors.priceForm?.exitPriceTo">
                                      <div class="knk-error knk-price-card__error">{{errors.priceForm?.exitPriceTo}}</div>
                                    </ng-container>
                                  </div>
                                </knk-price-switcher>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="20px">
                          <div class="knk-card" fxFlex="1 1 50">
                            <div class="knk-card__headline knk-card__headline--colourful knk-create-wizard__title" [ngClass]="{'knk-card__headline--success': validationStatuses.stopLoss === 'success','knk-card__headline--warning': validationStatuses.stopLoss === 'warning','knk-card__headline--wrong': validationStatuses.stopLoss === 'wrong'}">Stop Loss</div>
                            <div class="knk-card__content knk-card__content--endline">
                              <knk-price-switcher [parentPrice]="entryFrom" [selectedTrade]="selectedTrade" #slSwitcher [(showInPercent)]="switcherValue[3]" [parentValue]="entryFrom.priceValue">
                                <div class="knk-price-card" fxLayout="column" fxFlex="1 1 100" [ngClass]="{'knk-price-card--success': validationStatuses.stopLoss === 'success','knk-price-card--warning': validationStatuses.stopLoss === 'warning','knk-price-card--wrong': validationStatuses.stopLoss === 'wrong'}">
                                  <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between center" fxLayoutGap="15px">
                                    <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center"><span class="knk-price-card__label"></span><span class="knk-price-card__label">{{slSwitcher?.showInPercent ? (slPriceSpread(true) | number: knokPriceFormat) : (slPriceSpread(false) | number: '.0-2')}} {{slSwitcher?.showInPercent ? '/ ' + selectedTrade : '%'}}</span></div>
                                    <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center">
                                      <ng-template #slTooltipTpl>{{slSwitcher.showInPercent ? 'Switch to #' : 'Switch to %'}}</ng-template>
                                      <svg class="knk-price-card__switch knk-price-card__switch--svg" [tooltipHtml]="slTooltipTpl" placement="top" container="body" containerClass="knk-tooltip" (click)="slSwitcher?.switch()">
                                        <use *ngIf="!slSwitcher?.showInPercent" xlink:href="/public/images/switch.svg#rate"></use>
                                        <use *ngIf="slSwitcher?.showInPercent" xlink:href="/public/images/switch.svg#number"></use>
                                      </svg>
                                    </div>
                                  </div>
                                  <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="start center" fxLayoutGap="15px">
                                    <input-number formControlName="stopLoss" [reverse]="true" [min]="0" [step]="priceStep / 10" [minFractionDigits]="priceFractionDigits"></input-number><span class="knk-price-card__currency">{{slSwitcher?.label}}</span>
                                  </div>
                                  <ng-container *ngIf="errors &amp;&amp; errors?.priceForm &amp;&amp; errors.priceForm?.stopLoss">
                                    <div class="knk-error knk-price-card__error">{{errors.priceForm?.stopLoss}}</div>
                                  </ng-container>
                                </div>
                              </knk-price-switcher>
                            </div>
                          </div>
                          <div class="knk-card" fxLayout="column" fxFlex="1 1 50">
                            <div class="knk-card__headline knk-card__headline--colourful knk-create-wizard__title" [ngClass]="{'knk-card__headline--success': validationStatuses.duration === 'success','knk-card__headline--warning': validationStatuses.duration === 'warning','knk-card__headline--wrong': validationStatuses.duration === 'wrong'}">Duration</div>
                            <div class="knk-card__content knk-card__content--endline" fxLayout="row" fxLayoutAlign="space-between end" fxFlex="1 1 auto">
                              <div class="knk-nouislider-card" fxLayout="row" fxLayoutAlign="center center" fxFlex="1 1 100" fxLayoutGap="15px"><span class="knk-nouislider-card__label">{{sliderDurationConfig.range.min | number}} Days</span>
                                <nouislider class="knk-nouislider-card__model knk-nouislider knk-nouislider--visible" formControlName="duration" [config]="sliderDurationConfig"></nouislider><span class="knk-nouislider-card__label">{{sliderDurationConfig.range.max | number}} Days</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </section>
              <section>
                <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="40px" fxFlexFill>
                  <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
                    <div class="knk-create-wizard__title">Analyses</div>
                    <div #tabContent>
                      <mat-tab-group class="knk-tab-group knk-tab-group--analysis" [dynamicHeight]="true">
                        <ng-container *ngIf="isFormExists(technicalForm)">
                          <mat-tab>
                            <ng-template mat-tab-label>
                              <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between center" fxLayoutGap="5px" fxFlexFill>
                                <div>Technical Analysis</div>
                                <ng-container *ngIf="technicalForm.invalid">
                                  <div class="knk-error"><small>Missing</small>&#160;<i class="material-icons">error_outline</i></div>
                                </ng-container>
                                <ng-container *ngIf="technicalForm.valid">
                                  <div class="knk-success"><i class="material-icons">check</i></div>
                                </ng-container>
                              </div>
                            </ng-template>
                            <form fxLayout="row" fxFlex="1 1 100" [formGroup]="technicalForm">
                              <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="20px">
                                <div class="knk-form-field" fxLayout="column" fxFlex="1 1 auto">
                                  <div class="knk-label">Title<span class="knk-required">&#160;*</span></div>
                                  <div>
                                    <input class="knk-input knk-input--wide" formControlName="header" placeholder="Write title">
                                  </div>
                                  <ng-container *ngIf="isControlDirtyOrTouched(technicalForm?.controls?.header) &amp;&amp; technicalForm?.controls?.header?.errors?.required">
                                    <div class="knk-error">The field is required</div>
                                  </ng-container>
                                </div>
                                <div class="knk-form-field" fxLayout="column" fxFlex="1 1 auto">
                                  <div class="knk-label">Graph image<span class="knk-required">&#160;*</span></div>
                                  <div>
                                    <knk-upload-graph formControlName="image" [redo]="true"></knk-upload-graph>
                                  </div>
                                  <ng-container *ngIf="!(isControlEmpty(technicalForm?.controls?.image) &amp;&amp; isControlEmpty(technicalForm?.controls?.header))">
                                    <ng-container *ngIf="isControlDirtyOrTouched(technicalForm?.controls?.image) &amp;&amp; technicalForm?.controls?.image?.errors?.required">
                                      <div class="knk-error">The field is required</div>
                                    </ng-container>
                                    <ng-container *ngIf="isControlDirtyOrTouched(technicalForm?.controls?.image) &amp;&amp; technicalForm?.controls?.image?.errors?.resourceUrl">
                                      <div class="knk-error">The field must be resource URL or image</div>
                                    </ng-container>
                                  </ng-container>
                                </div>
                                <div>
                                  <quill-editor class="knk-quill-editor" formControlName="description" [bounds]="tabContent" placeholder="Add text">
                                    <div quill-editor-toolbar>
                                      <div class="knk-form-field" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between end">
                                        <div class="knk-label">Analysis explantion</div>
                                        <div><span class="ql-formats">
                                            <button class="ql-bold" [title]="'Bold'"></button>
                                            <button class="ql-underline" [title]="'Underline'"></button>
                                            <button class="ql-italic" [title]="'Italic'"></button></span><span class="ql-formats">
                                            <button class="ql-list" [title]="'Bullet'" [value]="'bullet'"></button>
                                            <select class="ql-align" [title]="'Aligment'">
                                              <option selected></option>
                                              <option value="center"></option>
                                              <option value="right"></option>
                                              <option value="justify"></option>
                                            </select></span><span class="ql-formats">
                                            <button class="ql-link" [title]="'Link'"></button>
                                            <button class="ql-image" [title]="'Image'"></button></span><span class="ql-formats">
                                            <button class="ql-clean" [title]="'Clean'"></button></span></div>
                                      </div>
                                    </div>
                                  </quill-editor>
                                </div>
                                <div class="knk-form-field" fxLayout="column" fxFlex="1 1 auto">
                                  <div class="knk-label">Tag your analysis</div>
                                  <div>
                                    <knk-tag formControlName="tags" [availabletags]="availableTechnicalTags" [redo]="true"></knk-tag>
                                  </div>
                                </div>
                              </div>
                            </form>
                          </mat-tab>
                        </ng-container>
                        <ng-container *ngIf="isFormExists(fundamentalForm)">
                          <mat-tab>
                            <ng-template mat-tab-label>
                              <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between center" fxLayoutGap="5px">
                                <div>Fundamental Analysis</div>
                                <ng-container *ngIf="fundamentalForm.invalid">
                                  <div class="knk-error"><small>Missing</small>&#160;<i class="material-icons">error_outline</i></div>
                                </ng-container>
                                <ng-container *ngIf="fundamentalForm.valid">
                                  <div class="knk-success"><i class="material-icons">check</i></div>
                                </ng-container>
                              </div>
                            </ng-template>
                            <form fxLayout="row" fxFlex="1 1 100" [formGroup]="fundamentalForm" novalidate autocomplete="on">
                              <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="20px">
                                <div class="knk-form-field" fxLayout="column" fxFlex="1 1 auto">
                                  <div class="knk-label">Title<span class="knk-required">&#160;*</span></div>
                                  <div>
                                    <input class="knk-input knk-input--wide" formControlName="header" placeholder="Write title">
                                  </div>
                                  <ng-container *ngIf="isControlDirtyOrTouched(fundamentalForm?.controls?.header) &amp;&amp; fundamentalForm?.controls?.header?.errors?.required">
                                    <div class="knk-error">The field is required</div>
                                  </ng-container>
                                </div>
                                <div class="knk-form-field" fxLayout="column" fxFlex="1 1 auto">
                                  <div class="knk-label">Link<span class="knk-required">&#160;*</span></div>
                                  <div>
                                    <input-reference formArrayName="references" [validators]="[requiredValidator, urlValidator]" [externalControl]="true" #referencesFA="inputReference"></input-reference>
                                  </div>
                                </div>
                                <div>
                                  <quill-editor class="knk-quill-editor" formControlName="description" [bounds]="tabContent" placeholder="Add text">
                                    <div quill-editor-toolbar>
                                      <div class="knk-form-field" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between end">
                                        <div class="knk-label">Analysis explantion</div>
                                        <div><span class="ql-formats">
                                            <button class="ql-bold" [title]="'Bold'"></button>
                                            <button class="ql-underline" [title]="'Underline'"></button>
                                            <button class="ql-italic" [title]="'Italic'"></button></span><span class="ql-formats">
                                            <button class="ql-list" [title]="'Bullet'" [value]="'bullet'"></button>
                                            <select class="ql-align" [title]="'Aligment'">
                                              <option selected></option>
                                              <option value="center"></option>
                                              <option value="right"></option>
                                              <option value="justify"></option>
                                            </select></span><span class="ql-formats">
                                            <button class="ql-link" [title]="'Link'"></button>
                                            <button class="ql-image" [title]="'Image'"></button></span><span class="ql-formats">
                                            <button class="ql-clean" [title]="'Clean'"></button></span></div>
                                      </div>
                                    </div>
                                  </quill-editor>
                                </div>
                                <div class="knk-form-field" fxLayout="column" fxFlex="1 1 auto">
                                  <div class="knk-label">Tag your analysis</div>
                                  <div>
                                    <knk-tag formControlName="tags" [availabletags]="availableFundamentalTags" [isotherallowed]="true" [redo]="true"></knk-tag>
                                  </div>
                                </div>
                              </div>
                            </form>
                          </mat-tab>
                        </ng-container>
                      </mat-tab-group>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </section>
        </div>
      </div>
    </ng-container>
  </ng-container>
</ng-template>
<ng-template #previewTpl>
  <ng-container *ngIf="isContinued &amp;&amp; isPreviewed">
    <ng-container *ngIf="knokExists">
      <div fxLayout="column" fxFlex="1 1 100">
        <section class="knk-lead-panel knk-lead-panel--sticky">
          <div fxLayout="row" fxLayoutAlign="space-between stretch">
            <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
              <div class="knk-lead-panel__label">Knok price</div>
              <div class="knk-lead-panel__record knk-lead-panel__record--major">{{knokPriceUSD | currency:'USD':'symbol-narrow':'1.0-2'}}</div>
            </div>
            <ng-container *ngIf="accountExists">
              <div class="knk-lead-panel__spacer"></div>
              <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
                <div class="knk-lead-panel__label">Tokens</div>
                <div class="knk-lead-panel__record">{{knokPrice | number: '.0-2'}}</div>
              </div>
            </ng-container>
            <div class="knk-lead-panel__spacer"></div>
            <div class="knk-lead-panel__tile" fxLayout="column" fxFlex="1 1 auto">
              <div class="knk-lead-panel__label">Token price available for:</div>
              <div class="knk-lead-panel__record">0:20</div>
            </div>
            <div class="knk-lead-panel__spacer"></div>
            <div class="knk-lead-panel__tile" fxLayout="column" fxLayoutAlign="center start" fxFlex>
              <div fxLayout="row" fxLayout.lt-lg="row wrap" fxLayoutGap="40px">
                <ng-button-distorted class="ng-button-distorted--outlined ng-button-distorted--rounded ng-button-distorted--back" (click)="back()" [type]="'button'">Back</ng-button-distorted>
                <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded ng-button-distorted--publish" (click)="publishKnok()" [type]="'button'"><i class="material-icons ng-button-distorted__icon">send</i>&#160;Publish Knok</ng-button-distorted>
              </div>
            </div>
          </div>
        </section>
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="center stretch">
          <section class="knk-track-knok" fxFlex="1 1 950px" [style.marginTop.px]="30" [style.marginBottom.px]="95">
            <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="40px" fxFlexFill>
              <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
                <div class="knk-track-knok__card mdc-elevation-transition">
                  <div class="knk-track-knok-item" fxLayout="column">
                    <div class="knk-track-knok-item__headline" fxLayout="row">
                      <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
                        <div class="knk-track-knok-item__trading">{{knokMarket}} / {{knokCurrency}}</div>
                        <div class="knk-track-knok-item__exchange">{{knokExchange}}</div>
                      </div>
                      <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px"></div>
                    </div>
                    <div class="knk-track-knok-item__activity" fxLayout="row">
                      <div class="knk-track-knok-purchase knk-track-knok-item__rail" fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
                        <div fxLayout="column" fxLayoutGap="40px">
                          <div [style.marginRight.px]="60">
                            <div class="knk-track-knok-purchase__label">Your Pool</div>
                            <div class="knk-track-knok-purchase__record">{{0 | number:'1.0-2'}}<small>&#160;Tokens</small><small><span>&#160;(${{0 | number:'1.0-2'}})</span></small></div>
                          </div>
                          <div [style.marginRight.px]="60">
                            <div class="knk-track-knok-purchase__label">Buyer reviews</div>
                            <div class="knk-track-knok-purchase__record">0</div>
                          </div>
                        </div>
                        <div fxLayout="column" fxLayoutGap="40px">
                          <div [style.marginRight.px]="30">
                            <div class="knk-track-knok-purchase__label">Purchases</div>
                            <div class="knk-track-knok-purchase__record">
                              <ng-svg-icon class="knk-track-knok-purchase__coins" file="/public/images/coins.svg" name="default"></ng-svg-icon>0
                            </div>
                          </div>
                          <div [style.marginRight.px]="30">
                            <div class="knk-track-knok-purchase__label">Published at</div>
                            <div class="knk-track-knok-purchase__record">{{knokPublishedAt}}</div>
                          </div>
                        </div>
                      </div>
                      <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
                        <knk-knok-score [usefulness]="0" [clarity]="0" [profitability]="0"></knk-knok-score>
                      </div>
                    </div>
                    <div class="knk-track-knok-item__history knk-track-knok-history" fxLayout="row">
                      <div class="knk-track-knok-history__slab" fxLayout="column" fxFlex="1 1 35" fxLayoutGap="30px">
                        <div>
                          <div class="knk-track-knok-history__label knk-track-knok-history__label--circle knk-track-knok-history__label--entry-price">Entry price range</div>
                          <div class="knk-track-knok-history__record knk-track-knok-history__record--entry-price">{{knokEntryPriceFrom | number: knokPriceFormat}} - {{knokEntryPriceTo | number: knokPriceFormat}}</div>
                        </div>
                        <div>
                          <div class="knk-track-knok-history__label knk-track-knok-history__label--circle knk-track-knok-history__label--exit-price">Exit price range</div>
                          <div class="knk-track-knok-history__record knk-track-knok-history__record--exit-price">{{knokExitPriceFrom | number: knokPriceFormat}} - {{knokExitPriceTo | number: knokPriceFormat}}</div>
                        </div>
                        <div>
                          <div class="knk-track-knok-history__label knk-track-knok-history__label--circle knk-track-knok-history__label--stop-loss">Stop loss</div>
                          <div class="knk-track-knok-history__record knk-track-knok-history__record--stop-loss">{{knokStopLoss | number: knokPriceFormat}}</div>
                        </div>
                      </div>
                      <div fxLayout="column" fxFlex="1 1 65" fxLayoutGap="30px">
                        <div class="knk-track-knok-history__price">
                          <div class="knk-track-knok-history__label"><span>Current Price</span><i class="material-icons knk-track-knok-history__price-direction knk-track-knok-history__record--negative" *ngIf="knokCurrentProfitPercent &lt; 0">arrow_downward</i><i class="material-icons knk-track-knok-history__price-direction knk-track-knok-history__record--positive" *ngIf="knokCurrentProfitPercent &gt; 0">arrow_upward</i></div>
                          <div class="knk-track-knok-history__record" [ngClass]="{'knk-track-knok-history__record--positive': knokCurrentProfitPercent &gt; 0, 'knk-track-knok-history__record--negative': knokCurrentProfitPercent &lt; 0}">{{knokCurrentPrice | number: knokPriceFormat}}<small><strong> ({{knokCurrentProfitPercent}}%)</strong></small></div>
                        </div>
                        <div class="knk-track-knok-history__chart">
                          <canvas #canvas></canvas>
                        </div>
                        <div fxLayout="row" fxLayoutAlign="center center">
                          <div class="knk-track-knok-history__time-left"><strong>{{knokDuration}}</strong>&#160;({{knokTimeLeft}})</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <ng-container *ngIf="knokHasTechnical">
                  <div class="knk-track-knok__card mdc-elevation-transition">
                    <div class="knk-track-knok-expansion" data-control="expansion-panel">
                      <div class="knk-track-knok-expansion__headline" fxLayout="row" data-control-role="header">
                        <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
                          <div class="knk-track-knok-expansion__analysis knk-track-knok-expansion__analysis--technical">TA</div>
                          <div class="knk-track-knok-expansion__title">{{knokTechnical?.header}}</div>
                        </div>
                        <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px">
                          <div><i class="material-icons" data-control-role="toggle" data-toggle-on="{&quot;content&quot;: &quot;keyboard_arrow_up&quot;}" data-toggle-off="{&quot;content&quot;: &quot;keyboard_arrow_down&quot;}" aria-hidden="true">keyboard_arrow_down</i></div>
                        </div>
                      </div>
                      <div class="knk-track-knok-expansion__content knk-track-knok-expansion__content--expanded" fxLayout="column" data-control-role="content">
                        <ng-container *ngIf="knokTechnicalImage">
                          <div class="knk-track-knok-expansion__section knk-track-knok-expansion__section--lined">
                            <div class="knk-track-knok-image-card"><a [href]="knokTechnicalImage" target="_blank"><img class="knk-track-knok-image-card__model" [src]="knokTechnicalImage"></a></div>
                          </div>
                        </ng-container>
                        <div class="knk-track-knok-expansion__section" [ngClass]="{&quot;knk-track-knok-expansion__section--lined&quot;: !knokTechnicalImage}">
                          <div [innerHTML]="knokTechnical?.description"></div>
                          <ng-container *ngIf="knokTechnical?.tags.length">
                            <div class="knk-track-knok-expansion__tags knk-track-knok-tag-list" fxLayout="row" fxLayoutGap="10px">
                              <ng-container *ngFor="let tag of knokTechnical?.tags">
                                <button class="knk-track-knok-tag-list__item">#{{tag?.name}}</button>
                              </ng-container>
                            </div>
                          </ng-container>
                        </div>
                      </div>
                    </div>
                  </div>
                </ng-container>
                <ng-container *ngIf="knokHasFundamental">
                  <div class="knk-track-knok__card mdc-elevation-transition">
                    <div class="knk-track-knok-expansion" data-control="expansion-panel">
                      <div class="knk-track-knok-expansion__headline" fxLayout="row" data-control-role="header">
                        <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
                          <div class="knk-track-knok-expansion__analysis knk-track-knok-expansion__analysis--fundamental">FA</div>
                          <div class="knk-track-knok-expansion__title">{{knokFundamental?.header}}</div>
                        </div>
                        <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px">
                          <div><i class="material-icons" data-control-role="toggle" data-toggle-on="{&quot;content&quot;: &quot;keyboard_arrow_up&quot;}" data-toggle-off="{&quot;content&quot;: &quot;keyboard_arrow_down&quot;}" aria-hidden="true">keyboard_arrow_down</i></div>
                        </div>
                      </div>
                      <div class="knk-track-knok-expansion__content knk-track-knok-expansion__content--expanded" fxLayout="column" data-control-role="content">
                        <div class="knk-track-knok-expansion__section knk-track-knok-expansion__section--lined">
                          <div [innerHTML]="knokFundamental?.description"></div>
                          <ng-container *ngIf="knokFundamental?.tags.length">
                            <div class="knk-track-knok-expansion__tags knk-track-knok-tag-list" fxLayout="row" fxLayoutGap="10px">
                              <ng-container *ngFor="let tag of knokFundamental?.tags">
                                <button class="knk-track-knok-tag-list__item">#{{tag?.name}}</button>
                              </ng-container>
                            </div>
                          </ng-container>
                        </div>
                        <ng-container *ngIf="availableFundamentalReferences.length">
                          <div class="knk-track-knok-expansion__section">
                            <div fxLayout="column" fxLayoutGap="30px">
                              <ng-container *ngFor="let reference of availableFundamentalReferences">
                                <div class="knk-track-knok-article" fxLayout="row" fxLayoutGap="30px" (click)="openUrlInNewTab(reference.url)" [style.cursor]="'pointer'">
                                  <div class="knk-track-knok-article__thumbnail"><img class="knk-track-knok-article__thumbnail-image" *ngIf="reference?.image" [src]="reference?.image"><i class="material-icons knk-track-knok-article__thumbnail-icon" *ngIf="!reference?.image" aria-hidden="true">image</i></div>
                                  <div fxLayout="column">
                                    <div class="knk-track-knok-article__title">{{reference?.header}}</div>
                                    <div class="knk-track-knok-article__subtitle">
                                      <ng-container *ngIf="reference?.publishedBy"><strong>{{reference?.publishedBy}}&#160;&#160;|&#160;</strong></ng-container>{{reference?.published | date:'dd/MM/yyyy'}}
                                    </div>
                                    <div class="knk-track-knok-article__description">{{reference?.description}}</div>
                                  </div>
                                </div>
                              </ng-container>
                            </div>
                          </div>
                        </ng-container>
                      </div>
                    </div>
                  </div>
                </ng-container>
              </div>
            </div>
          </section>
        </div>
      </div>
    </ng-container>
  </ng-container>
</ng-template>