- type: picture-elements
  image: blank.png
  elements:
    - type: image
      entity: camera.swimming_pool
      camera_image: camera.swimming_pool
      tap_action: more-info
      style:
        top: 0
        right: 0
        transform: initial
        color: white
        line-height: 32px
        padding: 0px
        margin: 0 0 0 0
    - type: state-label
      prefix: "Pool Controller: "
      entity: sensor.pool_controller_status
      style:
        left: 0
        bottom: 0
        pointer-events: none
        font-size: 16px
        line-height: 32px
        color: white
        background-color: rgba(0, 0, 0, 0.3)
        width: 100%
        transform: initial
        padding: 0 8px
    - type: state-icon
      entity: switch.iaqualink
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: scale(0.8)
        color: rgba(255,255,255,1)
        line-height: 32px
        margin: 0 8px 5px 0
        # Change color of state-icon off
        --paper-item-icon-color: rgb(255,255,255)
    - type: custom:state-attribute-element
      entity: switch.iaqualink
      attribute: pool_temp
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: initial
        font-size: 12px
        color: rgba(255,255,255,1)
        text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 2px
        line-height: 32px
        margin: 105px 40px
    - type: icon
      icon: mdi:thermometer
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: scale(0.8)
        color: rgba(255,255,255,1)
        line-height: 32px
        margin: 107px 13px
    - type: custom:state-attribute-element
      entity: switch.pool_controller
      attribute: current_power_w
      suffix: "W"
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: initial
        font-size: 12px
        color: rgba(255,255,255,1)
        text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 2px
        line-height: 32px
        margin: 50px 40px
    - type: icon
      icon: mdi:flash
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: scale(0.8)
        color: rgba(255,255,255,1)
        line-height: 32px
        margin: 50px 13px
    - type: state-label
      entity: sensor.iaqualink_runtime_today_formatted
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: initial
        font-size: 12px
        color: rgba(255,255,255,1)
        text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 2px
        line-height: 32px
        margin: 70px 31px
    - type: icon
      icon: mdi:timer
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: scale(0.8)
        color: rgba(255,255,255,1)
        line-height: 32px
        margin: 79px 13px
    - type: state-label
      entity: sensor.iaqualink_chlorination_today_formatted
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: initial
        font-size: 12px
        color: rgba(255,255,255,1)
        text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 2px
        line-height: 32px
        margin: 123px 31px
    - type: icon
      icon: mdi:flask
      style:
        bottom: 0
        right: 0
        pointer-events: none
        transform: scale(0.8)
        color: rgba(255,255,255,1)
        line-height: 32px
        margin: 133px 13px