
<ng-container *ngIf="userIsKnokser; else endedDefault">
  <section fxLayout="row" fxLayoutAlign="end stretch" fxFlexFill>
    <div class="knk-ended-knok-card" (click)="goToKnok()">
      <div class="knk-ended-knok-card__headline" [ngClass]="{'knk-ended-knok-card__headline--success': !isFailure, 'knk-ended-knok-card__headline--wrong': isFailure}">
        <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-ended-knok-card__trading">{{item?.knok?.marketDisplayName?.replace('/', ' / ')}}</div>
            <div class="knk-ended-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--ended" *dropdownMenu [@fade]="dropdown.isOpen" role="menu" aria-labelledby="button-basic">
                <div class="knk-ended-dropdown-menu">
                  <div class="knk-ended-dropdown-menu__wrapper">
                    <div class="knk-ended-dropdown-menu__list">
                      <button class="knk-ended-dropdown-menu__item" role="menuitem" type="button" (click)="$event.stopPropagation();"><i class="material-icons">share</i>&#160;Share</button>
                      <button class="knk-ended-dropdown-menu__item knk-ended-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-ended-knok-card__content knk-ended-knok-card__content--borderless">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxLayoutGap="5px">
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ended-knok-card__label">Your Pool</div>
            <div class="knk-ended-knok-card__note">{{item?.knokser?.pricePool | number: '.0-2'}}<small><small>&#160;Tokens</small></small></div>
          </div>
          <div class="knk-ended-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ended-knok-card__label">Knok Duration</div>
            <div class="knk-ended-knok-card__note">{{timeEnded?.month}} {{timeEnded?.day}}<small><small>&#160;ended</small></small></div>
          </div>
          <div class="knk-ended-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ended-knok-card__label">Purchases</div>
            <div class="knk-ended-knok-card__note">
              <ng-svg-icon class="knk-ended-icon" file="/public/images/coins.svg" name="default"></ng-svg-icon>&#160;{{item?.status?.purchases}}
            </div>
          </div>
          <div class="knk-ended-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 25" fxLayoutGap="15px">
            <div class="knk-ended-knok-card__label">Review score</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-ended-knok-card__content knk-ended-knok-card__content--endline">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxLayoutGap="5px">
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 30" fxLayoutGap="15px">
            <ng-container [ngSwitch]="endedStatus">
              <ng-container *ngSwitchCase="endedStatuses.ExitProceMissed">
                <div class="knk-ended-knok-card__label">Exit price missed&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--wrong">gps_not_fixed</i></div>
                <div class="knk-ended-knok-card__note knk-ended-knok-card__note--wrong"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2' }}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
              </ng-container>
              <ng-container *ngSwitchCase="endedStatuses.StopLossReached">
                <div class="knk-ended-knok-card__label">Stop loss reached&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--wrong">gps_not_fixed</i></div>
                <div class="knk-ended-knok-card__note knk-ended-knok-card__note--wrong"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
              </ng-container>
              <ng-container *ngSwitchCase="endedStatuses.ClosedByKnokser">
                <div class="knk-ended-knok-card__label">Closed&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--wrong">gps_off</i></div>
                <div class="knk-ended-knok-card__note knk-ended-knok-card__note--wrong"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
              </ng-container>
              <ng-container *ngSwitchCase="endedStatuses.Succeessful">
                <div class="knk-ended-knok-card__label">Successful&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--success">gps_fixed</i></div>
                <div class="knk-ended-knok-card__note knk-ended-knok-card__note--success"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
              </ng-container>
            </ng-container>
          </div>
          <div class="knk-ended-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 40" fxLayoutGap="15px">
            <div class="knk-ended-knok-card__chart" [style.height.px]="65">
              <knk-ended-item-chart [item]="item.chartData"></knk-ended-item-chart>
            </div>
          </div>
          <div class="knk-ended-knok-card__spacer" fxFlex="1 0 1px"></div>
          <div class="knk-ended-knok-card__cell knk-ended-knok-card__cell--dense" fxLayout="column" fxFlex="1 1 30" fxLayoutGap="15px">
            <div class="knk-ended-knok-card__label">Distance from target</div>
            <div class="knk-ended-knok-card__note">&#160;{{item?.knok?.distanceFromTarget | number: '1.0-2'}}%</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</ng-container>
<ng-template #endedDefault>
  <section fxLayout="row" fxLayoutAlign="end stretch" fxFlexFill>
    <div class="knk-ended-knok-card" (click)="goToKnok()">
      <div class="knk-ended-knok-card__headline" [ngClass]="{'knk-ended-knok-card__headline--success': !isFailure, 'knk-ended-knok-card__headline--wrong': isFailure}">
        <div fxLayout="row" fxLayoutAlign="space-between stretch">
          <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center" fxLayoutGap="20px">
            <div class="knk-ended-knok-card__trading">{{item?.knok?.marketDisplayName?.replace('/', ' / ')}}</div>
            <div class="knk-ended-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--ended" *dropdownMenu [@fade]="dropdown.isOpen" role="menu" aria-labelledby="button-basic">
                <div class="knk-ended-dropdown-menu">
                  <div class="knk-ended-dropdown-menu__wrapper">
                    <div class="knk-ended-dropdown-menu__list">
                      <button class="knk-ended-dropdown-menu__item" role="menuitem" type="button" (click)="$event.stopPropagation();"><i class="material-icons">share</i>&#160;Share</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="knk-ended-knok-card__content">
        <div fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="20px">
          <div class="knk-ended-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">
                <ng-container [ngSwitch]="endedStatus">
                  <ng-container *ngSwitchCase="endedStatuses.ExitProceMissed">
                    <div class="knk-ended-knok-card__label">Exit price missed&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--wrong">gps_not_fixed</i></div>
                    <div class="knk-ended-knok-card__note knk-ended-knok-card__note--wrong"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
                  </ng-container>
                  <ng-container *ngSwitchCase="endedStatuses.StopLossReached">
                    <div class="knk-ended-knok-card__label">Stop loss reached&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--wrong">gps_not_fixed</i></div>
                    <div class="knk-ended-knok-card__note knk-ended-knok-card__note--wrong"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
                  </ng-container>
                  <ng-container *ngSwitchCase="endedStatuses.ClosedByKnokser">
                    <div class="knk-ended-knok-card__label">Closed&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--wrong">gps_off</i></div>
                    <div class="knk-ended-knok-card__note knk-ended-knok-card__note--wrong"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
                  </ng-container>
                  <ng-container *ngSwitchCase="endedStatuses.Succeessful">
                    <div class="knk-ended-knok-card__label">Successful&#160;<i class="material-icons knk-ended-knok-card__icon knk-ended-knok-card__icon--success">gps_fixed</i></div>
                    <div class="knk-ended-knok-card__note knk-ended-knok-card__note--success"><span>{{item?.knok?.currentProfit * 100 | number: '1.0-2'}}%</span><small>&#160;{{item?.knok?.currentPrice | number: knokPriceFormat}}</small></div>
                  </ng-container>
                </ng-container>
              </div>
            </div>
            <div fxLayout="row" fxLayoutAlign="start start" fxFlex="1 1 auto">
              <div class="knk-ended-knok-card__chart" [style.height.px]="85">
                <knk-ended-item-chart [item]="item.chartData"></knk-ended-item-chart>
              </div>
            </div>
          </div>
          <div class="knk-ended-knok-card__frontside" fxLayout="column" fxFlex="1 1 55">
            <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
              <div class="knk-ended-knok-card__cell" fxLayout="column" fxLayoutGap="15px" fxFlex="1 1 50">
                <div class="knk-ended-knok-card__label">Distance from target</div>
                <div class="knk-ended-knok-card__note">{{item?.knok?.distanceFromTarget | number: '.0-2'}}%</div>
              </div>
              <div class="knk-ended-knok-card__spacer" fxFlex="1 0 1px"></div>
              <div class="knk-ended-knok-card__cell" fxLayout="column" fxLayoutGap="15px" fxFlex="1 1 50">
                <div class="knk-ended-knok-card__label">Purchases</div>
                <div class="knk-ended-knok-card__note">
                  <ng-svg-icon class="knk-ended-icon" file="/public/images/coins.svg" name="default"></ng-svg-icon>&#160;{{item?.status?.purchases}}
                </div>
              </div>
            </div>
            <div class="knk-ended-knok-card__hspacer" fxFlex="1 0 1px"></div>
            <div class="knk-ended-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-ended-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">
                  <ng-container *ngIf="!feedbackExists">
                    <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>
                  </ng-container>
                  <ng-container *ngIf="feedbackExists">
                    <div class="knk-ended-knok-card__label">Thanks<br>for the feedback</div>
                  </ng-container>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</ng-template>