
<ng-container *ngIf="userIsKnokser; else ongoingDefault">
  <section fxLayout="row" fxLayoutAlign="end stretch" fxFlexFill>
    <div class="knk-ongoing-knok-card" (click)="goToKnok()">
      <div class="knk-ongoing-knok-card__headline">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch">
          <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center" fxLayoutGap="20px">
            <div class="knk-ongoing-knok-card__trading">{{item?.knok?.marketDisplayName?.replace('/', ' / ')}}</div>
            <div class="knk-ongoing-knok-card__exchange">{{item?.knok?.exchangeName}}</div>
          </div>
          <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center" fxLayoutGap="20px">
            <div class="btn-group" #dropdown="bs-dropdown" dropdown placement="bottom left"><i class="material-icons" dropdownToggle aria-controls="dropdown-basic" (click)="$event.stopPropagation();" [style.cursor]="'pointer'">more_vert</i>
              <div class="dropdown-menu dropdown-menu--ongoing" *dropdownMenu [@fade]="dropdown.isOpen" role="menu" aria-labelledby="button-basic">
                <div class="knk-ongoing-dropdown-menu">
                  <div class="knk-ongoing-dropdown-menu__wrapper">
                    <div class="knk-ongoing-dropdown-menu__list">
                      <button class="knk-ongoing-dropdown-menu__item" role="menuitem" type="button" (click)="$event.stopPropagation();"><i class="material-icons">share</i>&#160;Share</button>
                      <button class="knk-ongoing-dropdown-menu__item knk-ongoing-dropdown-menu__item--wrong" role="menuitem" type="button" (click)="$event.stopPropagation();"><i class="material-icons">mood_bad</i>&#160;Cancel Knok</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="knk-ongoing-knok-card__content knk-ongoing-knok-card__content--borderless">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxLayoutGap="5px">
          <div class="knk-ongoing-knok-card__cell knk-ongoing-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ongoing-knok-card__label">Price Pool</div>
            <div class="knk-ongoing-knok-card__note">{{item?.knokser?.pricePool | number: '.0-2'}}<small><small>&#160;Tokens</small></small></div>
          </div>
          <div class="knk-ongoing-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ongoing-knok-card__cell knk-ongoing-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ongoing-knok-card__label">Time left on feed</div>
            <div class="knk-ongoing-knok-card__note">{{timeLeftOnFeed?.hours | number}}h:{{timeLeftOnFeed?.minutes | number}}m</div>
          </div>
          <div class="knk-ongoing-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ongoing-knok-card__cell knk-ongoing-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ongoing-knok-card__label">Purchases</div>
            <div class="knk-ongoing-knok-card__note">
              <ng-svg-icon class="knk-ongoing-icon" file="/public/images/coins.svg" name="default"></ng-svg-icon>&#160;{{item?.status?.purchases}}
            </div>
          </div>
          <div class="knk-ongoing-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ongoing-knok-card__cell knk-ongoing-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ongoing-knok-card__label">User review</div>
            <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between center">
              <knk-knok-score [usefulness]="2" [clarity]="4" [profitability]="3.6" [dense]="true" [value]="item?.knok?.userReview" [maxvalue]="item?.knok?.userReviewMax"></knk-knok-score>
            </div>
          </div>
        </div>
      </div>
      <div class="knk-ongoing-knok-card__content knk-ongoing-knok-card__content--endline">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxLayoutGap="5px">
          <div class="knk-ongoing-knok-card__cell knk-ongoing-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 50" fxLayoutGap="15px">
            <div class="knk-ongoing-knok-card__label">Current price<i class="material-icons knk-ongoing-knok-card__icon knk-ongoing-knok-card__icon--wrong" *ngIf="item?.knok?.currentProfit &lt; 0">arrow_downward</i><i class="material-icons knk-ongoing-knok-card__icon knk-ongoing-knok-card__icon--success" *ngIf="item?.knok?.currentProfit &gt; 0">arrow_upward</i></div>
            <div class="knk-ongoing-knok-card__note" [ngClass]="{'knk-ongoing-knok-card__note--success': item?.knok?.currentProfit &gt; 0, 'knk-ongoing-knok-card__note--wrong': item?.knok?.currentProfit &lt; 0}">{{item?.knok?.currentPrice | number: knokPriceFormat}}<small *ngIf="item?.knok?.currentProfit !== 0">&#160;({{item?.knok?.currentProfit * 100 | number: '.0-2'}}%)</small></div>
          </div>
          <div class="knk-ongoing-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ongoing-knok-card__cell knk-ongoing-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 50" fxLayoutGap="15px">
            <div class="knk-ongoing-knok-card__chart" [style.height.px]="65">
              <knk-ongoing-item-chart [item]="item.chartData"></knk-ongoing-item-chart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</ng-container>
<ng-template #ongoingDefault>
  <section fxLayout="row" fxLayoutAlign="end stretch" fxFlexFill>
    <div class="knk-ongoing-knok-card" (click)="goToKnok()">
      <div class="knk-ongoing-knok-card__headline">
        <div fxLayout="row" fxLayoutAlign="space-between stretch">
          <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center" fxLayoutGap="20px">
            <div class="knk-ongoing-knok-card__trading">{{item?.knok?.marketDisplayName?.replace('/', ' / ')}}</div>
            <div class="knk-ongoing-knok-card__exchange">{{item?.knok?.exchangeName}}</div>
          </div>
          <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center" fxLayoutGap="20px">
            <div class="btn-group" #dropdown="bs-dropdown" dropdown placement="bottom left"><i class="material-icons" dropdownToggle aria-controls="dropdown-basic" (click)="$event.stopPropagation();" [style.cursor]="'pointer'">more_vert</i>
              <div class="dropdown-menu dropdown-menu--ongoing" *dropdownMenu [@fade]="dropdown.isOpen" role="menu" aria-labelledby="button-basic">
                <div class="knk-ongoing-dropdown-menu">
                  <div class="knk-ongoing-dropdown-menu__wrapper">
                    <div class="knk-ongoing-dropdown-menu__list">
                      <button class="knk-ongoing-dropdown-menu__item" role="menuitem" type="button" (click)="$event.stopPropagation();"><i class="material-icons">share</i>&#160;Share</button>
                      <button class="knk-ongoing-dropdown-menu__item knk-ongoing-dropdown-menu__item--wrong" role="menuitem" type="button" (click)="$event.stopPropagation();"><i class="material-icons">mood_bad</i>&#160;Cancel Knok</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="knk-ongoing-knok-card__content">
        <div fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="20px">
          <div class="knk-ongoing-knok-card__cell" fxLayout="column" fxFlex="1 1 45" fxLayoutGap="15px">
            <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 auto">
              <div fxLayout="column" fxLayoutGap="5px">
                <div class="knk-ongoing-knok-card__label">Current price<i class="material-icons knk-ongoing-knok-card__icon knk-ongoing-knok-card__icon--wrong" *ngIf="item?.knok?.currentProfit &lt; 0">arrow_downward</i><i class="material-icons knk-ongoing-knok-card__icon knk-ongoing-knok-card__icon--success" *ngIf="item?.knok?.currentProfit &gt; 0">arrow_upward</i></div>
                <div class="knk-ongoing-knok-card__note" [ngClass]="{'knk-ongoing-knok-card__note--success': item?.knok?.currentProfit &gt; 0, 'knk-ongoing-knok-card__note--wrong': item?.knok?.currentProfit &lt; 0}">{{item?.knok?.currentPrice | number: knokPriceFormat}}<small *ngIf="item?.knok?.currentProfit !== 0">&#160;({{item?.knok?.currentProfit * 100 | number: '.0-2'}}%)</small></div>
              </div>
            </div>
            <div fxLayout="row" fxLayoutAlign="start start" fxFlex="1 1 auto">
              <div class="knk-ongoing-knok-card__chart" [style.height.px]="85">
                <knk-ongoing-item-chart [item]="item.chartData"></knk-ongoing-item-chart>
              </div>
            </div>
          </div>
          <div class="knk-ongoing-knok-card__frontside" fxLayout="column" fxFlex="1 1 55">
            <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
              <div class="knk-ongoing-knok-card__cell" fxLayout="column" fxLayoutGap="15px" fxFlex="1 1 50">
                <div class="knk-ongoing-knok-card__label">Time left</div>
                <div class="knk-ongoing-knok-card__note">{{timeLeft?.value | number}}<small>&#160;{{timeLeft?.label}}</small></div>
              </div>
              <div class="knk-ongoing-knok-card__spacer" fxFlex="1 0 1px"></div>
              <div class="knk-ongoing-knok-card__cell" fxLayout="column" fxLayoutGap="15px" fxFlex="1 1 50">
                <div class="knk-ongoing-knok-card__label">Purchases</div>
                <div class="knk-ongoing-knok-card__note">
                  <ng-svg-icon class="knk-ongoing-icon" file="/public/images/coins.svg" name="default"></ng-svg-icon>&#160;{{item?.status?.purchases}}
                </div>
              </div>
            </div>
            <div class="knk-ongoing-knok-card__hspacer" fxFlex="1 0 1px"></div>
            <div class="knk-ongoing-knok-card__cell" fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
              <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutGap="15px" fxFlex="1 1 50">
                <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px" fxFlex="1 1 100">
                  <div class="knk-avatar"><img class="knk-avatar__image" *ngIf="item?.knokser?.hasAvatar" [src]="avatarHref"><i class="material-icons knk-avatar__icon" *ngIf="!item?.knokser?.hasAvatar">account_circle</i></div>
                  <div class="knk-ongoing-knok-card__name">
                    <div>{{userFirstName}}</div>
                    <div>{{userLastName}}</div>
                  </div>
                </div>
              </div>
              <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutGap="15px" fxFlex="1 1 50">
                <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="15px" fxFlex="1 1 100">
                  <button class="knk-button knk-button--outlined knk-button--rounded knk-button--feedback" (click)="$event.stopPropagation(); giveFeedback()" type="button"><i class="material-icons knk-button__icon">thumbs_up_down</i>&#160;Give Feedback</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</ng-template>