entity: sensor.energia_gasta_dia
layout: icon_state_name2nd
show_name: false
show_state: false
show_icon: false
custom_fields:
  icone: |
    [[[
      return `<ha-icon
        icon="mdi:currency-usd"
        style="width: 60px; height: 60px;">
        </ha-icon><br><b>Energia Gasta</b></span>`
    ]]]
  hoje: |
    [[[
      return `<ha-icon
        icon="mdi:cash-usd"
        style="width: 18px; height: 18px; color: #7CB342;">
        </ha-icon><span> R$ <b>${entity.state}</b> hoje</span>`
    ]]]
  ontem: |
    [[[
      return `<ha-icon
        icon="mdi:cash-usd"
        style="width: 18px; height: 18px; color: #7CB342;">
        </ha-icon><span> R$ <span style="color: var(--text-color-sensor);">
        <b>${states['sensor.energia_gasta_ontem'].state}</b> ontem</span></span>`
    ]]]
  mes: |
    [[[
      return `<ha-icon
        icon="mdi:cash-usd"
        style="width: 18px; height: 18px; color: #7CB342;">
        </ha-icon><span> R$ <span style="color: var(--text-color-sensor);">
        <b>${states['sensor.gasto_mes'].state}</b> no mês</span></span>`
    ]]]
  watts: |
    [[[
      return `<span style="line-height: 14px"><ha-icon
        icon="mdi:power-plug"
        style="width: 56px; height: 56px; color: var(--secondary-text-color);">
        </ha-icon><br><span style="font-size: 28px; color: var(--text-color-sensor);">
        <b>${states['sensor.watts'].state}</b></span>W</span>`
    ]]]
  tensao: |
    [[[
      return `<span style=" color: var(--text-color-sensor);">
         ${states['sensor.voltagem'].state}</span>v`
    ]]]
styles:
  card:
    - padding: 11%
    - font-size: 15px
  custom_fields:
    icone:
      - position: absolute
      - left: 5%
      - top: 5%
    hoje:
      - position: absolute
      - left: 30%
      - top: 10%
    ontem:
      - position: absolute
      - left: 30%
      - top: 40%
    mes:
      - position: absolute
      - left: 30%
      - top: 70%
    watts:
      - position: absolute
      - left: 74%
      - top: 3%
    tensao:
      - position: absolute
      - left: 78%
      - top: 24%
      - border-radius: 10%
      - position: absolute
      - font-size: 11px
type: 'custom:button-card'