Bar custom card

type: custom:button-card
entity: sensor.stan_peletu_zasobnik
show_icon: true
show_name: true
show_label: false
show_state: true
state_display: |
  [[[
    return Math.round(Number(entity.state)) + ' kg';
  ]]]
name: w zasobniku
custom_fields:
  tytul: w magazynie
  magazyn: |
    [[[
      var stan_mag = states["input_number.stan_peletu_magazyn_szt"].state;
      return Math.round(Number(stan_mag)) + ' worków'
    ]]]
  zasobnik: |
    [[[
      var kolor = "#1C1C1C00";
      var stan = states["input_number.test_procenty"].state;
      var ikona
      if (stan < 25) {var ikona = '<ha-icon icon="mdi:alert" style="width: 25px; height: 25px; color:#CC0000;"></ha-icon>'} else {var ikona = helpers.formatDateShort(states["script.kotlownia_napelnianie_zbiornika"].attributes.last_triggered)}
      return ikona
    ]]]
  bar: |
    [[[
      var kolor = "gray";
      var state = states["input_number.test_procenty"].state;
      var r = 0; var g = 0; var b = 0;
      if (state < 50 ) {
        var r = 255;
        var g = parseInt(5.1 * state);
      } else {
        var g = 255;
        var r = parseInt(510 - 5.10 * state);
      }
      var h = r * 0x10000 + g * 0x100 + b * 0x1;
      var kolor = '#' + ('000000' + h.toString(16)).slice(-6);
      return `
      <div>
      <div style="background:${kolor}; height: 14px; width:${state}%">
      </div>
      </div>
      `
    ]]]
variables:
  var_color: |-
    [[[
      var percentage = states["input_number.test_procenty"].state;
      var r = 0; var g = 0; var b = 0;
      if (percentage < 50 ) {
        var r = 255;
        var g = parseInt(5.1 * percentage);
      } else {
        var g = 255;
        var r = parseInt(510 - 5.10 * percentage);
      }
      var h = r * 0x10000 + g * 0x100 + b * 0x1;
      var h = r * 0x10000 + g * 0x100 + b * 0x1;
      return '#' + ('000000' + h.toString(16)).slice(-6);
    ]]]
styles:
  custom_fields:
    tytul:
      - position: absolute
      - left: 45%
      - top: 10%
      - color: white
      - font-size: 12px
    magazyn:
      - position: absolute
      - font-size: 14px
      - left: 44%
      - top: 32%
    zasobnik:
      - position: absolute
      - color: white
      - font-size: 14px
      - left: 80%
      - top: 25%
      - animation: >-
          [[[ if (states["sensor.procent_zasobnika_peletu"].state < 20) return
          "blink 1.5s ease infinite"; ]]]
    bar:
      - position: absolute
      - width: 75%
      - height: 12%
      - top: 75%
      - left: 20%
      - background: "#606060"
  name:
    - position: absolute
    - left: 20%
    - top: 10%
    - color: white
    - font-size: 12px
  state:
    - position: absolute
    - left: 22%
    - top: 32%
    - color: white
    - font-size: 15px
  icon:
    - left: 2%
    - color: "[[[ return variables.var_color ]]]"
  card:
    - background-color: "#00000060"
    - text-shadow: 0px 0px 5px black
icon: mdi:fuel
size: 16%
aspect_ratio: 7