{
  "version": 1,
  "minor_version": 1,
  "key": "lovelace.3d_printer_cellphone",
  "data": {
    "config": {
      "views": [
        {
          "type": "sections",
          "sections": [
            {
              "type": "grid",
              "cards": [
                {
                  "type": "heading",
                  "heading": "Filament Usage",
                  "heading_style": "title"
                },
                {
                  "type": "custom:auto-entities",
                  "card": {
                    "type": "grid",
                    "columns": 4,
                    "square": false
                  },
                  "card_param": "cards",
                  "filter": {
                    "template": "{% set ns = namespace(cards=[]) %}\n{% for s in states.sensor %}\n  {% if s.entity_id.startswith('sensor.spoolman_spool_') %}\n    {% set loc = (s.attributes.location | default('')) | lower %}\n    {% if 'cfs lite' in loc %}\n      {% set hex = s.attributes.filament_color_hex | default('44739e') %}\n      {% set hex_clean = hex if hex.startswith('#') else '#' ~ hex %}\n      {% set remain = (s.attributes.remaining_weight | default(s.state) | float(0)) | round(1) %}\n      {% set total = (s.attributes.initial_weight | default(1000) | float(1000)) %}\n      {% set raw_pct = ((remain / total) * 100) | round(1) %}\n      {% set pct = 0 if raw_pct < 0 else (100 if raw_pct > 100 else raw_pct) %}\n      {% set border = '#d0d0d0' if hex_clean | lower in ['#ffffff', '#fff'] else 'transparent' %}\n\n      {% set card = {\n        \"type\": \"custom:button-card\",\n        \"entity\": s.entity_id,\n        \"show_icon\": false,\n        \"show_state\": false,\n        \"show_name\": false,\n        \"custom_fields\": {\n          \"tube\": \"<div class='tube-bg'><div class='tube-fill' style='height: \" ~ pct ~ \"%; background-color: \" ~ hex_clean ~ \";'></div><div class='tube-text'>\" ~ remain ~ \"g</div></div>\"\n        },\n        \"styles\": {\n          \"card\": [\n            {\"background\": \"transparent\"},\n            {\"box-shadow\": \"none\"},\n            {\"border\": \"none\"},\n            {\"padding\": \"8px 2px\"},\n            {\"display\": \"flex\"},\n            {\"flex-direction\": \"column\"},\n            {\"align-items\": \"center\"}\n          ],\n          \"custom_fields\": {\n            \"tube\": [\n              {\"width\": \"100%\"},\n              {\"display\": \"flex\"},\n              {\"justify-content\": \"center\"}\n            ]\n          }\n        },\n        \"extra_styles\": \"\n          .tube-bg {\n            position: relative;\n            width: 60px;\n            height: 180px;\n            background-color: #dedede;\n            border-radius: 20px;\n            overflow: hidden;\n            border: 1px solid \" ~ border ~ \";\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n          }\n          .tube-fill {\n            width: 100%;\n            border-radius: 0 0 19px 19px;\n          }\n          .tube-text {\n            position: absolute;\n            top: 48%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            font-size: 13px;\n            font-weight: 800;\n            color: #111111;\n            pointer-events: none;\n            z-index: 2;\n            white-space: nowrap;\n          }\n        \",\n        \"tap_action\": {\n          \"action\": \"more-info\"\n        }\n      } %}\n      {% set ns.cards = ns.cards + [card] %}\n    {% endif %}\n  {% endif %}\n{% endfor %}\n{{ ns.cards }}"
                  }
                },
                {
                  "entity": "sensor.sparkx_i7_cfs_box_1_humidity",
                  "grid_options": {
                    "columns": 6
                  },
                  "icon": "mdi:water-percent",
                  "name": "Humidity",
                  "type": "tile"
                },
                {
                  "entity": "sensor.sparkx_i7_cfs_box_1_temperature",
                  "grid_options": {
                    "columns": 6
                  },
                  "icon": "mdi:thermometer",
                  "name": "Temperature",
                  "type": "tile"
                },
                {
                  "cards": [
                    {
                      "entity": "sensor.sparkx_i7_active_filament_slot",
                      "grid_options": {
                        "columns": 6
                      },
                      "icon": "mdi:swap-horizontal",
                      "name": "Active Slot",
                      "type": "tile"
                    },
                    {
                      "entity": "sensor.sparkx_i7_active_filament_slot",
                      "icon": "mdi:palette",
                      "icon_color": "{% set color = state_attr('sensor.sparkx_i7_active_filament_slot', 'color') | default('') | string %}{% set core = color | replace('#', '') %}{% if core | length >= 6 %}#{{ core[-6:] }}{% else %}var(--primary-text-color){% endif %}",
                      "multiline_secondary": true,
                      "name": "Active Color",
                      "primary": "{% set slot = states('sensor.sparkx_i7_active_filament_slot') %}{% if 'Slot 1' in slot %}{{ states('sensor.sparkx_i7_slot_1_color_name') }}{% elif 'Slot 2' in slot %}{{ states('sensor.sparkx_i7_slot_2_color_name') }}{% elif 'Slot 3' in slot %}{{ states('sensor.sparkx_i7_slot_3_color_name') }}{% elif 'Slot 4' in slot %}{{ states('sensor.sparkx_i7_slot_4_color_name') }}{% elif slot == 'External' %}{{ states('sensor.sparkx_i7_external_color_name') }}{% else %}Unknown{% endif %}",
                      "secondary": "{% set slot = states('sensor.sparkx_i7_active_filament_slot') %}{{ slot }}{% if state_attr('sensor.sparkx_i7_active_filament_slot', 'filament') %} · {{ state_attr('sensor.sparkx_i7_active_filament_slot', 'filament') }}{% endif %}",
                      "type": "custom:mushroom-template-card"
                    }
                  ],
                  "grid_options": {
                    "columns": "full"
                  },
                  "type": "horizontal-stack"
                },
                {
                  "type": "heading",
                  "icon": "mdi:printer-3d",
                  "heading": "Last/Current Print Job",
                  "heading_style": "title"
                },
                {
                  "type": "tile",
                  "entity": "sensor.sparkx_i7_used_material_length",
                  "name": "Used Material Total (cm)",
                  "icon": "mdi:plus-minus",
                  "grid_options": {
                    "columns": "full"
                  }
                },
                {
                  "type": "tile",
                  "entity": "sensor.sparkx_i7_filament_weight_estimated",
                  "name": "Current Job Weight (est.)",
                  "icon": "mdi:weight-gram",
                  "grid_options": {
                    "columns": 12,
                    "rows": 1
                  }
                },
                {
                  "type": "heading",
                  "icon": "mdi:coolant-temperature",
                  "heading_style": "title",
                  "heading": "Temperature"
                },
                {
                  "entity": "sensor.sparkx_i7_nozzle_temperature",
                  "grid_options": {
                    "columns": 4
                  },
                  "max": 300,
                  "min": 0,
                  "name": "Nozzle",
                  "severity": {
                    "green": 0,
                    "red": 240,
                    "yellow": 180
                  },
                  "type": "gauge",
                  "unit": "°C"
                },
                {
                  "entity": "sensor.sparkx_i7_bed_temperature",
                  "grid_options": {
                    "columns": 4
                  },
                  "max": 100,
                  "min": 0,
                  "name": "Bed",
                  "severity": {
                    "green": 0,
                    "red": 100,
                    "yellow": 60
                  },
                  "type": "gauge",
                  "unit": "°C"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}