type: vertical-stack
cards:
  - type: markdown
    content: |
      #### Boompollen voorspelling komende dagen
    card_mod:
      class: class-section-heading
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.kleenex_pollen_radar_thuis_bomen
        layout: vertical
        primary: >
          {% set date_str = state_attr(entity, 'forecast')[0].date %} {% set day
          = as_datetime(date_str).strftime('%A') %} {% set dagen =
          {'Monday':'Maandag','Tuesday':'Dinsdag','Wednesday':'Woensdag','Thursday':'Donderdag','Friday':'Vrijdag','Saturday':'Zaterdag','Sunday':'Zondag'}
          %} {{ dagen[day] }}
        secondary: |
          {% set data = state_attr(entity, 'forecast')[0] %} {% set niveau = {
            'none': 'Geen',
            'low': 'Laag',
            'moderate': 'Gemiddeld',
            'high': 'Hoog',
            'very-high': 'Zeer hoog'
          } %} {{ niveau.get(data.level, 'Onbekend') }}
        icon: mdi:tree
        icon_color: |
          {% set data = state_attr(entity, 'forecast')[0] %} 
          {% set colors =  {
            'none': 'white',
            'low': '#4caf50',
            'moderate': '#f0ad4e',
            'high': '#d9534f',
            'very-high': '#c9302c'
          } %} {{ colors.get(data.level, 'gray') }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set data = state_attr('sensor.kleenex_pollen_radar_thuis_bomen', 'forecast')[0] %}
                {% set forecast = data.level %}
                {% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very-high': '100'} %}
                {% set percentage = circles.get(forecast, '10') %}
                {% set colors = {'none': 'white', 'low': '#4caf50', 'moderate': '#f0ad4e', 'high': '#d9534f', 'very-high': '#c9302c'} %}
                {% set level_color = colors.get(forecast, 'gray') %}
                background: 
                  radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
                  conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
              }          
      - type: custom:mushroom-template-card
        entity: sensor.kleenex_pollen_radar_thuis_bomen
        layout: vertical
        primary: >
          {% set date_str = state_attr(entity, 'forecast')[1].date %} {% set day
          = as_datetime(date_str).strftime('%A') %} {% set dagen =
          {'Monday':'Maandag','Tuesday':'Dinsdag','Wednesday':'Woensdag','Thursday':'Donderdag','Friday':'Vrijdag','Saturday':'Zaterdag','Sunday':'Zondag'}
          %} {{ dagen[day] }}
        secondary: |
          {% set data = state_attr(entity, 'forecast')[1] %} {% set niveau = {
            'none': 'Geen',
            'low': 'Laag',
            'moderate': 'Gemiddeld',
            'high': 'Hoog',
            'very-high': 'Zeer hoog'
          } %} {{ niveau.get(data.level, 'Onbekend') }}
        icon: mdi:tree
        icon_color: |
          {% set data = state_attr(entity, 'forecast')[1] %} 
          {% set colors =  {
            'none': 'white',
            'low': '#4caf50',
            'moderate': '#f0ad4e',
            'high': '#d9534f',
            'very-high': '#c9302c'
          } %} {{ colors.get(data.level, 'gray') }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set data = state_attr('sensor.kleenex_pollen_radar_thuis_bomen', 'forecast')[1] %}
                {% set forecast = data.level %}
                {% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very-high': '100'} %}
                {% set percentage = circles.get(forecast, '10') %}
                {% set colors = {'none': 'white', 'low': '#4caf50', 'moderate': '#f0ad4e', 'high': '#d9534f', 'very-high': '#c9302c'} %}
                {% set level_color = colors.get(forecast, 'gray') %}
                background: 
                  radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
                  conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
              }          
      - type: custom:mushroom-template-card
        entity: sensor.kleenex_pollen_radar_thuis_bomen
        layout: vertical
        primary: >
          {% set date_str = state_attr(entity, 'forecast')[2].date %} {% set day
          = as_datetime(date_str).strftime('%A') %} {% set dagen =
          {'Monday':'Maandag','Tuesday':'Dinsdag','Wednesday':'Woensdag','Thursday':'Donderdag','Friday':'Vrijdag','Saturday':'Zaterdag','Sunday':'Zondag'}
          %} {{ dagen[day] }}
        secondary: |
          {% set data = state_attr(entity, 'forecast')[2] %} {% set niveau = {
            'none': 'Geen',
            'low': 'Laag',
            'moderate': 'Gemiddeld',
            'high': 'Hoog',
            'very-high': 'Zeer hoog'
          } %} {{ niveau.get(data.level, 'Onbekend') }}
        icon: mdi:tree
        icon_color: |
          {% set data = state_attr(entity, 'forecast')[2] %} 
          {% set colors =  {
            'none': 'white',
            'low': '#4caf50',
            'moderate': '#f0ad4e',
            'high': '#d9534f',
            'very-high': '#c9302c'
          } %} {{ colors.get(data.level, 'gray') }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set data = state_attr('sensor.kleenex_pollen_radar_thuis_bomen', 'forecast')[2] %}
                {% set forecast = data.level %}
                {% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very-high': '100'} %}
                {% set percentage = circles.get(forecast, '10') %}
                {% set colors = {'none': 'white', 'low': '#4caf50', 'moderate': '#f0ad4e', 'high': '#d9534f', 'very-high': '#c9302c'} %}
                {% set level_color = colors.get(forecast, 'gray') %}
                background: 
                  radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
                  conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
              }          
      - type: custom:mushroom-template-card
        entity: sensor.kleenex_pollen_radar_thuis_bomen
        layout: vertical
        primary: >
          {% set date_str = state_attr(entity, 'forecast')[3].date %} {% set day
          = as_datetime(date_str).strftime('%A') %} {% set dagen =
          {'Monday':'Maandag','Tuesday':'Dinsdag','Wednesday':'Woensdag','Thursday':'Donderdag','Friday':'Vrijdag','Saturday':'Zaterdag','Sunday':'Zondag'}
          %} {{ dagen[day] }}
        secondary: |
          {% set data = state_attr(entity, 'forecast')[3] %} {% set niveau = {
            'none': 'Geen',
            'low': 'Laag',
            'moderate': 'Gemiddeld',
            'high': 'Hoog',
            'very-high': 'Zeer hoog'
          } %} {{ niveau.get(data.level, 'Onbekend') }}
        icon: mdi:tree
        icon_color: |
          {% set data = state_attr(entity, 'forecast')[3] %} 
          {% set colors =  {
            'none': 'white',
            'low': '#4caf50',
            'moderate': '#f0ad4e',
            'high': '#d9534f',
            'very-high': '#c9302c'
          } %} {{ colors.get(data.level, 'gray') }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set data = state_attr('sensor.kleenex_pollen_radar_thuis_bomen', 'forecast')[3] %}
                {% set forecast = data.level %}
                {% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very-high': '100'} %}
                {% set percentage = circles.get(forecast, '10') %}
                {% set colors = {'none': 'white', 'low': '#4caf50', 'moderate': '#f0ad4e', 'high': '#d9534f', 'very-high': '#c9302c'} %}
                {% set level_color = colors.get(forecast, 'gray') %}
                background: 
                  radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
                  conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
              }