Corrected Dishwasher Card

- type: custom:bubble-card
  card_type: separator
  name: Dishwasher
  icon: mdi:dishwasher
  styles: |
    .bubble-line {
        background: rgb(52, 52, 52);
        opacity: 1;
    }

- type: custom:layout-card
  layout_type: custom:grid-layout
  cards:
    - type: custom:button-card
      view_layout:
        grid-area: one
      show_name: true
      name: Run Auto
      layout: icon_name
      icon: mdi:silverware-clean
      entity: switch.dishwasher_program_auto2
      tap_action:
        action: toggle
      styles:
        card:
          - border-radius: 30px
          - border-width: 1px
          - border-color: rgb(52, 52, 52)
        img_cell:
          - width: 40px
          - height: 35px
        icon:
          - width: 25px
          - height: 25px
          - color: white
          - margin-top: 0px
        name:
          - font-size: 12px
          - justify-self: start

    - type: custom:mushroom-entity-card
      entity: input_text.dishwasher_status
      name: Dishwasher
      icon: ""
      fill_container: true
      icon_color: rgba(251, 133, 0, 1)
      card_mod:
        style: |
          {% if is_state('input_text.dishwasher_status', 'Clean') %}
            ha-card {
              border-radius: 30px;
              border-width: 1px;
              height: 50px !important;
            }
            ha-state-icon {
              color: rgba(142, 202, 230, 1);
            }
            ha-state-icon {
              --card-mod-icon: mdi:dishwasher
            }
          {% else %}
            ha-card {
              border-radius: 30px;
              border-width: 1px;
              height: 50px !important;
            }
            ha-state-icon {
              color: rgba(251, 133, 0, 1);
            }
            ha-state-icon {
              --card-mod-icon: mdi:dishwasher-alert
            }
          {% endif %}

  layout:
    grid-template-columns: 1fr 2fr
    grid-template-rows: 2
    grid-template-areas: "\"one two\""
    margin: 0px -5px -10px -7px

- type: conditional
  conditions:
    - condition: state
      entity: sensor.dishwasher_rinse_aid_nearly_empty
      state: present
  card:
    type: custom:mushroom-entity-card
    entity: sensor.dishwasher_rinse_aid_nearly_empty
    icon_color: light-grey
    icon: mdi:water-alert
    fill_container: true
    name: Dishwasher Needs Rinse-Aid
    card_mod:
      style: |
        ha-card {
          border-radius: 30px;
          border-width: 1px;
        }
        ha-state-icon {
          color: rgba(142, 202, 230, 1);
        }

- type: conditional
  conditions:
    - condition: state
      entity: sensor.dishwasher_operation_state
      state: run
  card:
    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
      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: |
        [[[
          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 (powerState !== 'off' && (!program || program === 'unavailable' || program === 'unknown')) {
            return "Idle";
          }

          return programLabels[program] || program;
        ]]]
      stat3: |
        [[[
          var powerState = states['switch.dishwasher_power'].state;
          if (powerState === 'off') {
            return "Off";
          }

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

          if (progress === 'unavailable' || progress === 'unknown' || progress === '') {
            return "Ready";
          }

          return progress + '%';
        ]]]

- type: history-graph
  entities:
    - entity: input_text.dishwasher_status
  logarithmic_scale: false
  show_names: false
  card_mod:
    style: |
      {% if is_state('input_text.dishwasher_status', 'Clean') %}
        ha-card {
          border-radius: 30px;
          border-width: 1px;
        }
        ha-state-icon {
          color: rgba(142, 202, 230, 1);
        }
        ha-state-icon {
          --card-mod-icon: mdi:dishwasher
        }
      {% else %}
        ha-card {
          border-radius: 30px;
          border-width: 1px;
        }
        ha-state-icon {
          color: rgba(251, 133, 0, 1);
        }
        ha-state-icon {
          --card-mod-icon: mdi:dishwasher-alert
        }
      {% endif %}