HaCasa Weather Card

hc_weather_card:
  variables:
    card_background: var(--weather-card-color)
    card_text_color: var(--weather-card-text-color)
    name_entity: ""
    label_entity: ""
    secondary_info: ""
  show_label: true
  show_icon: true
  icon: >-
    [[[
      if (!entity || !entity.state) return 'fas:question';
      const weather = entity.state.toLowerCase();
      const iconMap = {
        'sunny': 'fapro:sun-solid',
        'clear': 'fapro:sun-regular',
        'partlycloudy': 'fapro:cloud-sun-solid',
        'cloudy': 'fapro:cloud-solid',
        'fog': 'fapro:smog-solid',
        'rainy': 'fapro:cloud-rain-solid',
        'pouring': 'fapro:cloud-showers-heavy-solid',
        'lightning': 'fapro:cloud-bolt-solid',
        'lightning-rainy': 'fapro:cloud-bolt-solid',
        'windy': 'fapro:wind-solid',
        'snowy': 'fapro:snowflake-solid',
        'snowy-rainy': 'fapro:snowflake-solid',
        'hail': 'fapro:cloud-meatball-solid',
      };
      return iconMap[weather] || 'fapro:cloud-solid';
    ]]]
  name: "[[[ return variables.name_entity && states[variables.name_entity] ? states[variables.name_entity].state + '˚C' : '' ]]]"
  label: "[[[ return variables.label_entity && states[variables.label_entity] ? 'Feels like ' + states[variables.label_entity].state + '˚C' : '' ]]]"
  styles:
    grid:
      - grid-template-areas: |
          "n i"
          "l i"
          "weather weather"
      - grid-template-columns: 1fr min-content
      - grid-template-rows: min-content min-content min-content
    card:
      - background: var(--weather-card-color)
      - padding: 25px
    name:
      - color: var(--weather-card-text-color)
      - justify-self: start
      - align-self: end
      - font-family: montserrat
      - font-weight: 700
      - font-size: 2rem
      - z-index: 1
    label:
      - color: var(--weather-card-text-color)
      - justify-self: start
      - align-self: start
      - z-index: 1
      - font-family: montserrat
      - font-size: 1rem
    icon:
      - width: 80px
      - color: var(--color-white)
  custom_fields:
    weather:
      card:
        type: custom:button-card
        show_label: true
        entity: "[[[ return entity ? entity.entity_id : '' ]]]"
        show_name: true
        show_icon: false
        show_state: false
        name: >-
          [[[
            if (!states['sensor.home_condition_day_0']) return '';
            return states['sensor.home_condition_day_0'].state;
          ]]]
        label: "[[[ return variables.secondary_info ]]]"
        styles:
          grid:
            - grid-template-areas: |
                "n"
                "l"
            - grid-template-rows: auto auto
            - grid-template-columns: 1fr
          card:
            - background: none
            - box-shadow: none
            - border-radius: none
            - overflow: visible
          name:
            - justify-self: start
            - overflow: visible
            - font-family: montserrat
            - opacity: 0.8
            - font-size: 1rem
            - color: var(--weather-card-text-color)
            - text-align: left
            - white-space: normal
            - word-wrap: normal
            - overflow-wrap: break-word
          label:
            - justify-self: start
            - font-size: 1rem
            - font-family: montserrat
            - opacity: 0.8
            - color: var(--weather-card-text-color)