HaCasa Vacuum Card

hc_vacuum_card:
  variables:
    icon: mdi:robot-vacuum
    action_1:
      icon: mdi:vacuum
      on_action: vacuum.send_command
    action_2:
      icon: mdi:water-plus
      on_action: vacuum.send_command
    action_3:
      icon: fapro:kitchen-set
      on_action: vacuum.send_command
  show_label: true
  label: |
    [[[
      const state = states[entity.entity_id].state;
      return state.charAt(0).toUpperCase() + state.slice(1);
    ]]]
  name: |
    [[[ return 'Battery: ' + states[entity.entity_id].attributes.battery_level + '%' ]]]
  show_icon: true
  icon: "[[[ return variables.icon ]]]"
  styles:
    grid:
      - grid-template-areas: |
          'i room_buttons buttons'
          'i room_buttons buttons'
          'i room_buttons buttons'
      - grid-template-columns: 1fr auto auto
      - grid-template-rows: min-content min-content min-content
    card:
      - overflow: hidden
      - padding: 20px
      - pointer-events: none
    name:
      - grid-area: i
      - justify-self: start
      - align-self: start
      - opacity: 0.8
      - font-size: 12px
      - font-family: montserrat
      - font-weight: 400
      - z-index: 2
    label:
      - grid-area: i
      - padding-top: 12px
      - justify-self: start
      - align-self: start
      - font-weight: 700
      - font-family: montserrat
      - z-index: 2
      - padding-top: 20px
    img_cell:
      - position: absolute
      - top: 40%
      - right: 40%
      - overflow: visible
    icon:
      - position: absolute
      - overflow: visible
    custom_fields:
  tap_action: none
  custom_fields:
    room_buttons:
      card:
        type: custom:button-card
        styles:
          grid:
            - grid-template-areas: |
                'room1'
                'room2'
                'room3'
            - row-gap: 0.3rem
          card:
            - padding: 10px
            - border-radius: 45px
            - background-color: var(--background)
            - z-index: 2
            - height: 165px
            - width: 125px
            - position: absolute
            - right: -65px
            - bottom: -82px
            - pointer-events: none
        custom_fields:
          room1:
            card:
              type: custom:button-card
              icon: "[[[ return variables.action_1.icon ]]]"
              styles:
                icon:
                  - width: 25px
                  - height: 25px
                  - position: relative
                  - right: 30px
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - background: none
                  - box-shadow: none
                  - pointer-events: auto
              tap_action:
                action: call-service
                service: button.press
                target:
                  entity_id: button.q8_max_vacuum_only
          room2:
            card:
              type: custom:button-card
              icon: "[[[ return variables.action_2.icon ]]]"
              styles:
                icon:
                  - width: 25px
                  - height: 25px
                  - position: relative
                  - right: 30px
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - background: none
                  - box-shadow: none
                  - pointer-events: auto
              tap_action:
                action: call-service
                service: button.press
                target:
                  entity_id: button.q8_max_full_cleaning
          room3:
            card:
              type: custom:button-card
              icon: "[[[ return variables.action_3.icon ]]]"
              styles:
                icon:
                  - width: 25px
                  - height: 25px
                  - position: relative
                  - right: 30px
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - background: none
                  - box-shadow: none
                  - pointer-events: auto
              tap_action:
                action: call-service
                service: button.press
                target:
                  entity_id: button.q8_max_after_meals
    buttons:
      card:
        type: custom:button-card
        styles:
          grid:
            - grid-template-areas: |
                'item_1'
                'item_2'
                'item_3'
            - row-gap: 0.3rem
          card:
            - padding: 10px
            - border-radius: 50px
            - background-color: var(--contrast-10)
            - z-index: 3
        custom_fields:
          item_1:
            card:
              type: custom:button-card
              icon: mdi:home
              styles: &icon_style
                icon:
                  - width: 25px
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - background: none
                  - box-shadow: none
                  - pointer-events: auto
              tap_action:
                action: perform-action
                perform_action: vacuum.return_to_base
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'
          item_2:
            card:
              type: custom:button-card
              icon: mdi:pause
              styles: *icon_style
              tap_action:
                action: perform-action
                perform_action: vacuum.pause
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'
          item_3:
            card:
              type: custom:button-card
              icon: mdi:play
              styles: *icon_style
              tap_action:
                action: perform-action
                perform_action: vacuum.start
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'