@if(layout === 'brew') {
  <div style="margin-left:10px;margin-right:10px;" #brewInformationContainer>

    @if (brew.flow_profile) {
      <swiper-container #swiper  pager="true" [pagination]="{ draggable: true, clickable: true }">
        <swiper-slide>
          <ng-container *ngTemplateOutlet="brewCardTemplate">
          </ng-container>
        </swiper-slide>
        <swiper-slide >
          <!--Z-index -1 to let it scroll all good-->
          <ion-card class='long-card brew-layout' [class.best-brew]="brew.best_brew" [class.favourite-brew]="brew.favourite" style='z-index:-1'>
            <ion-card-content class='no-ion-col-vertical-padding ion-padding-top' >
              @if (informationContainerWidth) {
                <graph-display-card [staticChart]="true" [chartWidth]='informationContainerWidth' [chartHeight]='informationContainerHeight' [flowProfilePath]='brew.flow_profile'></graph-display-card>
              }
            </ion-card-content>
          </ion-card>

        </swiper-slide>
      </swiper-container>
    } @else {
      <ng-container *ngTemplateOutlet="brewCardTemplate">
      </ng-container>
    }
    <div style='height:10px;'></div>
  </div>
} @else {
  <ion-card class='long-card dashboard-layout' [class.best-brew]="brew.best_brew" [class.favourite-brew]="brew.favourite" tappable (click)='showBrew()' (long-press)='longPressEditBrew($event)'>
    <ion-card-content class='no-ion-padding no-ion-margin' #card>
      <ion-grid class='ion-no-padding'>
        <ion-row>
          <ion-col size='3' size-xs='4'>

            <div class='dashboard-time-center'>
              <div class='font-size-18'>
                {{ brew.config.unix_timestamp | formatDate:["DD"] }}.<br />
                <span class='font-size-14'>
                  {{ brew.config.unix_timestamp | formatDate:["MMMM"] }}
                  <br />{{ brew.config.unix_timestamp | formatDate:["YYYY"] }}
                </span>
              </div>

            </div>
            <div class='vr'></div>
          </ion-col>
          <ion-col size='9' size-xs='8' style='padding-left:16px;'>
            <div style='padding-top:8px;padding-right:8px;padding-bottom:8px;'>
              <ion-grid class='ion-no-padding'>
                <ion-row>
                  <ion-col class='margin-header' size='10'>
                    <ion-list lines='none' style='width:100%;'>
                      <ion-item>
                        <ion-col class='ion-text-bold' size='12'>
                          @if (brew.best_brew) {
                            <ion-icon name='trophy'
                            style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
                          }
                          @if (brew.favourite) {
                            <ion-icon name='heart'
                            style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
                          }
                          @if (brew?.flow_profile) {
                            <ion-icon name='analytics-outline'
                            style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
                          }
                          @if ((bean | beanFunctionPipe: BEAN_FUNCTION_PIPE_ENUM.IS_FROZEN)) {
                            <ion-icon style='top: 3px;position: relative;margin-right:5px;' name='snow-outline'
                            ></ion-icon>
                          }
                          @if ((bean | beanFunctionPipe: BEAN_FUNCTION_PIPE_ENUM.IS_UNFROZEN)) {
                            (<ion-icon style='top: 3px;position: relative;' name='snow-outline'></ion-icon>)
                          }
                          {{ bean?.name }}
                        </ion-col>
                      </ion-item>
                      <ion-item>
                        <ion-col size='12'>
                          {{ preparation?.name }}
                        </ion-col>
                      </ion-item>
                      <ion-item>
                        <ion-col size='12'>
                          {{ mill?.name }}
                        </ion-col>
                      </ion-item>
                    </ion-list>
                  </ion-col>
                  <ion-col size='2'>
                    @if ((brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.IS_ARCHIVED)===false) {
                      <ion-button (click)='showBrewActions($event)'
                        class='button-top-absolute' color='accent'
                        fill='clear' tappable>
                        <ion-icon name='beanconqueror-dots' slot='icon-only'></ion-icon>
                      </ion-button>
                    }
                    @if ((brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.IS_ARCHIVED) === true) {
                      <ion-button class='button-top-absolute' color='accent' fill='clear'>
                        <ion-icon name='archive' slot='icon-only'></ion-icon>
                      </ion-button>
                    }
                  </ion-col>
                </ion-row>
              </ion-grid>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
}

<ng-template #brewCardTemplate>
  @let choosenImageDisplayingType = settings?.brew_display_image_type;
  <ion-card class='long-card brew-layout' [class.best-brew]="brew.best_brew" [class.favourite-brew]="brew.favourite" tappable (click)='showBrew()' (long-press)='longPressEditBrew($event)'>
    <ion-card-content #card class='no-ion-col-vertical-padding ion-padding-top' [ngClass]="brew.flow_profile?'add-bottom-spacing':''">
      <ion-grid class='no-padding-bottom' style='padding-top:0px;'>
        <ion-row style='height:60px;'>

          <ion-col size-xs='3' size-xl='1' size-sm='1' size-md='1' size-lg='1' size="1" class='ion-no-padding'>
            @if (choosenImageDisplayingType === BREW_DISPLAY_IMAGE_TYPE.PREPARATION) {
              <ng-container [ngTemplateOutlet]="preparationImage"></ng-container>
            } @else if  (choosenImageDisplayingType === BREW_DISPLAY_IMAGE_TYPE.BEAN) {
              @let hasBeanPhoto = (bean | beanFunctionPipe: BEAN_FUNCTION_PIPE_ENUM.HAS_PHOTOS);
              @if (hasBeanPhoto) {
                <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
                  <async-image [filePath]='bean?.attachments[0]' class='bean-slider'></async-image>
                </div>
              } @else {
                <ng-container [ngTemplateOutlet]="preparationImage"></ng-container>
              }
            } @else if  (choosenImageDisplayingType === BREW_DISPLAY_IMAGE_TYPE.BREW) {
              @let hasBrewPhoto = (brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.HAS_PHOTOS);
              @if (hasBrewPhoto) {
                <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
                  <async-image [filePath]='brew?.attachments[0]' class='bean-slider'></async-image>
                </div>
              } @else {
                <ng-container [ngTemplateOutlet]="preparationImage"></ng-container>
              }
            }
          </ion-col>
          <ion-col size-xs='9' size-xl='11' size-sm='11' size-md='11' size-lg='11' style='margin: auto 0;'>
            <ion-grid class='ion-no-padding'>
              <ion-row class='ion-padding-bottom-half'>
                <ion-col size='10'>
                  <ion-title class='ion-no-padding font-size-18'>
                    @if (brew.best_brew) {
                      <ion-icon name='trophy'
                      style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
                    }
                    @if (brew.favourite) {
                      <ion-icon name='heart'
                      style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
                    }
                    @if (brew?.flow_profile) {
                      <ion-icon name='analytics-outline'
                      style='top: 3px;position: relative;margin-right:5px;'></ion-icon>
                    }
                    <strong>{{ brew.config.unix_timestamp | formatDate:[settings?.date_format] }}</strong><span
                  class='ion-padding-start'>{{ brew.config.unix_timestamp | formatDate:["HH:mm"] }}</span></ion-title>
                </ion-col>
                <ion-col size='2'>
                  <ion-button (click)='showBrewActions($event)' class='button-top-absolute' color='accent' fill='clear'>
                    <ion-icon name='beanconqueror-dots' slot='icon-only'></ion-icon>
                  </ion-button>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col [size]='brew?.rating>0 ? (uiHasCustomRatingRange? 10:8) :12'>
                  <div class='ion-no-padding font-size-20 ion-title brew-title'>
                    @if ((bean | beanFunctionPipe: BEAN_FUNCTION_PIPE_ENUM.IS_FROZEN)) {
                      <ion-icon style='top: 3px;position: relative;margin-right:5px;' name='snow-outline'
                      ></ion-icon>
                    }
                    @if ((bean | beanFunctionPipe: BEAN_FUNCTION_PIPE_ENUM.IS_UNFROZEN)) {
                      (<ion-icon style='top: 3px;position: relative;' name='snow-outline'></ion-icon>)
                    }
                    {{ bean?.name }}@if (bean?.roaster) {
                    <span class='font-size-16'>&nbsp;({{ bean?.roaster }})</span>
                  }
                </div>
              </ion-col>
              @if ((settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.rating,
                preparation?.visible_list_view_parameters.rating,
                preparation?.use_custom_parameters]) && (brew?.rating > 0 && uiHasCustomRatingRange === false)) {
                <ion-col
                  size='4'>
                  <ngx-stars #brewStars [color]="'#BFB9B0'" [initialStars]='brew.rating' [maxStars]='5'
                    [readonly]='true' [wholeStars]='true' class='ion-float-right brew-stars'>
                  </ngx-stars>
                </ion-col>
              }
              @if ((settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.rating,
                preparation?.visible_list_view_parameters.rating,
                preparation?.use_custom_parameters]) && (brew?.rating > 0  && uiHasCustomRatingRange === true)) {
                <ion-col
                  size='2' class='ion-text-right'>
                  <ion-badge>{{ brew.rating | toFixed: 2 }}</ion-badge>
                </ion-col>
              }
            </ion-row>
          </ion-grid>
        </ion-col>
      </ion-row>
      @if (collapsed) {
        <div style='height:10px;'></div>
      }
      @if (!collapsed) {
        <ion-row>
          <ion-col>
            <hr />
          </ion-col>
        </ion-row>
      }
    </ion-grid>
    @if (!collapsed) {
      <ion-grid class='no-ion-col-vertical-padding limit-grid-overflow'>
        <ion-row class='ion-padding-bottom-half'>
          @if ((settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.method_of_preparation,
            preparation?.visible_list_view_parameters.method_of_preparation,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_PREPARATION_METHOD" | translate }}</ion-label>
              <br />
              <ion-text>{{ preparation?.name }}</ion-text>
            </ion-col>
          }
          @if ((settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.mill,
            preparation?.visible_list_view_parameters.mill,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_MILL" |translate }}</ion-label>
              <br />
              <ion-text>{{ mill?.name }}</ion-text>
            </ion-col>
          }
          <ion-col size='6'>
            <ion-label class='card-headline'>{{ "BREW_DATA_IN_OUT_BR" | translate }}</ion-label>
            <br />
            @if (preparation?.style_type !== PREPARATION_STYLE_TYPE.ESPRESSO) {
              <ion-text>
                {{ brew?.grind_weight | number : '.0-2' }}gr
                / {{ brew.brew_quantity | number : '.0-2' }}{{ brewQuantityEnum[brew?.brew_quantity_type] }}&nbsp;({{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}})
              </ion-text>
            }
            @if (preparation?.style_type === PREPARATION_STYLE_TYPE.ESPRESSO) {
              <ion-text>
                {{ brew?.grind_weight | number : '.0-2' }}gr
                / {{ brew.brew_beverage_quantity | number : '.0-2' }}{{ brewQuantityEnum[brew?.brew_beverage_quantity_type] }}&nbsp;({{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}})
              </ion-text>
            }
          </ion-col>
          @if (brew?.brew_time && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.brew_time,
            preparation?.visible_list_view_parameters.brew_time,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ 'BREW_DATA_TIME' | translate }}</ion-label>
              <br />
              <ion-text>{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_BREW_TIME}}</ion-text>
            </ion-col>
          }
          @if ((brew?.grind_size != '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.grind_size,
            preparation?.visible_list_view_parameters.grind_size,
            preparation?.use_custom_parameters])) ||  (brew?.mill_speed > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.mill_speed,
            preparation?.visible_list_view_parameters.mill_speed,
            preparation?.use_custom_parameters]))) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ 'BREW_DATA_GRIND_SIZE' | translate }}</ion-label>
              <br />
              <ion-text>@if (brew?.grind_size != '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.grind_size,
                preparation?.visible_list_view_parameters.grind_size,
                preparation?.use_custom_parameters])) {
                <span>{{ brew?.grind_size }}</span>
                }@if (brew?.mill_speed > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.mill_speed,
                preparation?.visible_list_view_parameters.mill_speed,
                preparation?.use_custom_parameters])) {
                <span>&nbsp;&#64;&nbsp;{{ brew?.mill_speed }}</span>
              }</ion-text>
            </ion-col>
          }
          @if (brew?.tds > 0 && brew?.brew_beverage_quantity>0) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ 'BREW_DATA_TDS_EY' | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.tds }},&nbsp;%{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_EXTRACTION_YIELD}}</ion-text>
            </ion-col>
          }
          @if (brew?.brew_temperature > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.brew_temperature,
            preparation?.visible_list_view_parameters.brew_temperature,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ 'BREW_DATA_BREW_TEMPERATURE' | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.brew_temperature }}</ion-text>
            </ion-col>
          }
          @if (brew?.pressure_profile !=='' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.pressure_profile,
            preparation?.visible_list_view_parameters.pressure_profile,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ 'BREW_DATA_PRESSURE_PROFILE' | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.pressure_profile }}</ion-text>
            </ion-col>
          }
          @if (brew?.bean_weight_in > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.bean_weight_in,
            preparation?.visible_list_view_parameters.bean_weight_in,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_BEAN_WEIGHT_IN" | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.bean_weight_in }}</ion-text>
            </ion-col>
          }
          @if (brew?.mill_timer > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.mill_timer,
            preparation?.visible_list_view_parameters.mill_timer,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_MILL_TIMER" | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.mill_timer }}</ion-text>
            </ion-col>
          }
          @if (brew?.vessel_name !== '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.vessel,
            preparation?.visible_list_view_parameters.vessel,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_VESSEL_NAME_WEIGHT" | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.vessel_name }} / {{ brew?.vessel_weight }}</ion-text>
            </ion-col>
          }
          @if (brew?.brew_temperature_time > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.brew_temperature_time,
            preparation?.visible_list_view_parameters.brew_temperature_time,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_TEMPERATURE_TIME" | translate }}</ion-label>
              <br />
              <ion-text>{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_TEMPERATURE_TIME }}</ion-text>
            </ion-col>
          }
          @if (brew?.coffee_blooming_time > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.coffee_blooming_time,
            preparation?.visible_list_view_parameters.coffee_blooming_time,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_BLOOMING_TIME" | translate }}</ion-label>
              <br />
              <ion-text>{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_BLOOMING_TIME }}</ion-text>
            </ion-col>
          }
          @if ((preparation?.style_type === PREPARATION_STYLE_TYPE.ESPRESSO && brew?.coffee_first_drip_time > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.coffee_first_drip_time,
            preparation?.visible_list_view_parameters.coffee_first_drip_time,
            preparation?.use_custom_parameters])) || (preparation?.use_custom_parameters &&  preparation?.visible_list_view_parameters.coffee_first_drip_time && brew?.coffee_first_drip_time > 0)) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_FIRST_DRIP_TIME" | translate }}</ion-label>
              <br />
              <ion-text>{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_FIRST_DRIP_TIME }}</ion-text>
            </ion-col>
          }
          @if (brew?.water !== '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.water,
            preparation?.visible_list_view_parameters.water,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_WATER" | translate }}</ion-label>
              <br />
              <ion-text>{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_WATER_NAME }}</ion-text>
            </ion-col>
          }
          @if (brew?.coffee_type !== '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.coffee_type,
            preparation?.visible_list_view_parameters.coffee_type,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_TYPE" | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.coffee_type }}</ion-text>
            </ion-col>
          }
          @if (brew?.coffee_concentration !== '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.coffee_concentration,
            preparation?.visible_list_view_parameters.coffee_concentration,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_DATA_COFFEE_CONCENTRATION" | translate }}</ion-label>
              <br />
              <ion-text>{{ brew?.coffee_concentration }}</ion-text>
            </ion-col>
          }
          @if (bean?.roastingDate && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.bean_age_by_brew_date,
            preparation?.visible_list_view_parameters.bean_age_by_brew_date,
            preparation?.use_custom_parameters])) {
            <ion-col size='6'>
              <ion-label class='card-headline'>{{ "BREW_INFORMATION_BEAN_AGE" | translate }}</ion-label>
              <br />
              <ion-text>{{brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_CALCULATED_BEAN_AGE }}</ion-text>
            </ion-col>
          }
          @if (brew?.method_of_preparation_tools.length > 0 && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.method_of_preparation_tool,
            preparation?.visible_list_view_parameters.method_of_preparation_tool,
            preparation?.use_custom_parameters])) {
            <ion-col size='12'>
              <ion-label class='card-headline'>{{ "BREW_DATA_PREPARATION_METHOD_TOOL" | translate }}</ion-label>
              <div>
                @for (uuid of brew?.method_of_preparation_tools; track uuid; let i = $index) {
                  <ion-chip
                    >{{brew | brewFunctionPipe: [BREW_FUNCTION_PIPE_ENUM.GET_PREPARATION_TOOL_NAME,uuid] }}
                  </ion-chip>
                }
              </div>
            </ion-col>
          }
          @if (((brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.HAS_CUSTOM_FLAVORS) || (brew | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.HAS_PREDEFINED_FLAVORS))) {
            <ion-col size='12'>
              <ion-label class='card-headline'>{{ 'BREW_DATA_FLAVOR' | translate }}</ion-label>
              <br />
              <ion-text class='ion-text-wrap'>{{ uiCuppedBrewFlavors }}</ion-text>
            </ion-col>
          }
          @if (brew?.note != '' && (settings | brewFieldVisiblePipe: [settings.visible_list_view_parameters.note,
            preparation?.visible_list_view_parameters.note,
            preparation?.use_custom_parameters])) {
            <ion-col size='12'>
              <ion-label class='card-headline'>{{ "BREW_DATA_NOTES" | translate }}</ion-label>
              <br />
              <ion-text>
                <pre>{{ brew?.note }}</pre>
              </ion-text>
            </ion-col>
          }
        </ion-row>
      </ion-grid>
    }
  </ion-card-content>
</ion-card>
</ng-template>


<ng-template #preparationImage>
  @let hasPreparationPhoto = (preparation | preparationFunctionPipe: PREPARATION_FUNCTION_PIPE_ENUM.HAS_PHOTOS);
  @if(hasPreparationPhoto === false) {
    <ion-icon class='full-sized-icon' name='{{preparation | preparationFunctionPipe: PREPARATION_FUNCTION_PIPE_ENUM.GET_ICON}}'></ion-icon>
  } @else {
    <div style='margin: 0 auto;height: 100%;display: flex;align-items: center;' tappable>
      <async-image [filePath]='preparation?.attachments[0]' class='bean-slider'></async-image>
    </div>
  }
</ng-template>
