type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 100%
      grid-template-rows: auto
    cards:
      - type: custom:mushroom-template-card
        primary: SYSTEM -  {{(states('sensor.rpi_uptime'))}}
        secondary: Home Assistant - {{(states('sensor.ha_uptime'))}}
        icon: mdi:home-assistant
        icon_color: blue
        layout: horizontal
        tap_action:
          action: navigate
          navigation_path: /lovelace-mushroom/paths
        badge_color: blue
        badge_icon: |
          {% if is_state('sensor.updates_available', '1') %}
            mdi:numeric-1-circle
          {% elif is_state('sensor.updates_available', '2') %}
            mdi:numeric-2-circle
          {% elif is_state('sensor.updates_available', '3') %}
            mdi:numeric-3-circle
          {% elif is_state('sensor.updates_available', '4') %}
            mdi:numeric-4-circle
          {% elif is_state('sensor.updates_available', '5') %}
            mdi:numeric-5-circle
          {% elif is_state('sensor.updates_available', '6') %}
            mdi:numeric-6-circle
          {% elif is_state('sensor.updates_available', '7') %}
            mdi:numeric-7-circle
          {% elif is_state('sensor.updates_available', '8') %}
            mdi:numeric-8-circle
          {% elif is_state('sensor.updates_available', '9') %}
            mdi:numeric-9-circle
          {% endif %}
        hold_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Dostępne aktualizacje
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - domain: update
                      state: 'on'
                card:
                  type: entities
                  show_header_toggle: false
        card_mod:
          style:
            mushroom-shape-icon$: ''
            .: |
              ha-state-icon {
                {% if not is_state('sensor.updates_available', '0') %}
                animation: surprise 3s ease infinite;
                {% endif %}                      
              }
              @keyframes surprise {
                0%, 20%, 100% { transform: translateY(0); }
                2.5% { transform: translateY(-6px) rotate(-14deg); }
                5% { transform: translateY(-6px) rotate(11deg); }
                7.5% { transform: translateY(-6px) rotate(-8deg); }
                10% { transform: translateY(-6px) rotate(5deg); }
                12.5% { transform: translateY(0); }
                15% { transform: translateY(-3px) }
              }
              .shape {
                {% if not is_state('sensor.updates_available', '0') %}
                --shape-animation: ping 2s infinite;
                {% endif %} 
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
                }
                
                100% {
                  box-shadow: 0 0 5px 15px transparent;
                }
              }
              ha-card { 
                {% if not is_state('sensor.updates_available', '0') %}
                box-shadow: 0px 0px 8px 4px rgba(var(--rgb-blue), 0.8) !important;
                {% else %}
                box-shadow: var(--ha-card-box-shadow) !important;
                {% endif %}
                --badge-size: 22px;
                background: var(--card-background-color) !important;
                margin-left: 5px;
                margin-right: 5px;
                border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
              }
              /* Add subtle color on hover */
              :host {
                --mush-icon-size: 60px;         
                --mush-card-primary-font-size: 13px;
                --mush-card-secondary-font-size: 11px;
              }
              ha-card:hover {
                background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
              }
    card_mod:
      style: |
        ha-card {
          border: none; 
          box-shadow: none;
          }