decluttering_templates:
  temperature_entity:
    default:
      - title: ''
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            border-radius: 16px;      /* rounded card */
            overflow: hidden;         /* clip row backgrounds */
            padding: 0;               /* remove default gaps */
          }
          .card-content {
            padding: 0 !important;    /* kill inner padding */
          }
      entities:
        - entity: '[[entity]]'
          name: '[[name]]'
          icon: '[[icon]]'
          card_mod:
            style: |
              hui-generic-entity-row {
                {% set temp = states('[[entity]]') | float %}
                {% set percent = ((temp + 10) / 50 * 100) | round(1) %}
                {% if temp < 16 %}
                  {% set rgb_light = '206,178,245' %}
                  {% set rgb_dark = '156,128,195' %}
                {% elif temp < 19 %}
                  {% set rgb_light = '163,217,245' %}
                  {% set rgb_dark = '113,167,195' %}
                {% elif temp < 22 %}
                  {% set rgb_light = '205,227,219' %}
                  {% set rgb_dark = '155,177,169' %}
                {% elif temp < 24 %}
                  {% set rgb_light = '251,217,160' %}
                  {% set rgb_dark = '201,167,110' %}
                {% elif temp < 27 %}
                  {% set rgb_light = '244,168,163' %}
                  {% set rgb_dark = '194,118,113' %}
                {% else %}
                  {% set rgb_light = '223,123,116' %}
                  {% set rgb_dark = '173,73,66' %}
                {% endif %}

                --rgb: {{ rgb_light }};
                --text-color: black !important;
                @media (prefers-color-scheme: dark) {
                  --rgb: {{ rgb_dark }};
                  --text-color: white !important;
                }

                background: linear-gradient(
                  95deg,
                  rgba(var(--rgb), 0.45) 0%,
                  rgba(var(--rgb), 0.45) {{percent}}%,
                  rgba(var(--rgb), 0.85) {{percent}}%,
                  rgba(12,14,18,0.42) 100%
                ),
                linear-gradient(
                  120deg,
                  rgba(255,255,255,0.02) 7%,
                  rgba(255,255,255,0.01) 13%,
                  rgba(255,255,255,0.00) 38%,
                  rgba(255,255,255,0.01) 47%,
                  rgba(255,255,255,0.00) 70%,
                  rgba(255,255,255,0.02) 82%,
                  rgba(255,255,255,0.00) 100%
                ),
                repeating-linear-gradient(
                  100deg,
                  rgba(255,255,255,0.011) 0 2px,
                  rgba(0,0,0,0.015) 2px 6px
                );

                /* Rounded corners */
                border-radius: 12px !important;
                margin: 4px 0 !important;
                overflow: hidden !important;

                /* Push value to the left */
                padding-right: 12px !important;   /* adds space on the right so the number is not cut */
              }
title: Home
views:

-- AFTER THIS POINT I HAVE MY CURRENT PAGES/TABS, WHICH I HAVEN'T PASTED FOR SPACE
BELOW IS THE FULL EXTENT OF THE NEW WORK IN PROGRESS PAGE I USED FOR TESTING --

  - type: sections
    max_columns: 4
    title: WIP
    path: wip
    sections:
      - type: grid
        cards:
          - type: heading
            heading: New section
          - type: vertical-stack
            cards:
              - type: custom:decluttering-card
                template: temperature_entity
                variables:
                  - entity: sensor.lounge_temperature_sensor_temperature
                  - name: Living
                  - icon: mdi:sofa
              - type: custom:decluttering-card
                template: temperature_entity
                variables:
                  - entity: sensor.master_bedroom_temperature_sensor_temperature
                  - name: Master Bedroom
                  - icon: mdi:bed-double
              - type: custom:decluttering-card
                template: temperature_entity
                variables:
                  - entity: sensor.office_temperature_sensor_temperature
                  - name: Office
                  - icon: mdi:monitor-dashboard
              - type: entity
                entity: sensor.office_temperature_sensor_temperature
              - type: custom:decluttering-card
                template: temperature_entity
                variables:
                  - entity: sensor.sewing_room_temperature_sensor_temperature
                  - name: Sewing Room
                  - icon: mdi:desk-lamp
              - type: custom:decluttering-card
                template: temperature_entity
                variables:
                  - entity: sensor.kitchen_temperature_sensor_temperature
                  - name: Kitchen
                  - icon: mdi:sofa