Custom Tesla Powerwall Card - MKANET

type: custom:stack-in-card
mode: vertical
cards:
  - type: markdown
    content: >
      ## Tesla Powerwall{% if is_state('binary_sensor.grid_status', 'off')
      %}<small><font color="red">&nbsp;&nbsp;⚠️&nbsp;Power Outage:
      &nbsp;&nbsp;~{{ states('sensor.estimated_battery_life_hours_remaining') }}
      battery hours remaining</font></small>{% endif %}
    card_mod:
      style: |
        ha-card {
          margin: 0;
          padding-left: 10px;
          padding-right: 10px;
          background: var(--card-background-color);
          box-shadow: none;
          border: none;
        }
        ha-markdown {
          font-size: 10px;
          color: var(--primary-text-color);
          margin-bottom: -8px;
        }
  - type: custom:power-flow-card-plus
    entities:
      grid:
        name: PG&E
        entity: sensor.powerwall_site_now_mod
        secondary_info:
          entity: sensor.pge_electric_cost_to_date
          unit_of_measurement: $
          unit_white_space: false
          color_value: true
        display_state: one_way
        color_circle: true
        color_icon: true
        color_value: true
        power_outage:
          entity: binary_sensor.grid_status
          state_alert: 'off'
      solar:
        entity: sensor.powerwall_solar_now
        display_zero_tolerance: 30
        icon: mdi:solar-panel-large
        secondary_info:
          entity: sensor.openweathermap_forecast_cloud_coverage
          unit_of_measurement: '%'
          unit_white_space: false
          color_value: true
        color_icon: true
        color_value: true
      battery:
        entity: sensor.powerwall_battery_now
        state_of_charge: sensor.powerwall_charge_actual
        state_of_charge_unit: '%'
        state_of_charge_unit_white_space: false
        display_state: one_way
        color_state_of_charge_value: true
        color_icon: true
        color_circle: true
      home:
        entity: sensor.powerwall_load_now
        color_icon: true
        color_value: true
    watt_threshold: 999
    calculate_flow_rate: true
    w_decimals: 1
    kw_decimals: 1
    min_flow_rate: 2.2
    max_flow_rate: 6
    display_zero_lines:
      mode: hide
    clickable_entities: true
    use_new_flow_rate_model: true
    max_expected_power: 5000
    card_mod:
      style: |
        @keyframes blink {
          0% { opacity: 1; }
          50% { opacity: 0; }
          100% { opacity: 1; }
        }
        ha-card {
          zoom: 1.2 !important;
          box-shadow: none !important;
          border: none !important;
          padding-left: 10px;
          padding-right: 10px;
        }
        .circle-container .grid.power-outage {
          color: #FF403D !important;
          animation: blink 2.475s linear infinite;
        }
        .label {
          font-weight: 700 !important;
        }
        .circle ha-icon {
          --mdc-icon-size: 36px;
        }
  - type: markdown
    content: ⠀
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          border: none;
          margin-bottom: -48px;
        }
  - type: custom:bar-card
    height: 31px
    direction: right
    positions:
      icon: 'off'
      indicator: 'off'
      title: 'off'
    severity:
      - hide: false
        from: '0'
        to: '19'
        color: '#C41400'
      - from: '20'
        to: '49'
        color: '#EA9000'
      - from: '50'
        to: '100'
        color: '#007A00'
    card_mod:
      style: |
        ha-card {
          border: none;
          padding-left: 14px;
          padding-right: 14px;
          background: var(--card-background-color);
          box-shadow: none;
        }
    entities:
      - entity: sensor.powerwall_charge_actual
        name: Powerwall Charge
  - type: custom:button-card
    entity: binary_sensor.powerwall_charging
    show_name: false
    show_icon: false
    show_label: true
    label: |-
      [[[
        var charge = states['sensor.powerwall_charge_actual'].state;
        var batteryStatus = parseFloat(states['sensor.apf_battery_entity'].state);
        var state = states['binary_sensor.powerwall_charging'].state;
        var icon = '';
        if (charge <= 19) icon = 'mdi:battery-charging-10';
        else if (charge <= 49) icon = 'mdi:battery-charging-30';
        else if (charge <= 100) icon = 'mdi:battery-charging-90';
        var label = (state == 'off') ? 'Standby' : 'Charging';
        if (batteryStatus < 0) label = 'Discharging';
        var textAnimationStyle = '';
        if (state == 'on') {
          textAnimationStyle = 'animation: blink 2.475s linear infinite;';
        }
        var iconHtml = '';
        if (state == 'on') {
          iconHtml = `<ha-icon icon='${icon}' style='color: #FFCC00; width: 20px; height: 20px;'></ha-icon>`;
        }
        return `<div style='text-align: center; display: inline-block; width: 100%; padding-bottom: 11px;'>
              ${iconHtml}
              <span style='margin-left: 6px; position: relative; top: 1.5px; font-size: 14px; font-weight: 700; color: #bbb; ${textAnimationStyle}'>${label}</span>
            </div>`;
      ]]]
    styles:
      card:
        - background-color: linear-gradient(rgba(105, 105, 105, 0.1), rgba(34, 34, 34, 0.95))
        - margin-top: '-9px'
        - border-top: none
        - border-top-left-radius: 0px
        - border-top-right-radius: 0px
        - box-shadow: none
      label:
        - justify-self: center
        - align-self: center
        - width: 100%
        - font-size: 14px
        - font-weight: 600
        - margin-top: '-8px'
    card_mod:
      style: |
        ha-card {
          border: none;
          background: var(--card-background-color);
          box-shadow: none;
          margin-bottom: 0px !important;
        }
  - type: custom:button-card
    entity: sensor.estimated_battery_life_hours_remaining
    tap_action:
      action: more-info
    layout: icon-label
    size: 20%
    color_type: card
    show_name: true
    show_state: true
    show_icon: false
    show_units: true
    card_mod:
      style: |
        ha-card {
          height: auto;
          padding-bottom: 25px !important;
          padding-left: 7px !important;
          background: transparent !important;
          box-shadow: none;
          border-top: none;
          margin: 0;
        }
    styles:
      grid:
        - grid-template-areas: '"n s"'
        - grid-template-columns: max-content min-content
        - grid-template-rows: 1fr
      name:
        - font-size: 14px
        - font-weight: 400
        - justify-self: start
        - padding-left: 22px
        - margin-right: 10px
        - white-space: nowrap
        - color: '#838383'
      state:
        - font-size: 14px
        - font-weight: 400
        - justify-self: start
        - padding-left: 0
        - color: '#B7A064'
        - margin-top: 1.8px
    name: 'Estimated outage battery runtime:'
    state_display: >
      [[[ return states['sensor.outage_battery_runtime_estimate'].state +
      '&nbsp; (' + states['sensor.estimated_battery_life_hours_remaining'].state
      + ' hours)' ]]]