<ion-item  class="no-bottom-border item" lines="none">
  <ion-input #timerElement label-placement="stacked" label='{{label}}' readonly (click)="showTimeOverlay($event);"></ion-input>
  @if(baristamode === false) {


    @if (!timer.hasStarted && showListeningButton) {
      <ion-button (click)="startListening($event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-listening-start" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (timer.hasStarted && timer.runTimer && showIgnoreScaleWeightButtonVisible && ignoreWeightButtonActive === true) {
      <ion-button (click)="ignoreScaleWeight($event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-scale-pause" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (timer.hasStarted  && timer.runTimer &&  showIgnoreScaleWeightButtonVisible && unignoreWeightButtonActive === true) {
      <ion-button (click)="unignoreScaleWeight($event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-scale-play" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (timer.runTimer && timer.hasStarted && !timer.hasFinished && showBloomTimer) {
      <ion-button (click)="bloomTime($event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-blooming" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (timer.runTimer && timer.hasStarted && !timer.hasFinished && showDripTimer) {
      <ion-button (click)="dripTime($event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-water-drop" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (timer.runTimer && timer.hasStarted && !timer.hasFinished) {
      <ion-button (click)="pauseTimer('click',$event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-pause" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if ((!timer.hasStarted || !timer.runTimer && timer.hasStarted && !timer.hasFinished) && timer.seconds>0) {
      <ion-button (click)="reset(true,$event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-full-reset" slot="icon-only"></ion-icon>
      </ion-button>
    }

    @if (!timer.runTimer && timer.hasStarted && !timer.hasFinished) {
      <ion-button (click)="__resumeTimer($event)"
        class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-play" slot="icon-only"></ion-icon>
      </ion-button>
    }

    @if ((showListeningButton === true && !timer.hasStarted) || ((settings.bluetooth_scale_listening_threshold_active === false || (uiSmartScaleConnected === false && settings.bluetooth_scale_listening_threshold_active === true)) && !timer.hasStarted)) {
      <ion-button (click)="__startTimer($event)" class="big-icon-only" fill="clear" slot="end" tappable>
        <ion-icon class="ion-color-accent" name="beanconqueror-play" slot="icon-only"></ion-icon>
      </ion-button>
    }
  }
  @if (uiSmartScaleConnected && uiSmartScaleSupportsTaring) {
    <ion-button (click)="__tareScale($event)"  class="big-icon-only" fill="clear" slot="end" tappable>
      <ion-icon class="ion-color-accent" name="beanconqueror-scale-tare" slot="icon-only"></ion-icon>
    </ion-button>
  }


</ion-item>
