Dishwasher Card

type: custom:button-card
entity: switch.vaatwasser_power
name: Vaatwasser
show_label: true
double_tap_action: toggle
variables:
  progress: |
    [[[
      return states['sensor.vaatwasser_program_progress'].state
    ]]]
icon: mdi:dishwasher
state:
  - value: 'off'
    label: Uitgeschakeld
    icon: mdi:dishwasher-off
    styles:
      card:
        - background: var(--contrast2)
        - filter: opacity(75%)
      grid:
        - grid-template-areas: '"i" "n" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 50px min-content 1fr
      name:
        - color: var(--contrast15)
      icon:
        - color: var(--contrast15)
        - animation: none
      label:
        - justify-self: start
        - align-self: start
        - font-size: 14px
        - font-weight: bold
        - padding: 2px 0
      custom_fields:
        status:
          - display: none
        time:
          - display: none
        progress:
          - display: none
styles:
  card:
    - padding: 20px
    - height: 140px
    - background: linear-gradient(115deg, var(--green-tint) 0%, var(--green) 100%)
  grid:
    - grid-template-areas: '"i i" "n n" "status time" "progress progress"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: min-content 1fr min-content 12px
  name:
    - justify-self: start
    - align-self: end
    - font-size: 14px
    - font-family: Inter
    - color: var(--contrast20)
  icon:
    - width: 34px
    - color: var(--contrast20)
    - animation:
        - bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite
  img_cell:
    - justify-self: start
    - align-self: start
    - width: 34px
    - height: 34px
  custom_fields:
    status:
      - justify-self: start
      - align-self: end
      - padding-bottom: 6px
      - font-family: Inter
      - font-size: 14px
      - font-weight: bold
      - color: var(--contrast20)
    time:
      - justify-self: end
      - align-self: end
      - padding-bottom: 6px
      - font-size: 14px
      - font-family: Inter
      - color: var(--contrast20)
    progress:
      - justify-self: start
      - margin-top: '-4px'
      - width: 100%
      - border-radius: 6px
      - background: var(--contrast2)
      - height: 12px
custom_fields:
  status: |
    [[[
      return states['sensor.vaatwasser_operation_state'].state  ]]]
  progress: >
    [[[ return `<div><div style="background: var(--green); height: 12px; width:
    ${variables.progress}% "></div></div>` ]]]
  time: |
    [[[
      var time = new Date(states['sensor.vaatwasser_remaining_program_time'].state);
      return time.toLocaleTimeString() ]]]
card_mod:
  style: |
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
      40% { transform: translateY(-1.2px) rotate(5deg); }
      60% { transform: translateY(-1.1px) rotate(-4deg); }
    }
    @keyframes wash {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
    }