Waste Collection Template

hc_waste_collection:
  variables:
    entitybulky: sensor.bulky_waste_collection
    entitybulkyicon: fapro:boxes-stacked-solid
    entitymixed: sensor.mixed_waste_collection
    entitymixedicon: fapro:dumpster-solid
    entityelectronics: sensor.electronics_waste_collection
    entityelectronicsicon: fapro:radio-solid
    trash_entities:
      - entity: '[[[ return variables.entitybulky ]]]'
        name: Bulky Waste
        icon: '[[[ return variables.entitybulkyicon ]]]'
        style: "color: #66ac85;"
      - entity: '[[[ return variables.entitymixed ]]]'
        name: Mixed Waste
        icon: '[[[ return variables.entitymixedicon ]]]'
        style: "color: #ddae7b;"
      - entity: '[[[ return variables.entityelectronics ]]]'
        name: Electronics
        icon: '[[[ return variables.entityelectronicsicon ]]]'
        style: "color: #84a2d9;"
    "y": |
      [[[
        const trashData = variables.trash_entities.map(entity => {
          const state = states[entity.entity] ? states[entity.entity].state : null;
          const days_left = state && !isNaN(parseInt(state, 10)) ? parseInt(state, 10) : 9999; // Assign a large number if invalid

          return {
            entity: entity.entity,
            name: entity.name,
            icon: entity.icon,
            style: entity.style,
            days_left: days_left
          };
        });

        // Sort by days_left but push non-numeric ones to the end
        trashData.sort((a, b) => a.days_left - b.days_left);

        return JSON.stringify(trashData);
      ]]]
  styles:
    grid:
      - grid-template-areas: '''first second third'''
      - grid-template-columns: 1fr 1fr 1fr
    card:
      - padding: 15px
    custom_fields:
      first:
        - justify-self: start
      second:
        - justify-self: center
      third:
        - justify-self: end
  custom_fields:
    first:
      card:
        type: custom:button-card
        card_mod:
          style: |
            ha-card {
              padding: 5px !important;
            }
        icon: |
          [[[ const trashData = JSON.parse(variables.y); return trashData[0] ? trashData[0].icon : null; ]]]
        name: |
          [[[ const trashData = JSON.parse(variables.y); return trashData[0] ? trashData[0].name : ''; ]]]
        label: |
          [[[
            const trashData = JSON.parse(variables.y);
            if (!trashData[0]) return '';
            return trashData[0].days_left === 0 ? "Today" : trashData[0].days_left === 1 ? "Tomorrow" : `${trashData[0].days_left} days`;
          ]]]
        show_label: true
        styles:
          card:
              - border-radius: 0px
              - box-shadow: none
              - padding-right: 5px
          grid:
              - grid-template-areas: '''i n'' ''i l'''
              - grid-template-columns: min-content
              - column-gap: 10px
          icon:
              - width: 20px
              - color: |
                  [[[ return JSON.parse(variables.y)[0] ? JSON.parse(variables.y)[0].style.match(/color:\s*(#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|[a-zA-Z]+)/)[1] : 'gray'; ]]]
          img_cell:
              - width: 20px
          name:
              - justify-self: start
              - font-size: 11px
              - font-family: montserrat
              - font-weight: 500
              - color: var(--color-dark-gray)
          label:
              - font-size: 11px
              - font-weight: 700
    second:
      card:
        type: custom:button-card
        icon: |
          [[[ const trashData = JSON.parse(variables.y); return trashData[1] ? trashData[1].icon : null; ]]]
        name: |
          [[[ const trashData = JSON.parse(variables.y); return trashData[1] ? trashData[1].name : ''; ]]]
        label: |
          [[[
            const trashData = JSON.parse(variables.y);
            if (!trashData[1]) return '';
            return trashData[1].days_left === 0 ? "Today" : trashData[1].days_left === 1 ? "Tomorrow" : `${trashData[1].days_left} days`;
          ]]]
        show_label: true
        styles:
          card:
              - border-radius: 0px
              - box-shadow: none
              - padding-right: 5px
          grid:
              - grid-template-areas: '''i n'' ''i l'''
              - grid-template-columns: min-content
              - column-gap: 10px
          icon:
              - width: 20px
              - color: |
                  [[[ return JSON.parse(variables.y)[1] ? JSON.parse(variables.y)[1].style.match(/color:\s*(#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|[a-zA-Z]+)/)[1] : 'gray'; ]]]
          img_cell:
              - width: 20px
          name:
              - font-size: 11px
              - font-family: montserrat
              - font-weight: 500
              - color: var(--color-dark-gray)
          label:
              - font-size: 11px
              - font-weight: 700
    third:
      card:
        type: custom:button-card
        icon: |
          [[[ const trashData = JSON.parse(variables.y); return trashData[2] ? trashData[2].icon : null; ]]]
        name: |
          [[[ const trashData = JSON.parse(variables.y); return trashData[2] ? trashData[2].name : ''; ]]]
        label: |
          [[[
            const trashData = JSON.parse(variables.y);
            if (!trashData[2]) return '';
            return trashData[2].days_left === 0 ? "Today" : trashData[2].days_left === 1 ? "Tomorrow" : `${trashData[2].days_left} days`;
          ]]]
        show_label: true
        styles:
          card:
              - border-radius: 0px
              - box-shadow: none
              - padding-right: 5px
          grid:
              - grid-template-areas: '''i n'' ''i l'''
              - grid-template-columns: min-content
              - column-gap: 10px
          icon:
              - width: 20px
              - color: |
                  [[[ return JSON.parse(variables.y)[2] ? JSON.parse(variables.y)[2].style.match(/color:\s*(#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|[a-zA-Z]+)/)[1] : 'gray'; ]]]
          img_cell:
              - width: 20px
          name:
              - font-size: 11px
              - font-family: montserrat
              - font-weight: 500
              - color: var(--color-dark-gray)
          label:
              - font-size: 11px
              - font-weight: 700