Living Room Lovelace Card

- type: custom:button-card
  icon: mdi:sofa
  aspect_ratio: 1/1
  show_name: false
  size: 80%
  styles:
    grid:
      - grid-template-areas: '"i i r1" "i i r2" "b1 b2 br"' #Set up the areas of the card (first 2 columns of the top 2 rows are the icon then 2 icons on the right, and 3 along the bottom.
      - grid-template-rows: 1fr 1fr 1fr
      - grid-template-columns: 1fr 1fr 1fr
    card:
      - max-width: 180px
      - max-height: 180px
      - padding-bottom: 0
      - padding-top: 0
  custom_fields:
    r1: #Icon at the top on the right
      card:
        type: custom:button-card
        show_name: false
        size: 100%
        style: |
          ha-card {
            box-shadow: none;
          }
        entity: input_select.p1_location
        icon: mdi:face
        state:
          - value: "Living Room" #Only show icon if P1 is in the Living Room
            color: "var(--accent-color)"
          - operator: default
            color: "rgba(0, 0, 0, 0)"
    r2: #Icon in the middle on the right
      card:
        type: custom:button-card
        show_name: false
        size: 100%
        style: |
          ha-card {
            box-shadow: none;
          }
        entity: input_select.p2_location
        icon: mdi:face-woman
        state:
          - value: "Living Room"
            color: "var(--accent-color)"
          - operator: default
            color: "rgba(0, 0, 0, 0)"
    b1: #Icon on the bottom left
      card:
        type: custom:button-card
        show_name: false
        size: 100%
        style: |
          ha-card {
            box-shadow: none;
          }
        entity: input_boolean.living_room_string_lights
        icon: mdi:string-lights
    b2: #Icon on the bottom middle
      card:
        type: custom:button-card
        show_name: false
        size: 100%
        style: |
          ha-card {
            box-shadow: none;
          }
        color_type: blank-card
    br: #Bottom right icon
      card:
        type: custom:button-card
        show_name: false
        size: 100%
        style: |
          ha-card {
            box-shadow: none;
          }
        entity: binary_sensor.living_room_motion
        icon: mdi:walk