type: custom:button-card
entity: sensor.dishwasher_operation_state
name: 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
        stat3:
          - visibility: hidden
  - value: "Off"
    label: "Off"
    styles:
      custom_fields:
        bar:
          - display: none
        stat1:
          - display: none
        stat2:
          - visibility: hidden
        stat3:
          - visibility: hidden
styles:
  card:
    - padding: 20px
    - height: 180px
    - font-family:'Montserrat', sans-serif
    - font-size: 16px
  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
  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_remaining_program_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'] ? states['sensor.dishwasher_program_progress'].state : 'unknown';

      // 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 + '%';
    ]]]