# Created by Leon van der Linden, ported by Robert Wilson, modified by Nate Harris

# This is a fork of Robert Wilson's weather panel for Dwains Dashboard, converted from a blueprint to a standard card.

# This removes all translation and customization capabilities of the original blueprint,
# but aside from a few hard-coded values (look for "TODO" in the code),
# it should be fully functional if you have the required sensors and have not modified their entity IDs.

# Find and replace the following values:
# YOUR_LATITUDE - Your latitude
# YOUR_LONGITUDE - Your longitude

# Dwains Dashboard is required to use this card, as it relies on custom components provided by Dwains Dashboard.

# Follow the instructions in Robert's original README:
# https://github.com/dwainscheeren/dwains-dashboard-blueprints/tree/main/page-blueprints/weather-dashboard-openweathermap

# In addition to the sensors and HACS components required by the original blueprint, you will need the following:
# - Mushroom Chips Card

type: custom:dwains-flexbox-card
items_classes: col-xs-12
cards:
  - type: vertical-stack
    item_classes: col-xs-12 col-sm-4
    cards:
      - type: custom:state-switch
        entity: hash
        default: forecast
        states:
          forecast:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: vertical-stack
                cards:
                  - type: custom:stack-in-card
                    cards:
                      - type: entity
                        name: Active NWS Alerts
                        show_header_toggle: false
                        entity: sensor.nws_alerts
                      - type: conditional
                        conditions:
                          - entity: sensor.nws_alerts
                            state_not: '0'
                        card:
                          type: markdown
                          content: >
                            ---

                            # NWS Active Alert 1
                              {% if state_attr('sensor.nws_alerts', 'title') != None and state_attr('sensor.nws_alerts', 'title').split(' - ')[0] is defined  %}
                            
                            ## {{
                            states.sensor.nws_alerts.attributes.title.split('
                            - ')[0] }}

                              {{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[0] }}

                              {% else %}
                                No active alerts
                              {% endif %}
                      - type: conditional
                        conditions:
                          - entity: sensor.nws_alerts
                            state_not: '0'
                          - entity: sensor.nws_alerts
                            state_not: '1'
                        card:
                          type: markdown
                          content: >
                            ---

                            # NWS Active Alert 2 {% if
                            state_attr('sensor.nws_alerts',
                            'title').split(' - ')[1] is defined %}

                            ## {{
                            states.sensor.nws_alerts.attributes.title.split('
                            - ')[1] }}

                              {{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[1] }}

                            {% else %}
                              No active alerts
                            {% endif %}
                      - type: conditional
                        conditions:
                          - entity: sensor.nws_alerts
                            state_not: '0'
                          - entity: sensor.nws_alerts
                            state_not: '1'
                          - entity: sensor.nws_alerts
                            state_not: '2'
                        card:
                          type: markdown
                          content: >
                            ---

                            # NWS Active Alert 3 {% if
                            state_attr('sensor.nws_alerts',
                            'title').split(' - ')[2] is defined %}

                            ## {{
                            states.sensor.nws_alerts.attributes.title.split('
                            - ')[2] }}

                              {{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[2] }}

                            {% else %}
                              No active alerts
                            {% endif %}
                      - type: conditional
                        conditions:
                          - entity: sensor.nws_alerts
                            state_not: '0'
                          - entity: sensor.nws_alerts
                            state_not: '1'
                          - entity: sensor.nws_alerts
                            state_not: '2'
                          - entity: sensor.nws_alerts
                            state_not: '3'
                        card:
                          type: markdown
                          content: >
                            ---

                            # NWS Active Alert 4 {% if
                            state_attr('sensor.nws_alerts',
                            'title').split(' - ')[3] is defined %}

                            ## {{
                            states.sensor.nws_alerts.attributes.title.split('
                            - ')[3] }}

                              {{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[3] }}

                            {% else %}
                              No active alerts
                            {% endif %}
                      - type: conditional
                        conditions:
                          - entity: sensor.nws_alerts
                            state_not: '0'
                          - entity: sensor.nws_alerts
                            state_not: '1'
                          - entity: sensor.nws_alerts
                            state_not: '2'
                          - entity: sensor.nws_alerts
                            state_not: '3'
                          - entity: sensor.nws_alerts
                            state_not: '4'
                        card:
                          type: markdown
                          content: >
                            ---

                            # NWS Active Alert 5 {% if
                            state_attr('sensor.nws_alerts',
                            'title').split(' - ')[4] is defined %}

                            ## {{
                            states.sensor.nws_alerts.attributes.title.split('
                            - ')[4] }}

                              {{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[4] }}

                            {% else %}
                              No active alerts
                            {% endif %}
                  - type: custom:weather-card
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    # TODO: Change this to your own weather entity (I recommend using the NWS integration)
                    entity: weather.kbjc_hourly
                    current: true
                    details: true
                    forecast: true
                    hourly_forecast: false
                    number_of_forecasts: '5'
                  - type: entities
                    title: Stats
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - entity: sensor.openweathermap_feels_like_temperature
                        name: Feels Like
                      - entity: sensor.openweathermap_wind_speed
                        name: Wind Speed
                      - entity: sensor.openweathermap_humidity
                        name: Humidity
                      - entity: sensor.openweathermap_pressure
                        name: Pressure
                      - entity: sensor.openweathermap_wind_bearing
                        name: Wind Direction
                        icon: mdi:compass
                      - type: custom:fold-entity-row
                        head:
                          type: section
                          label: More Stats
                        entities:
                          - entity: sensor.allergy_index_today
                            name: Allergy Index
                          - entity: sensor.asthma_index_today
                            name: Asthma Index
                          - entity: sensor.current_ozone_level
                  - type: custom:ha-card-weather-conditions
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    uv:
                      protection_window: binary_sensor.protection_window
                      ozone_level: sensor.current_ozone_level
                      uv_index: sensor.current_uv_index
                      uv_level: sensor.current_uv_level
                      max_uv_index: sensor.max_uv_index
                      set_skin_type_1: sensor.skin_type_1_safe_exposure_time
                      set_skin_type_2: sensor.skin_type_2_safe_exposure_time
                      set_skin_type_3: sensor.skin_type_3_safe_exposure_time
                      set_skin_type_4: sensor.skin_type_4_safe_exposure_time
                      set_skin_type_5: sensor.skin_type_5_safe_exposure_time
                      set_skin_type_6: sensor.skin_type_6_safe_exposure_time
          rain:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: vertical-stack
                cards:
                  - type: entities
                    title: Forecast
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - entity: sensor.openweathermap_forecast_precipitation_probability
                        name: Chance of Rain
                      - entity: sensor.openweathermap_forecast_precipitation
                        name: Amount of Rain
                  - type: custom:mini-graph-card
                    title: Last 24 Hours
                    name: Last 24 Hours
                    icon: ios:cloud-rain
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - sensor.openweathermap_rain
                      - sensor.openweathermap_snow
                    line_color: '#299ec2'
                    hours_to_show: 12
                    line_width: 1
                    hour24: true
                    points_per_hour: 2
                    decimals: 0
                    show:
                      animate: true
                      fill: true
                      icon: true
                      labels: false
                      legend: false
                      name: true
                      graph: bar
                      extrema: true
                      average: true
          temperature:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: vertical-stack
                cards:
                  - type: custom:mini-graph-card
                    title: Temperature
                    name: Temperature
                    icon: ios:thermometer
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - sensor.openweathermap_temperature
                    line_color: '#299ec2'
                    font_size: 80
                    hours_to_show: 12
                    line_width: 2
                    hour24: true
                    points_per_hour: 2
                    decimals: 1
                    show:
                      animate: true
                      fill: true
                      icon: true
                      labels: true
                      legend: true
                      name: true
                      graph: line
                      extrema: true
                      average: true
                  - type: custom:mini-graph-card
                    title: Feels Like
                    name: Feels Like
                    icon: ios:thermometer
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - sensor.openweathermap_feels_like_temperature
                    line_color: '#299ec2'
                    font_size: 80
                    hours_to_show: 12
                    line_width: 2
                    hour24: true
                    points_per_hour: 2
                    decimals: 1
                    show:
                      animate: true
                      fill: true
                      icon: true
                      labels: true
                      legend: true
                      name: true
                      graph: line
                      extrema: true
                      average: true
                  - type: custom:ha-card-weather-conditions
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    uv:
                      protection_window: binary_sensor.protection_window
                      ozone_level: sensor.current_ozone_level
                      uv_index: sensor.current_uv_index
                      uv_level: sensor.current_uv_level
                      max_uv_index: sensor.max_uv_index
                      set_skin_type_1: sensor.skin_type_1_safe_exposure_time
                      set_skin_type_2: sensor.skin_type_2_safe_exposure_time
                      set_skin_type_3: sensor.skin_type_3_safe_exposure_time
                      set_skin_type_4: sensor.skin_type_4_safe_exposure_time
                      set_skin_type_5: sensor.skin_type_5_safe_exposure_time
                      set_skin_type_6: sensor.skin_type_6_safe_exposure_time
          stats:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: vertical-stack
                cards:
                  - type: entities
                    title: Stats
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - entity: sensor.season
                        name: Season
                      - entity: sensor.moon_phase
                        name: Moon Phase
                      - entity: sun.sun
                        name: Sun
                      - entity: sensor.openweathermap_humidity
                        name: Humidity
                      - entity: sensor.openweathermap_pressure
                        name: Pressure
                      - entity: sensor.openweathermap_wind_speed
                        name: Wind Speed
                      - entity: sensor.openweathermap_wind_bearing
                        name: Wind Direction
                        icon: mdi:compass
                  - type: entities
                    title: Risks
                    style: |
                      ha-card {
                        border-radius: 10px;
                        padding-bottom: 10px;
                        background-color: var(--dwains-theme-primary)
                      }
                      :host {
                        --paper-item-icon-color: var(--dwains-theme-accent) !important;
                      }
                      .card-header {
                        padding: 5px 16px;
                        font-size: 15px;
                        font-weight: 700 !important;
                      }
                      #states {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                      }
                      .secondary {
                        color: darkgray !important;
                        margin-left: 2px !important;
                      }
                    entities:
                      - entity: sensor.allergy_index_today
                        name: Allergy Index Today
                      - entity: sensor.asthma_index_forecasted_average
                        name: Allergy Index Average
                        type: custom:multiple-entity-row
                        entities:
                          - attribute: rating
                            name: Rating
                          - attribute: trend
                            name: Trend
                      - entity: sensor.current_ozone_level
                        name: Ozone Level Today
                      - entity: sensor.asthma_index_today
                        name: Asthma Index Today
                      - entity: sensor.asthma_index_forecasted_average
                        name: Asthma Index Average
                        type: custom:multiple-entity-row
                        entities:
                          - attribute: rating
                            name: Rating
                          - attribute: trend
                            name: Trend
                      - entity: sensor.cold_flu_index_today
                        name: Cold & Flu Index Today
                      - entity: sensor.cold_flu_forecasted_average
                        name: Cold & Flu Index Average
                        type: custom:multiple-entity-row
                        entities:
                          - attribute: rating
                            name: Rating
                          - attribute: trend
                            name: Trend

  - type: vertical-stack
    item_classes: col-xs-12 col-sm-8
    cards:
      - type: custom:state-switch
        entity: hash
        default: forecast
        states:
          forecast:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: iframe
                style: |
                  ha-card {
                    border-radius: 10px;
                    padding-bottom: 10px;
                    background-color: var(--dwains-theme-primary)
                  }
                    :host {
                      --paper-item-icon-color: var(--dwains-theme-accent) !important;
                  }
                  .card-header {
                    padding: 5px 16px;
                    font-size: 15px;
                    font-weight: 700 !important;
                  }
                  #states {
                    padding-top: 0px !important;
                    padding-bottom: 0px !important;
                  }
                  .secondary {
                    color: darkgray !important;
                    margin-left: 2px !important;
                  }
                aspect_ratio: 80%
                # TODO: Replace the lat, lon, detailLat and detailLon with your own latitudes and longitudes
                url: >-
                  https://embed.windy.com/embed2.html?lat=YOUR_LATITUDE&lon=YOUR_LONGITUDE&detailLat=YOUR_LATITUDE&detailLon=YOUR_LONGITUDE&width=750&height=800&zoom=9&level=surface&overlay=radar&product=radar&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&radarRange=-1
                name: Windy.com
                show_state: false
          rain:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: iframe
                style: |
                  ha-card {
                    border-radius: 10px;
                    padding-bottom: 10px;
                    background-color: var(--dwains-theme-primary)
                  }
                    :host {
                      --paper-item-icon-color: var(--dwains-theme-accent) !important;
                  }
                  .card-header {
                    padding: 5px 16px;
                    font-size: 15px;
                    font-weight: 700 !important;
                  }
                  #states {
                    padding-top: 0px !important;
                    padding-bottom: 0px !important;
                  }
                  .secondary {
                    color: darkgray !important;
                    margin-left: 2px !important;
                  }
                aspect_ratio: 80%
                # TODO: Replace the lat, lon, detailLat and detailLon with your own latitudes and longitudes
                url: >-
                  https://embed.windy.com/embed2.html?lat=YOUR_LATITUDE&lon=YOUR_LONGITUDE&detailLat=YOUR_LATITUDE&detailLon=YOUR_LONGITUDE&width=750&height=800&zoom=9&level=surface&overlay=rain&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&radarRange=-1
                name: Windy.com
                show_state: false
                show_name: false
          temperature:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: iframe
                style: |
                  ha-card {
                    border-radius: 10px;
                    padding-bottom: 10px;
                    background-color: var(--dwains-theme-primary)
                  }
                    :host {
                      --paper-item-icon-color: var(--dwains-theme-accent) !important;
                  }
                  .card-header {
                    padding: 5px 16px;
                    font-size: 15px;
                    font-weight: 700 !important;
                  }
                  #states {
                    padding-top: 0px !important;
                    padding-bottom: 0px !important;
                  }
                  .secondary {
                    color: darkgray !important;
                    margin-left: 2px !important;
                  }
                aspect_ratio: 80%
                # TODO: Replace the lat, lon, detailLat and detailLon with your own latitudes and longitudes
                url: >-
                  https://embed.windy.com/embed2.html?lat=YOUR_LATITUDE&lon=YOUR_LONGITUDE&detailLat=YOUR_LATITUDE&detailLon=YOUR_LONGITUDE&width=750&height=800&zoom=9&level=surface&overlay=temp&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&radarRange=-1
                name: Windy.com
                show_state: false
                show_name: false
          stats:
            type: vertical-stack
            cards:
              - type: custom:dwains-flexbox-card
                padding: true
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        icon: mdi:weather-cloudy-clock
                        content: Forecast
                        tap_action:
                          action: navigate
                          navigation_path: '#forecast'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:thermometer
                        content: Temperature
                        tap_action:
                          action: navigate
                          navigation_path: '#temperature'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:weather-pouring
                        content: Rain
                        tap_action:
                          action: navigate
                          navigation_path: '#rain'
                        hold_action:
                          action: none
                      - type: template
                        icon: mdi:format-list-numbered
                        content: Stats
                        tap_action:
                          action: navigate
                          navigation_path: '#stats'
                        hold_action:
                          action: none
              - type: iframe
                style: |
                  ha-card {
                    border-radius: 10px;
                    padding-bottom: 10px;
                    background-color: var(--dwains-theme-primary)
                  }
                    :host {
                      --paper-item-icon-color: var(--dwains-theme-accent) !important;
                  }
                  .card-header {
                    padding: 5px 16px;
                    font-size: 15px;
                    font-weight: 700 !important;
                  }
                  #states {
                    padding-top: 0px !important;
                    padding-bottom: 0px !important;
                  }
                  .secondary {
                    color: darkgray !important;
                    margin-left: 2px !important;
                  }
                aspect_ratio: 80%
                # TODO: Replace the lat, lon, detailLat and detailLon with your own latitudes and longitudes
                url: >-
                  https://embed.windy.com/embed2.html?lat=YOUR_LATITUDE&lon=YOUR_LONGITUDE&detailLat=YOUR_LATITUDE&detailLon=YOUR_LONGITUDE&width=750&height=800&zoom=9&level=surface&overlay=pressure&product=ecmwf&menu=&message=true&marker=true&calendar=now&pressure=&type=map&location=coordinates&detail=&radarRange=-1
                name: Windy.com
                show_state: false
                show_name: false
