type: picture-elements
#background image
image: /local/bg500x225.png
elements:
  - type: custom:mushroom-template-card
    primary: Driveway
    entity: light.driveway
    tap_action:
      action: toggle
    style:
      left: 14%
      top: 88%
  - type: custom:mushroom-template-card
    primary: Porch
    entity: light.front_porch_overhead
    tap_action:
      action: toggle
    style:
      left: 38%
      top: 88%
  - type: custom:mushroom-template-card
    primary: "{{ states('group.front_yard_plants') }}"
    entity: group.front_yard_plants
    tap_action:
      action: navigate
      navigation_path: /phone-yaml/plants
    style:
      left: 86%
      top: 88%
      text-transform: capitalize

  - type: state-label
    entity: sensor.front_yard_thermostat_temperature
    style:
      left: 15%
      top: 35%
      font-size: 180%
  - type: state-label
    entity: sensor.front_yard_thermostat_humidity
    style:
      left: 85%
      top: 35%
      font-size: 180%
      text-align: right

  #Card title
  - type: custom:mushroom-title-card
    title: "Front Yard"
    style:
      font-size: 130%
      left: -2%
      top: -10%
      transform: initial
  #top left icon spot
  - type: state-icon
    entity: binary_sensor.front_yard_occupied
    style:
      left: 60%
      top: 9%
  # - type: state-icon
  #   entity: group.front_yard_motion
  #   style:
  #     left: 60%
  #     top: 9%
  - type: state-icon
    entity: binary_sensor.frigate_cam18_vehicle_occupancy
    style:
      left: 68%
      top: 9%
  #top icon spot #1
  - type: state-icon
    entity: binary_sensor.front_porch_person_occupancy
    style:
      left: 76%
      top: 9%
    tap_action:
      action: more-info
  - type: state-icon
    entity: binary_sensor.front_door_contact
    style:
      left: 84%
      top: 9%
  #top icon spot #4
  - type: state-icon
    entity: input_boolean.front_yard_occupied
    style:
      left: 92%
      top: 9%
    tap_action:
      action: toggle
    hold_action:
      action: more-info

  - type: "custom:button-card"
    color: auto
    entity: light.driveway
    show_name: false
    show_entity_picture: true
    style:
      left: 14%
      top: 65%
    styles:
      card:
        - border-radius: 50px
        - width: 50px
        - height: 50px
      icon:
        - width: 30px
        - height: 30px
    tap_action:
      action: toggle
    hold_action:
      action: more-info

  - type: "custom:button-card"
    color: auto
    entity: light.front_porch_overhead
    show_name: false
    show_entity_picture: true
    style:
      left: 38%
      top: 65%
    styles:
      card:
        - border-radius: 50px
        - width: 50px
        - height: 50px
      icon:
        - width: 30px
        - height: 30px
    tap_action:
      action: toggle
    hold_action:
      action: more-info

  #button #1 label

  #button #2
  - type: "custom:button-card"
    color: auto
    entity: camera.frigate_cam18
    show_name: false
    show_entity_picture: true
    style:
      left: 62%
      top: 65%
    styles:
      card:
        #- border-radius: 50px
        - width: 50px
        - height: 50px
      icon:
        - width: 45px
        - height: 45px
    tap_action:
      action: navigate
      navigation_path: /ai-yml/ai-cam18

  - type: state-icon
    entity: group.front_yard_plants
    style:
      left: 86%
      top:
        65%
        #- width: 50px
        #- height: 50px
    tap_action:
      action: navigate
      navigation_path: /phone-yaml/plants
# 12,31,50,69,88
# 14,38,62,86
# 25,50,75
# 33,66
# 50