uid: weatherPopup
tags:
  - weather
  - popup
  - daily forecast
  - OpenWeatherMap
props:
  parameters:
    - description: <b>Optional prefix</b> for item names.
      label: Item prefix
      name: itemPrefix
      required: false
      type: TEXT
      groupName: general
    - description: <b>Additional prefix</b> for item names that belongs to another Things channel (valid for 'StationName' as it might differ)
      label: Additional item prefix
      name: itemPrefix2
      required: false
      type: TEXT
      groupName: general
      advanced: true
    - description: The number of days you want to forecast (<u>default:</u> <b>3</b>)
      label: Number of days to forecast
      name: forecastDays
      required: false
      type: TEXT
      groupName: general
    - description: Format of the timestamp (<u>default:</u> <b>HH:mm</b>)<br>Visit <a 'https://day.js.org/docs/en/display/format'>https://day.js.org/docs/en/display/format</a> for more informations.
      label: Timestamp format
      name: timestampFormat
      required: false
      type: TEXT
      groupName: general
    - description: Add suffix to the timestamp
      label: Custom timestamp suffix
      name: timestampSuffix
      required: false
      type: TEXT
      groupName: general
    - description: Overwrite the location header
      label: Location title
      name: locationTitle
      required: false
      type: TEXT
      groupName: general
    - label: Translation 'Feel'
      name: wordingFeel
      required: false
      type: TEXT
      groupName: wording
    - label: Translation 'Humidity'
      name: wordingHumidity
      required: false
      type: TEXT
      groupName: wording
    - label: Translation 'Wind'
      name: wordingWind
      required: false
      type: TEXT
      groupName: wording
    - label: Translation '%-Precipitation'
      name: wordingPrecipitation
      required: false
      type: TEXT
      groupName: wording
    - label: Translation 'Last Update'
      name: wordingLastUpdate
      required: false
      type: TEXT
      groupName: wording
  parameterGroups:
    - name: general
      label: General settings
    - name: wording
      label: Language settings
      description: Set alternative wordings
timestamp: Feb 1, 2021, 4:24:09 PM
component: f7-page
config:
  style:
    position: relative
    -ms-user-select: none
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none
    background: rgba(42,48,78,1)
    --f7-theme-color: none
    --f7-page-content-extra-padding-top: 0
    --f7-bars-bg-color: none
    --f7-bars-border-color: none
    --f7-navbar-shadow-image: none
    --f7-navbar-text-color: white
    --f7-bars-text-color: white
    --f7-navbar-link-color: white
    --f7-list-bg-color: rgba(0,0,0,.15)
    --f7-list-border-color: none
    --f7-list-margin-vertical: 7px
    --f7-page-navbar-offset: none
    --f7-page-toolbar-top-offset: none
    --f7-page-subnavbar-offset: none
    --f7-page-searchbar-offset: none
    --f7-bars-translucent-opacity: none
    --f7-bars-translucent-blur: none
    backdrop-filter: none
    --f7-button-border-radius: 0
    --weather-base-font-color: 255,255,255
    --weather-base-text-shadow-color: 0,0,0
    --weather-font-color: rgba(var(--weather-base-font-color),1)
    --weather-transparent-font-color: rgba(var(--weather-base-font-color),.75)
    --weather-text-shadow-color: rgba(var(--weather-base-text-shadow-color),.25)
    --weather-icon-color: rgba(var(--weather-base-font-color),1)
    --weather-hero-font-size: 91px
    --weather-hero-text-shadow: 2px 2px rgba(0,0,0,.35)
    --weather-small-font-size: 16px
    --weather-normal-font-size: 18px
slots:
  default:
    - component: f7-block
      config:
        style:
          background: "=(dayjs().format() >= items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Sunrise_Day0_OWM'].state && dayjs().format() < items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Sunset_Day0_OWM'].state) ? 'linear-gradient(to bottom, #355b8e, #c0d4f0)' : 'linear-gradient(to bottom, #413D8F, #CE9FC8)'"
          background-size: cover
          background-repeat: no-repeat
          background-position: bottom left
          padding: 30px 0 60px 0
          margin-top: 0
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
                - no-margin
              style:
                border-top: 80px solid white
                border-image-source: url('data:image/svg+xml,%3Csvg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"%3E%3Cg transform="matrix(1,0,0,0.198289,0,-19.1443)"%3E%3Cpath d="M2000,116C1713.19,117.226 1658.73,122.546 1360.08,153.634C1159.33,174.531 926.563,327.589 572.792,351.218C337.726,366.918 155.294,280.98 0,298.274L0,500L2000,500L2000,116Z" style="fill:rgba(42,48,78,1);" /%3E%3C/g%3E%3C/svg%3E')
                -moz-border-image-source: url('data:image/svg+xml,%3Csvg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"%3E%3Cg transform="matrix(1,0,0,0.198289,0,-19.1443)"%3E%3Cpath d="M2000,116C1713.19,117.226 1658.73,122.546 1360.08,153.634C1159.33,174.531 926.563,327.589 572.792,351.218C337.726,366.918 155.294,280.98 0,298.274L0,500L2000,500L2000,116Z" style="fill:rgba(42,48,78,1""/%3E%3C/g%3E%3C/svg%3E')
                -webkit-border-image-source: url('data:image/svg+xml,%3Csvg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"%3E%3Cg transform="matrix(1,0,0,0.198289,0,-19.1443)"%3E%3Cpath d="M2000,116C1713.19,117.226 1658.73,122.546 1360.08,153.634C1159.33,174.531 926.563,327.589 572.792,351.218C337.726,366.918 155.294,280.98 0,298.274L0,500L2000,500L2000,116Z" style="fill:rgba(42,48,78,1)"/%3E%3C/g%3E%3C/svg%3E')
                -o-border-image-source: url('data:image/svg+xml,%3Csvg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"%3E%3Cg transform="matrix(1,0,0,0.198289,0,-19.1443)"%3E%3Cpath d="M2000,116C1713.19,117.226 1658.73,122.546 1360.08,153.634C1159.33,174.531 926.563,327.589 572.792,351.218C337.726,366.918 155.294,280.98 0,298.274L0,500L2000,500L2000,116Z" style="fill:rgba(42,48,78,1"/%3E%3C/g%3E%3C/svg%3E')
                -webkit-appearance: none
                border-image-slice: 100% 0 0 0
                border-image-width: 1 0 0 0
                width: 100%
                position: absolute
                left: 0
                bottom: 0
                height: 100%
                max-height: 80px
          - component: f7-block
            config:
              style:
                text-align: center
              class:
                - no-margin
                - no-padding
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=!props.locationTitle ? items[(!props.itemPrefix2 ? (!props.itemPrefix ? '' : props.itemPrefix) : props.itemPrefix2) + 'Station_Name_OWM'].state : props.locationTitle"
                          style:
                            margin-top: calc(var(--f7-toolbar-height) / 2 - var(--f7-toolbar-height))
                            margin-bottom: 20px
                            font-size: var(--weather-normal-font-size)
                            color: var(--weather-font-color)
                            text-shadow: 2px 2px var(--weather-text-shadow-color)
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                            line-height: var(--f7-navbar-link-line-height,var(--f7-navbar-height))
                            text-transform: uppercase
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(!props.itemPrefix) ? Math.round(items.Temperature_OWM.state.split(' ')[0]) + '°' : Math.round(items[props.itemPrefix + 'Temperature_OWM'].state.split(' ')[0]) + '°'"
                          style:
                            line-height: var(--weather-hero-font-size)
                            font-size: var(--weather-hero-font-size)
                            color: var(--weather-font-color)
                            text-shadow: 2px 2px var(--weather-text-shadow-color)
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                      - component: f7-icon
                        config:
                          f7: "=(items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '01d') ? 'sun_max_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '01n') ? 'moon_stars_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '02d') ? 'cloud_sun_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '02n') ? 'cloud_moon_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '03d') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '03n') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '04d') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '04n') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '13d') ? 'cloud_snow_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '13n') ? 'cloud_snow_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '50d') ? 'cloud_fog_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Condition_IconId_OWM'].state === '50n') ? 'cloud_fog_fill' : ''"
                          size: 70
                          class:
                            - align-self-center
                          style:
                            color: var(--weather-icon-color)
                            text-shadow: 2px 2px var(--weather-text-shadow-color)
                - component: Label
                  config:
                    text: "=(!props.itemPrefix) ? items.Condition_OWM.state : items[props.itemPrefix + 'Condition_OWM'].state"
                    class:
                      - no-padding-top
                    style:
                      font-size: var(--weather-normal-font-size)
                      text-shadow: .5px .5px var(--weather-text-shadow-color)
                      color: var(--weather-font-color)
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                    style:
                      flex-wrap: nowrap
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=!props.wordingFeel ? 'Feel: ' : props.wordingFeel + ': '"
                          style:
                            font-size: var(--weather-normal-font-size)
                            color: var(--weather-transparent-font-color)
                            text-shadow: .5px .5px var(--weather-text-shadow-color)
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                      - component: Label
                        config:
                          text: "=(!props.itemPrefix) ? Math.round(items.Temperature_Apparent_OWM.state.split(' ')[0]) + '°' : Math.round(items[props.itemPrefix + 'Temperature_Apparent_OWM'].state.split(' ')[0]) + '°'"
                          style:
                            font-size: var(--weather-normal-font-size)
                            text-shadow: .5px .5px var(--weather-text-shadow-color)
                            font-weight: 600
                            color: var(--weather-transparent-font-color)
    - component: f7-block
      config:
        style:
          margin-top: -20px
        class:
          - no-padding
      slots:
        default:
          - component: f7-row
            config:
              class:
                - no-gap
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      text-align: center
                      border-right: 2px solid var(--weather-font-color)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          size: 30
                          style:
                            color: var(--weather-icon-color)
                      - component: Label
                        config:
                          text: "=(!props.itemPrefix) ? items.Humidity_Day0_OWM.state : items[props.itemPrefix + 'Humidity_Day0_OWM'].state"
                          style:
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                            font-size: var(--weather-normal-font-size)
                            color: var(--weather-font-color)
                - component: f7-col
                  config:
                    style:
                      text-align: center
                      border-right: 2px solid var(--weather-font-color)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          size: 30
                          style:
                            width: 100%
                            color: var(--weather-icon-color)
                      - component: f7-row
                        config:
                          style:
                            flex-wrap: nowrap
                          class:
                            - justify-content-center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=(!props.itemPrefix) ? Math.round(items.Temp_Max_Day0_OWM.state.split(' ')[0]) + '°' : Math.round(items[props.itemPrefix + 'Temp_Max_Day0_OWM'].state.split(' ')[0]) + '°'"
                                style:
                                  font-size: var(--weather-normal-font-size)
                                  color: var(--weather-font-color)
                                  padding-right: 7px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                            - component: Label
                              config:
                                text: "=(!props.itemPrefix) ? Math.round(items.Temp_Min_Day0_OWM.state.split(' ')[0]) + '°' : Math.round(items[props.itemPrefix + 'Temp_Min_Day0_OWM'].state.split(' ')[0]) + '°'"
                                style:
                                  font-size: var(--weather-normal-font-size)
                                  color: var(--weather-transparent-font-color)
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                - component: f7-col
                  config:
                    style:
                      text-align: center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: wind
                          size: 30
                          style:
                            color: var(--weather-icon-color)
                      - component: Label
                        config:
                          text: "=(!props.itemPrefix) ? items.Wind_Speed_Day0_OWM.displayState : items[props.itemPrefix + 'Wind_Speed_Day0_OWM'].displayState"
                          style:
                            font-size: var(--weather-normal-font-size)
                            color: var(--weather-font-color)
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
    - component: oh-repeater
      config:
        sourceType: range
        for: days
        rangeStart: 1
        rangeStop: "=!props.forecastDays ? 3 : Number(props.forecastDays)"
      slots:
        default:
          - component: f7-list
            slots:
              default:
                - component: f7-accordion-item
                  config:
                    style:
                      color: var(--weather-font-color)
                  slots:
                    default:
                      - component: f7-accordion-toggle
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  flex-wrap: nowrap
                                class:
                                  - align-items-center
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      style:
                                        overflow: hidden
                                        flex-wrap: nowrap
                                        margin: 5px 0 5px 16px
                                      class:
                                        - align-items-center
                                    slots:
                                      default:
                                        - component: f7-icon
                                          config:
                                            f7: "=(items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '01d') ? 'sun_max_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx)) + '_OWM'].state === '01n') ? 'moon_stars_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '02n') ? 'cloud_moon_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '03d') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '03n') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '04n') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '13d') ? 'cloud_snow_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '13n') ? 'cloud_snow_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '50d') ? 'cloud_fog_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Condition_Icon_Id_Day' : 'Condition_Icon_Id_Day' + (loop.days_idx+1)) + '_OWM'].state === '50n') ? 'cloud_fog_fill' : ''"
                                            size: 35
                                            style:
                                              padding-right: 7px
                                              color: var(--weather-icon-color)
                                        - component: Label
                                          config:
                                            text: =dayjs().add(loop.days,'days').format('dddd')
                                            style:
                                              font-size: var(--weather-small-font-size)
                                              overflow: hidden
                                              text-overflow: ellipsis
                                  - component: f7-row
                                    config:
                                      style:
                                        flex-wrap: nowrap
                                        margin: 5px 16px 5px 7px
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=Math.round(items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Temp_Max_Day' : 'Temp_Max_Day' + (loop.days_idx+1)) + '_OWM'].state.split(' ')[0]) + '°'"
                                            style:
                                              font-size: var(--weather-normal-font-size)
                                              margin-right: 7px
                                              min-width: 27px
                                              text-align: right
                                        - component: Label
                                          config:
                                            text: "=Math.round(items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Temp_Min_Day' : 'Temp_Min_Day' + (loop.days_idx+1)) + '_OWM'].state.split(' ')[0]) + '°'"
                                            style:
                                              font-size: var(--weather-normal-font-size)
                                              color: rgba(255,255,255,.75)
                                              min-width: 27px
                                              text-align: right
                      - component: f7-accordion-content
                        slots:
                          default:
                            - component: f7-list-item
                              slots:
                                default:
                                  - component: f7-col
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=!props.wordingHumidity ? 'Humidity' : props.wordingHumidity"
                                  - component: f7-col
                                    config:
                                      style:
                                        text-align: end
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Humidity_Day' : 'Humidity_Day' + (loop.days_idx+1)) + '_OWM'].state"
                            - component: f7-list-item
                              slots:
                                default:
                                  - component: f7-col
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=!props.wordingWind ? 'Wind' : props.wordingWind"
                                  - component: f7-col
                                    config:
                                      style:
                                        text-align: end
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Wind_Speed_Day' : 'Wind_Speed_Day' + (loop.days_idx+1)) + '_OWM'].displayState"
                            - component: f7-list-item
                              slots:
                                default:
                                  - component: f7-col
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=!props.wordingPrecipitation ? '%-Precipitation' : props.wordingPrecipitation"
                                  - component: f7-col
                                    config:
                                      style:
                                        text-align: end
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: "=items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.days === 1) ? 'Precip_Probability_Day' : 'Precip_Probability_Day' + (loop.days_idx+1)) + '_OWM'].state.split(' ')[0] + '%'"
    - component: f7-block
      config:
        style:
          text-align: center
          color: var(--weather-font-color)
      slots:
        default:
          - component: Label
            config:
              text: "=(!props.wordingLastUpdate ? 'Last Update: ' : props.wordingLastUpdate + ': ') + dayjs(items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'ObservationTime_OWM'].state).format((!props.timestampFormat) ? 'HH:mm' : props.timestampFormat) + (!props.timestampSuffix ? '' : ' ' + props.timestampSuffix)"
              style:
                font-size: var(--weather-normal-font-size)
                white-space: nowrap
                overflow: hidden
                text-overflow: ellipsis