type: custom:mushroom-template-card
entity: light.luci
primary: ""
secondary: luci
icon: |
  {% if states('sensor.luci_accese')|int >= 0 %}
    {{ 'mdi:numeric-' + states('sensor.luci_accese') + '-circle' }}
  {%- else -%}
    mdi:lightbulb
  {% endif %}
badge_icon: |
  {% if states('sensor.luci_accese')|int >= 1 %}
    mdi:lightbulb-on
  {% else %}
  {% endif %}
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      dismissable: true
      autoclose: false
      content:
        type: custom:auto-entities
        card:
          type: grid
          title: Luci accese
          columns: 2
          square: false
        card_param: cards
        filter:
          template: >-
            {%- for s in expand(states.light.luci)|selectattr('state','eq','on')
            if s.state == 'on' -%}
              {{
                {
                  'type': 'custom:button-card',
                  'entity': s.entity_id,
                  'template': 'light_button_accese',
                  'label': s.name,
                  'name': ' '
                
                }
              }},
            {%- endfor %}
        sort:
          method: state
          numeric: true
vertical: true
features_position: bottom
icon_tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      dismissable: true
      autoclose: false
      content:
        type: custom:auto-entities
        card:
          type: grid
          title: Luci accese
          columns: 2
          square: false
        card_param: cards
        filter:
          template: >-
            {%- for s in expand(states.light.luci)|selectattr('state','eq','on')
            if s.state == 'on' -%}
              {{
                {
                  'type': 'custom:button-card',
                  'entity': s.entity_id,
                  'template': 'light_button_accese',
                  'label': s.name,
                  'name': ' '
                
                }
              }},
            {%- endfor %}
        sort:
          method: state
          numeric: true
card_mod:
  style:
    ha-tile-icon$: |
      .container {
        width: 36px !important;
        height: 36px !important;
        {% if states('sensor.luci_accese')|int >= 1 %}
        animation: ping 2s infinite;
        {%- else -%}
          box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
          background: inherit !important;
        {% endif %}
        }
      @keyframes ping {
          0% { box-shadow: 0 0 1px 1px rgba(var(--red-rgb), 0.7); }
          100% { box-shadow: 0 0 5px 10px transparent; }
      }
    ha-tile-badge$: |
      .badge {
        --tile-badge-background-color: yellow;
      }
    .: |
      ha-card:active {
        transform: translateY(1.5px);
        transition: 0s;
      }
      ha-card {
        transform: scale(1.3);
        border: none;
        box-shadow: none;
        padding-left: 0px;
        background: rgba(0,0,0,0);
      }
      ha-tile-icon {
        --mdc-icon-size: 24px;
        {% if states('sensor.luci_accese')|int >= 1 %}
        --tile-color: red;
        --tile-icon-opacity: 0.5;
        {%- else -%}
        --tile-color: var(--disabled-color);
        {% endif %}
      }
      ha-tile-badge {
        #--tile-badge-icon-size: 100px;
        --tile-badge-icon-color: red;
        animation: wobbling 0.7s linear infinite alternate;
      }
      @keyframes wobbling {
      0% {transform: rotate(-20deg);}
      100% {transform: rotate(20deg);}
      }
      ha-state-icon {
        {% if states('sensor.luci_accese')|int >= 1 %}
          animation: alarm 3s ease infinite;
          color: yellow;
        {%- else -%}
        {% endif %}
      }
      @keyframes alarm {
        0%, 80%, 100% { transform: translateY(0); }
        10% { transform: translateY(-2px) rotate(-27deg); }
        20% { transform: translateY(-2px) rotate(21deg); }
        30% { transform: translateY(-2px) rotate(-15deg); }
        40% { transform: translateY(-2px) rotate(9deg); }
        50% { transform: translateY(0); }
        60% { transform: translateY(-1.2px) }
      }