change-filament.component.html

<ng-container *ngIf="!usingM600(); else M600Change">
  <span class="filament-heading" i18n="@@load-new-filament">load new filament</span>
  <span class="change-filament__info" i18n="@@load-new-filament-message">only put a little filament in, I'll pull in the rest.</span>
</ng-container>

<ng-container *ngIf="selectedSpool; else noSpoolSelected">
  <div style="margin-top: 3vh">
    <div class="heating__information-type">
      <span
        class="heating__information-type-box"
        [ngStyle]="{ 'border-color': selectedSpool.color, 'box-shadow': '0 0 3vh ' + selectedSpool.color }"
      >
        {{ selectedSpool.material }}
      </span>
    </div>
    <span class="change-filament__filament-name">{{ selectedSpool.displayName }}</span>
    <span class="change-filament__filament-weight">
      {{ getSpoolWeightLeft(selectedSpool.weight, selectedSpool.used) }}
    </span>
    <span i18n="@@filament-grams-left">g left</span>
  </div>
</ng-container>

<div class="filament__wrapper-button">
  <a class="filament__done" matRipple [matRippleUnbounded]="false" (click)="increasePage.emit()" i18n="@@filament-done">
    done
  </a>
</div>

<ng-template #noSpoolSelected>
  <div style="margin-top: 15vh">
    <span class="change-filament__filament-name" i18n="@@filament-waiting">I'll wait for you.</span>
  </div>
</ng-template>

<ng-template #M600Change>
  <span class="filament-heading" i18n="@@filament-m600">M600 sent</span>
  <span class="change-filament__info" i18n="@@follow-printer-screen">follow the instructions on your printers' display</span>
</ng-template>