Untitled

type: custom:button-card
entity: switch.geschirrspuler_power
icon: mdi:dishwasher
name: Dishwasher
show_label: true
state:
  - value: 'off'
    icon: mdi:dishwasher-off
    label: Turned off
    styles:
      card:
        - background: black;
      grid:
        - grid-template-areas: '"i" "n" "i"'
        - grid-template-column: 1fr
        - grid-template-tows: 70px min-content 1fr
      label:
        - justify-self: center
        - font-size: 16px
        - font-weight: 500
        - padding: 2px
        - margin-top: '-170px'
      custom_fields:
        bar:
          - display: none
  - value: 'on'
    icon: mdi:dishwasher-alert
    styles:
      card:
        - background: >-
            linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(244,12,12,1) 75%,
            rgba(252,176,69,1) 100%);
      icon:
        - color: black
      name:
        - color: black
        - display: none
      custom_fields:
        state:
          - color: black
        name:
          - display: none
styles:
  card:
    - padding: 20px
    - height: 70px
  grid:
    - grid-template-areas: '"i program" "n stat2" "bar bar" "stat1 stat3"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 70px min-content 1fr min-content
  name:
    - justify-self: start
    - font-size: 14px
    - padding-bottom: 15px
    - opacity: 0.7
  icon:
    - width: 34px
    - color: null
  img_cell:
    - justify-self: start
    - align-self: start
    - width: 34px
    - height: 34px
  custom_fields:
    bar:
      - justify-self: right
      - margin-top: '-110px'
      - width: 85%
      - border-radius: 6px
      - background: grey
      - height: 22px
custom_fields:
  bar: |
    [[[
      var state = states['sensor.geschirrspuler_program_progress'].state;
      var invertedState = 100 - state;
      return `
      <div style="background:#050C9C; height: 60px; width:${state}%; text-align: center; color: white;">
        ${state}%
      </div>
      `;
    ]]]