type: vertical-stack
cards:
  - type: markdown
    content: |
      #### Pollen in de lucht
    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: Bomen
        secondary: >
          {% set forecast = state_attr(entity, 'level') %} {% set niveau = {
              'none': 'Geen',
              'low': 'Laag',
              'moderate': 'Gemiddeld',
              'high': 'Hoog',
              'very-high': 'Zeer hoog'
            } %}
          {% set level_niveau = niveau.get(forecast, 'Onbekend') %} {{
          level_niveau }} ({{ states(entity) }} ppm)
        icon: mdi:tree
        icon_color: |
          {% set forecast = state_attr(entity, 'level') %} {% set colors = {
              'none': 'white',
              'low': '#4caf50',
              'moderate': '#f0ad4e',
              'high': '#d9534f',
              'very-high': '#c9302c'
            } %}
          {% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set forecast = state_attr('sensor.kleenex_pollen_radar_thuis_bomen', '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_gras
        layout: vertical
        primary: Grassen
        secondary: >
          {% set forecast = state_attr(entity, 'level') %} {% set niveau = {
              'none': 'Geen',
              'low': 'Laag',
              'moderate': 'Gemiddeld',
              'high': 'Hoog',
              'very-high': 'Zeer hoog'
            } %}
          {% set level_niveau = niveau.get(forecast, 'Onbekend') %} {{
          level_niveau }} ({{ states(entity) }} ppm)
        icon: mdi:grass
        icon_color: |
          {% set forecast = state_attr(entity, 'level') %} {% set colors = {
              'none': 'white',
              'low': '#4caf50',
              'moderate': '#f0ad4e',
              'high': '#d9534f',
              'very-high': '#c9302c'
            } %}
          {% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set forecast = state_attr('sensor.kleenex_pollen_radar_thuis_gras', '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_kruiden
        layout: vertical
        primary: Kruiden
        secondary: >
          {% set forecast = state_attr(entity, 'level') %} {% set niveau = {
              'none': 'Geen',
              'low': 'Laag',
              'moderate': 'Gemiddeld',
              'high': 'Hoog',
              'very-high': 'Zeer hoog'
            } %}
          {% set level_niveau = niveau.get(forecast, 'Onbekend') %} {{
          level_niveau }} ({{ states(entity) }} ppm)
        icon: mdi:flower-pollen
        icon_color: |
          {% set forecast = state_attr(entity, 'level') %} {% set colors = {
              'none': 'white',
              'low': '#4caf50',
              'moderate': '#f0ad4e',
              'high': '#d9534f',
              'very-high': '#c9302c'
            } %}
          {% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-symbol-size: 25px;
                --icon-size: 48px;
                {% set forecast = state_attr('sensor.kleenex_pollen_radar_thuis_kruiden', '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%);
              }