advanced_auto_entity_docker_card

type: custom:auto-entities
card:
  type: grid
card_param: cards
filter:
  include:
    - custom_fields:
        up: |
          [[[
            return `<ha-icon
              icon="mdi:power"
              style="width: 20px; height: 20px; color: #B58E31;">
              </ha-icon><span> Up <span style=color: var(--text-color-sensor);>${states['sensor.rpi_monitor_raspberrypi'].attributes.up_time} hours</span></span>`
          ]]]
        disk_free: |
          [[[
            return `<ha-icon
              icon="mdi:harddisk"
              style="width: 20px; height: 20px; color: #B58E31;">
              </ha-icon><span> Disk free: <span style=color: var(--text-color-sensor);>${ ((1 - states['sensor.rpi_monitor_raspberrypi'].attributes.fs_free_prcnt/100) * states['sensor.rpi_monitor_raspberrypi'].attributes.fs_total_gb).toFixed(0) }  GB</span></span>`
          ]]]
        cpu: |
          [[[
            return `<ha-icon
              icon="mdi:thermometer"
              style="width: 20px; height: 20px; color: #B58E31;">
              </ha-icon><span> CPU: <span style=color: var(--text-color-sensor);>${states['sensor.rpi_monitor_raspberrypi'].attributes.temp_cpu_c} &degC</span></span>`
          ]]]
        mem: |
          [[[
            return `<ha-icon
              icon="mdi:memory"
              style="width: 20px; height: 20px; color: #B58E31;">
              </ha-icon><span> RAM free: <span style=color: var(--text-color-sensor);>${Math.round(states['sensor.rpi_monitor_raspberrypi'].attributes.memory.free_mb)} MB</span></span>`
          ]]]
      entity: sensor.rpi_monitor_raspberrypi
      name: rpi4
      show_entity_picture: true
      show_state: false
      size: 40px
      entity_picture: /local/images/raspberry_logo.png
      styles:
        custom_fields:
          cpu:
            - padding-bottom: 0px
            - align-self: start
            - padding-left: 2px
            - font-size: 12px
            - justify-self: start
          up:
            - padding-bottom: 0px
            - align-self: start
            - padding-left: 2px
            - font-size: 12px
            - justify-self: start
          mem:
            - padding-bottom: 0px
            - align-self: start
            - padding-left: 2px
            - font-size: 12px
            - justify-self: start
          disk_free:
            - padding-bottom: 0px
            - align-self: start
            - padding-left: 2px
            - font-size: 12px
            - justify-self: start
        grid:
          - grid-template-areas: '"i i" "n n" "up up" "disk_free disk_free" "cpu cpu" "mem mem"'
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: 1fr min-content min-content min-content min-content
        name:
          - font-weight: bold
          - font-size: 16px
          - color: rgb(18,154,190)
          - align-self: middle
          - justify-self: middle
          - padding-bottom: 4px
        card:
          - height: 165px
      tap_action:
        action: more-info
      type: custom:button-card
    - entity_id: sensor.docker_*_state
      options:
        custom_fields:
          state: |
            [[[
              var state = `${states[entity.entity_id].state}`
              var health = `${states[entity.entity_id.replace('state', 'health')].state}`
              var state_to_show = state
              if (state=='running' & health!='unknown') {var state_to_show=health}
              return `<ha-icon
                icon="mdi:power"
                style="width: 20px; height: 20px; color: #B58E31;">
                </ha-icon><span> State: <span style=color: var(--text-color-sensor);>${state_to_show}</span></span>`
            ]]]
          up: |
            [[[
              return `<ha-icon
                icon="mdi:timer-check-outline"
                style="width: 20px; height: 20px; color: #B58E31;">
                </ha-icon><span> <span style=color: var(--text-color-sensor);>${states[entity.entity_id.replace('state', 'status')].state}</span></span>`
            ]]]
          cpu: |
            [[[
              return `<ha-icon
                icon="mdi:chip"
                style="width: 20px; height: 20px; color: #B58E31;">
                </ha-icon><span> CPU: <span style=color: var(--text-color-sensor);>${states[entity.entity_id.replace('state', 'cpu')].state}%</span></span>`
            ]]]
          mem: |
            [[[
              return `<ha-icon
                icon="mdi:memory"
                style="width: 20px; height: 20px; color: #B58E31;">
                </ha-icon><span> RAM: <span style=color: var(--text-color-sensor);>${states[entity.entity_id.replace('state', 'memory')].state} MB</span></span>`
            ]]]
        show_entity_picture: true
        show_state: false
        name: >
          [[[ return `${entity.attributes.friendly_name.replace(' State', '')}`
          ]]]
        size: 70px
        state:
          - entity_picture: /local/images/docker_2.png
            styles:
              entity_picture:
                - filter: |
                    [[[
                      var state = `${states[entity.entity_id].state}`
                      var health = `${states[entity.entity_id.replace('state', 'health')].state}`
                      if (health=='unhealthy') {return 'hue-rotate(195deg)'}
                      if (state=='exited') {return 'grayscale(90%)'}
                      else {return ''}
                    ]]]
            operator: default
        styles:
          custom_fields:
            cpu:
              - padding-bottom: 0px
              - align-self: start
              - padding-left: 2px
              - font-size: 12px
              - justify-self: start
            up:
              - padding-bottom: 0px
              - align-self: start
              - padding-left: 2px
              - font-size: 12px
              - justify-self: start
            mem:
              - padding-bottom: 0px
              - align-self: start
              - padding-left: 2px
              - font-size: 12px
              - justify-self: start
            state:
              - padding-bottom: 0px
              - align-self: start
              - padding-left: 2px
              - font-size: 12px
              - justify-self: start
          grid:
            - grid-template-areas: '"i i" "n n" "state state" "up up" "cpu cpu" "mem mem"'
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content min-content min-content
          name:
            - font-weight: bold
            - font-size: 16px
            - color: |
                [[[
                  var state = `${states[entity.entity_id].state}`
                  var health = `${states[entity.entity_id.replace('state', 'health')].state}`
                  if (health=='unhealthy') {return 'rgb(178,116,52)'}
                  if (state=='exited') {return 'rgb(117,126,130)'}
                  else {return 'rgb(18,154,190)'}
                ]]]
            - align-self: middle
            - justify-self: middle
            - padding-bottom: 4px
          card:
            - height: 165px
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: >
              [[[ return `${entity.entity_id.replace('sensor',
              'switch').replace('_state', '')}` ]]]
        type: custom:button-card