type: custom:button-card
entity: sensor.geschirrspuler_aktuelle_leistung
name: Geschirrspüler
icon: |
  [[[
    if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'starting') {
      return 'mdi:dots-circle';
    } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'washing') {
      return 'mdi:circle-half-full';
    } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'finishing') {
      return 'mdi:dots-circle';
    } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'end') {
      return 'mdi:dishwasher';
    }
  ]]]
show_name: true
show_icon: true
show_label: true
show_state: false
hold_action:
  action: more-info
label: |
  [[[
    if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'starting') {
      return 'starten';
    } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'washing') {
      return 'wäscht';
    } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'finishing') {
      return 'wird beendet';
    } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'end') {
      return 'Ende';
    }
  ]]]
custom_fields:
  bar: |
    [[[
      var color = "green";
      var state = 100 - states['sensor.geschirrspuler_fortschritt'].attributes.remaining_perc;
      if (state < 10) color = "red";
      else if (state < 50) color = "yellow";
      else if (state < 70) color = "orange";
      return `
      <div>
      <div style="background:${color}; height: 12px; width:${state}%">
      </div>
      </div>`
    ]]]
  rem:
    card:
      type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.geschirrspuler_lauft
          state: "on"
      card:
        type: custom:button-card
        entity: sensor.geschirrspuler_fortschritt
        name: |
          [[[
           var remainingTime = states['sensor.geschirrspuler_fortschritt'].attributes.remaining;
           return `Restlaufzeit: ${remainingTime}`;
          ]]]
        show_icon: false
        styles:
          card:
            - width: min
            - background: none
            - overflow: visible
          name:
            - font-size: 14px
            - color: |
                [[[
                  if (entity.state == 'on') {
                    return 'var(--black)';
                  } else {
                    return 'var(--primary-background-color)';
                  }
                ]]]
            - font-weight: 500
  start:
    card:
      type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.geschirrspuler_lauft
          state: "on"
      card:
        type: custom:button-card
        entity: sensor.geschirrspuler_fortschritt
        name: |
          [[[
           var endTime = states['sensor.geschirrspuler_fortschritt'].attributes.triggered;
           // Extract time from the end time
           var time = new Date(endTime).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: false});
           return `${time} Uhr`;
           ]]]
        show_icon: false
        styles:
          card:
            - width: min
            - padding: 5px
            - background: none
          name:
            - font-size: 12px
            - color: |
                [[[
                  if (entity.state == 'on') {
                    return 'var(--black)';
                  } else {
                    return 'var(--primary-background-color)';
                  }
                ]]]
  end:
    card:
      type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.geschirrspuler_lauft
          state: "on"
      card:
        type: custom:button-card
        entity: sensor.geschirrspuler_fortschritt
        name: |
          [[[
           var endTime = states['sensor.geschirrspuler_fortschritt'].attributes.end_time;
           // Extract time from the end time
           var time = new Date(endTime).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: false});
           return `${time} Uhr`;
           ]]]
        show_icon: false
        styles:
          card:
            - width: min
            - padding: 5px
            - background: none
          name:
            - font-size: 12px
            - color: |
                [[[
                  if (entity.state == 'on') {
                    return 'var(--black)';
                  } else {
                    return 'var(--primary-background-color)';
                  }
                ]]]
  icon1: |
    [[[
      return '<ha-icon icon="mdi:dishwasher"></ha-icon>';
    ]]]
  icon2: |
    [[[
      if (entity.state == "on"){
        return '<ha-icon icon="mdi:toggle-switch-outline"></ha-icon>';
      } else {
        return '<ha-icon icon="mdi:toggle-switch-off-outline"></ha-icon>';
      }
    ]]]
styles:
  grid:
    - grid-template-areas: "\". icon1\" \"l l\" \"n icon2\" \"rem icon2\" \"bar bar\" \"start end\""
    - grid-template-rows: 24px 1fr 24px min-content min-content min-content
    - grid-template-columns: 60% 40%
  card:
    - height: 100%
    - padding: 1rem
    - background: |
        [[[
          if (entity.state == 'on') {
            return 'var(--green)';
          } else {
            return 'var(--primary-text-color)';
          }
        ]]]
  img_cell:
    - position: absolute
    - top: 20%
    - left: 40%
    - overflow: visible
  icon:
    - position: absolute
    - width: 20em
    - opacity: 20%
    - color: |
        [[[
          if (entity.state == 'on') {
            return 'var(--black)';
          } else {
            return 'var(--primary-background-color)';
          }
        ]]]
    - transform: rotate(-20deg)
    - animation: |
        [[[
          if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'end') {
            return 'null';
          } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'starting') {
            return 'blink 1.5s linear infinite';
          } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'washing') {
            return 'rotating 2s linear infinite';
          } else if (states['sensor.geschirrspuler_zustand'].attributes.cycle == 'finishing') {
            return 'blink 1.5s linear infinite';
          }
        ]]] 
  label:
    - text-align: left
    - font-size: 14px
    - font-weight: 500
    - justify-self: start
    - align-self: end
    - overflow: visible
    - color: |
        [[[
          if (entity.state == 'on') {
            return 'var(--black)';
          } else {
            return 'var(--primary-background-color)';
          }
        ]]]
  name:
    - text-align: left
    - font-size: 12px
    - opacity: 0.7
    - justify-self: start
    - align-self: center
    - overflow: visible
    - color: |
        [[[
          if (entity.state == 'on') {
            return 'var(--black)';
          } else {
            return 'var(--primary-background-color)';
          }
        ]]]
  custom_fields:
    bar:
      - justify-self: start
      - width: 100%
      - height: |
          [[[
            if (entity.state == 'off') {
              return '0px';
            } else {
              return '12px';
            }
          ]]]
      - background: "#cccccc"
      - border-radius: 24px
    end:
      - justify-self: end
    start:
      - justify-self: start
    rem:
      - justify-self: start
      - align-self: end
      - height: |
          [[[
            if (entity.state == 'off') {
              return '0px';
            } else {
              return '27px';
            }
          ]]]
    icon1:
      - justify-self: end
      - width: 24px
      - color: |
          [[[
           if (entity.state == 'on') {
             return 'var(--black)';
           } else {
             return 'var(--primary-background-color)';
           }
          ]]]
    icon2:
      - justify-self: end
      - align-self: end
      - width: 24px
      - color: |
          [[[
           if (entity.state == 'on') {
             return 'var(--black)';
           } else {
             return 'var(--primary-background-color)';
           }
          ]]]
  hold_action:
    action: more-info