
<ng-container [ngSwitch]="dense">
  <ng-container *ngSwitchCase="false">
    <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 100" fxFlexFill>
      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px" fxFlex="1 1 auto" [style.marginRight.px]="60">
        <div class="knk-card-label">Score</div>
        <div class="knk-grade">
          <div class="knk-grade__inside" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
            <ng-svg-icon class="knk-grade-image" file="/public/images/knok.svg" name="default"></ng-svg-icon>
            <div class="knk-grade-score">{{score | number:'1.0-1'}}/{{max}}</div>
          </div>
          <svg class="knk-grade__outside knk-grade-icon" xmlns="http://www.w3.org/2000/svg" [attr.x]="gradeShape.x" [attr.y]="gradeShape.y" [attr.width]="gradeShape.width" [attr.height]="gradeShape.height" [attr.viewbox]="gradeShape.viewbox" #gradeIcon [ngClass]="{&quot;knk-grade-icon--animate&quot;: shown}">
            <circle class="knk-grade-icon__background" #circleBackground [attr.r]="gradeShape.r" [attr.cx]="gradeShape.cx" [attr.cy]="gradeShape.cy"></circle>
            <circle class="knk-grade-icon__foreground" #circleForeground [attr.r]="gradeShape.r" [attr.cx]="gradeShape.cx" [attr.cy]="gradeShape.cy" [style.strokeDasharray]="foregroundCircumference" [style.strokeDashoffset]="shown ? foregroundDashOffset : foregroundCircumference"></circle>
          </svg>
        </div>
      </div>
      <div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="20px" fxFlex="1 1 auto">
        <div fxLayout="column" fxLayoutGap="5px">
          <div class="knk-card-label">Analysis usefulness</div>
          <div class="knk-grade-range" [ngClass]="{&quot;knk-grade-range--animate&quot;: shown}">
            <div class="knk-grade-range__scale" [style.maxWidth.%]="shown ? usefulnessPercentage : 0">{{usefulness | number:'1.0-1'}}/{{max}}</div>
          </div>
        </div>
        <div fxLayout="column" fxLayoutGap="5px">
          <div class="knk-card-label">Information clarity</div>
          <div class="knk-grade-range" [ngClass]="{&quot;knk-grade-range--animate&quot;: shown}">
            <div class="knk-grade-range__scale" [style.maxWidth.%]="shown ? clarityPercentage : 0">{{clarity | number:'1.0-1'}}/{{max}}</div>
          </div>
        </div>
        <div fxLayout="column" fxLayoutGap="5px">
          <div class="knk-card-label">Profitability</div>
          <div class="knk-grade-range" [ngClass]="{&quot;knk-grade-range--animate&quot;: shown}">
            <div class="knk-grade-range__scale" [style.maxWidth.%]="shown ? profitabilityPercentage : 0">{{profitability | number:'1.0-1'}}/{{max}}</div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
  <ng-container *ngSwitchCase="true">
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px" fxFlex="1 1 100" fxFlexFill>
      <div class="knk-grade knk-grade--dense">
        <div class="knk-grade__inside">
          <ng-svg-icon class="knk-grade-image knk-grade-image--dense" file="/public/images/knok.svg" name="default"></ng-svg-icon>
        </div>
        <svg class="knk-grade__outside knk-grade-icon knk-grade-icon--dense" xmlns="http://www.w3.org/2000/svg" [attr.x]="gradeShape.x" [attr.y]="gradeShape.y" [attr.width]="gradeShape.width" [attr.height]="gradeShape.height" [attr.viewbox]="gradeShape.viewbox" #gradeIcon [ngClass]="{&quot;knk-grade-icon--animate&quot;: shown}">
          <circle class="knk-grade-icon__background" #circleBackground [attr.r]="gradeShape.r" [attr.cx]="gradeShape.cx" [attr.cy]="gradeShape.cy"></circle>
          <circle class="knk-grade-icon__foreground" #circleForeground [attr.r]="gradeShape.r" [attr.cx]="gradeShape.cx" [attr.cy]="gradeShape.cy" [style.strokeDasharray]="foregroundCircumference" [style.strokeDashoffset]="shown ? foregroundDashOffset : foregroundCircumference"></circle>
        </svg>
      </div>
      <div class="knk-grade-score knk-grade-score--dense">{{score | number:'1.0-1'}}/{{max}}</div>
    </div>
  </ng-container>
</ng-container>