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: start
        - font-size: 16px
        - font-weight: 500
        - padding: 2px 0
      custom_fields:
        program:
          - display: none
        bar:
          - display: none
        stat1:
          - display: none
        stat2:
          - display: none
        stat3:
          - 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
      custom_fields:
        state:
          - color: black
styles:
  card:
    - padding: 20px
    - height: 180px
  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:
    program:
      - justify-self: end
      - align-self: end
      - padding-bottom: 6px
      - font-size: 16px
      - font-weight: 500
    stat1:
      - justify-self: start
      - font-size: 10px
      - font-weight: 500
      - padding-top: 15px
    stat2:
      - justify-self: end
      - font-weight: 500
      - font-size: 16px
      - padding-bottom: 15px
    stat3:
      - justify-self: end
      - font-size: 10px
      - opacity: 0.7
      - padding-top: 15px
    bar:
      - justify-self: start
      - margin-top: '-4px'
      - width: 100%
      - border-radius: 6px
      - background: cccccc
      - height: 12px
custom_fields:
  program: |
    [[[ 
      return entity.attributes.geschirrspuler_operation_state 
    ]]]   
  bar: |
    [[[
      var color = "blue";
      var state = entity.state;

      return `
      <div>
      <div style="background:${'#050C9C'}; height: 12px; width:${state}%">
      </div>
      </div>
      `
      ]]]
  stat1: '0:00:00'
  stat2: |
    [[[
      return states['sensor.geschirrspuler_remaining_program_time'].state;    
    ]]]
  stat3: |
    [[[
      return states['sensor.geschirrspuler_duration'].state;    
    ]]]