hc_dishwasher_card:
  entity: sensor.dishwasher_operation_state
  name: Bosch Dishwasher
  show_label: true
  tap_action:
    action: none
  hold_action:
    action: none
  double_tap_action:
    action: none
  icon: mdi:dishwasher
  state:
    - value: "Ready"
      label: "Idle"
      styles:
        custom_fields:
          bar:
            - display: none
          stat1:
            - display: none
          stat2:
            - visibility: hidden  # Hide stat2 (Finished At) without affecting layout
          stat3:
            - visibility: hidden  # Hide stat3 (Ready/Off) without affecting layout
    - value: "Off"
      label: "Off"
      styles:
        custom_fields:
          bar:
            - display: none
          stat1:
            - display: none
          stat2:
            - visibility: hidden  # Keep space for stat2
          stat3:
            - visibility: hidden  # Hide stat3 when power is off
  styles:
    card:
      - padding: 20px
      - height: 180px
      - font-family: montserrat
    grid:
      - grid-template-areas: '"i program" "n stat2" "bar bar" "stat1 stat3"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 70px min-content 40px min-content  # Add minimum height for rows
    name:
      - justify-self: start
      - font-size: 16px
      - font-weight: 500
    label:
      - justify-self: start
      - font-size: 16px
      - font-weight: 500
    icon:
      - width: 36px
    img_cell:
      - justify-self: start
      - align-self: start
      - width: 36px
      - height: 36px
    custom_fields:
      program:
        - justify-self: end
        - align-self: end
        - padding-bottom: 6px
        - font-size: 16px
        - font-weight: 500
        - visibility: >
            [[[ return states['switch.dishwasher_power'].state !== 'off' ? 'visible' : 'hidden'; ]]]
      stat1:
        - justify-self: start
        - font-size: 12px
        - opacity: 0.7
      stat2:
        - justify-self: end
        - font-size: 16px
        - font-weight: 500
        - visibility: >
            [[[ return states['switch.dishwasher_power'].state !== 'off' ? 'visible' : 'hidden'; ]]]
      stat3:
        - justify-self: end
        - font-size: 12px
        - opacity: 0.7
        - visibility: >
            [[[
              var powerState = states['switch.dishwasher_power'].state;
              if (powerState === 'off') {
                return 'visible';  // Keep stat3 visible when power is off
              }
              var progress = states['sensor.dishwasher_program_progress'].state;
              if (progress === 'unavailable' || progress === 'unknown' || progress === '') {
                return 'visible';  // Show stat3 as "Ready" when power is on and progress is empty
              }
              return 'visible';  // Show progress percentage otherwise
            ]]]
      bar:
        - justify-self: start
        - width: 100%
        - border-radius: 6px
        - background: var(--slider-color)
        - height: 16px
  custom_fields:
    bar: >
      [[[
        var state = parseFloat(states['sensor.dishwasher_program_progress'].state);
        if (isNaN(state)) { state = 0; }  // Ensure it defaults to 0 if the state isn't a valid number
        return `<div style="background: var(--slider-color); border-radius: 6px; width: 100%; height: 16px;">
                  <div style="background: var(--color-blue); border-radius: 6px; height: 16px; width: ${state}%;"></div>
                </div>`;
      ]]]
    program: |
      [[[
        var powerState = states['switch.dishwasher_power'].state;
        var program = states['select.dishwasher_active_program'].state;
        var programLabels = {
          "dishcare_dishwasher_program_eco_50": "Eco",
          "dishcare_dishwasher_program_auto_2": "Auto",
          "dishcare_dishwasher_program_intensiv_70": "Heavy",
          "dishcare_dishwasher_program_quick_65": "Express 65°",
          "dishcare_dishwasher_program_night_wash": "Silent",
          "dishcare_dishwasher_program_machine_care": "Machine Care",
          "dishcare_dishwasher_program_pre_rinse": "Pre-rinse"
        };

        // If the dishwasher is on but no program is running, show "Idle"
        if (powerState !== 'off' && (!program || program === 'unavailable' || program === 'unknown')) {
          return "Idle";
        }

        return programLabels[program] || program;
      ]]]
    stat1: |
      [[[
        // Icons for rinse aid and salt status
        var rinseAidState = states['sensor.dishwasher_rinse_aid_nearly_empty'].state;
        var saltState = states['sensor.dishwasher_salt_nearly_empty'].state;

        // Set the icon color based on state
        var rinseAidColor = rinseAidState === 'present' ? 'red' : 'gray';
        var saltColor = saltState === 'present' ? 'red' : 'gray';

        return `
          <span style="color: ${rinseAidColor}; margin-right: 4px;">
            <ha-icon icon="fapro:sparkles" style="width: 16px; height: 16px;"></ha-icon>
          </span>
          <span style="color: ${saltColor};">
            <ha-icon icon="fapro:salt-shaker" style="width: 16px; height: 16px;"></ha-icon>
          </span>
        `;
      ]]]
    stat2: |
      [[[
        var finishTime = states['sensor.dishwasher_program_finish_time'].state;

        // If no program is running or finish time is unavailable, return an empty string
        if (!finishTime || finishTime === 'unavailable' || finishTime === 'unknown') {
          return "";
        }

        var time = new Date(finishTime);
        var hours = time.getHours();
        var minutes = time.getMinutes();
        return 'Finished at ' + (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
      ]]]
    stat3: |
      [[[
        var powerState = states['switch.dishwasher_power'].state;
        if (powerState === 'off') {
          return "Off";  // Display "Off" when the power is off
        }

        var progress = states['sensor.dishwasher_program_progress'].state;

        // If the progress is unavailable or empty, show "Ready"
        if (progress === 'unavailable' || progress === 'unknown' || progress === '') {
          return "Ready";  // Default to "Ready" when the dishwasher is in idle state
        }

        // Otherwise, return the progress percentage
        return progress + '%';
      ]]]