# fx_medidor: valor de um sensor com barra de progresso (consumo, caixa d'água, bateria, CPU...).
# Cole embaixo de "button_card_templates:", junto com os outros modelos fx_.
# Variáveis (todas opcionais): titulo, icone, cor, max (valor que enche a barra), alerta (% que deixa a barra vermelha),
# unidade (se vazio, usa a do sensor) e decimais.
fx_medidor:
  variables:
    titulo: Medidor
    icone: mdi:gauge
    cor: '#3cc8ff'
    max: 100
    alerta: 80
    unidade: ''
    decimais: 1
  show_icon: false
  show_name: false
  show_state: false
  tap_action:
    action: more-info
  styles:
    card:
      - padding: 12px 16px
      - border-radius: 18px
      - background: linear-gradient(145deg, rgba(14,34,66,0.78), rgba(8,18,40,0.78))
      - border: 1px solid rgba(60,200,255,0.25)
      - box-shadow: 0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06)
      - backdrop-filter: blur(14px)
      - -webkit-backdrop-filter: blur(14px)
      - color: '#eaf4ff'
    grid:
      - grid-template-areas: '"topo" "barra"'
      - grid-template-columns: 1fr
      - row-gap: 10px
    custom_fields:
      topo:
        - justify-self: start
      barra:
        - justify-self: stretch
        - width: 100%
  custom_fields:
    topo: |
      [[[
        if (!entity) return `<div style="color:#ff9a9a;font-size:13px;text-align:left">entidade não encontrada<br><b>${(this._config && this._config.entity) || '(sem entity)'}</b></div>`;
        const v = parseFloat(entity.state);
        const un = variables.unidade || entity.attributes.unit_of_measurement || '';
        const fmt = (n) => n.toLocaleString('pt-BR', {minimumFractionDigits: variables.decimais, maximumFractionDigits: variables.decimais});
        const txt = isNaN(v) ? 'indisponível' : fmt(v) + (un ? ' ' + un : '');
        return `<div style="display:flex;align-items:center;gap:12px;text-align:left">
          <ha-icon icon="${variables.icone}" style="--mdc-icon-size:28px;color:${variables.cor};filter:drop-shadow(0 0 6px ${variables.cor}88)"></ha-icon>
          <div><div style="font-size:14px;opacity:.8">${variables.titulo}</div>
          <div style="font-size:21px;font-weight:700;white-space:nowrap">${txt}</div></div></div>`;
      ]]]
    barra: |
      [[[
        const v = entity ? parseFloat(entity.state) : NaN;
        const p = isNaN(v) ? 0 : Math.max(0, Math.min(100, v / variables.max * 100));
        const cor = p >= variables.alerta ? '#ff5a6e' : variables.cor;
        return `<div style="height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden">
          <div style="width:${p}%;height:100%;border-radius:999px;background:${cor};box-shadow:0 0 10px ${cor}88;transition:width .6s"></div></div>`;
      ]]]

# Exemplo de uso (num painel, depois de colar o modelo acima):
#
# - type: custom:button-card
#   template: fx_medidor
#   entity: sensor.consumo_agora
#   variables:
#     titulo: Consumo agora
#     icone: mdi:flash
#     cor: '#ffc83c'
#     max: 5000
#     alerta: 70
#     decimais: 0