type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 1
card_param: cards
filter:
  exclude:
    - state: "off"
    - state: idle
  include:
    - entity_id: /^alert(.).*
      state: "on"
      options:
        type: custom:mushroom-template-card
        primary: Alarm
        secondary: "!!!"
        icon: mdi:alert-circle
        icon_color: red
        fill_container: true
        layout: vertical
        multiline_secondary: false
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              dismissable: true
              autoclose: false
              title: Alarm
              timeout: 30000
              content:
                type: horizontal-stack
                cards:
                  - type: custom:auto-entities
                    show_empty: true
                    card:
                      type: entities
                      card_mod:
                        style: |
                          ha-card {
                            background-color: red;
                            border-radius: 5px;
                            --primary-color: white;
                            --paper-item-icon-color: white;
                            --secondary-text-color: white;
                            height: 8em !important;    
                            overflow-y: scroll !important;
                          }
                    filter:
                      include:
                        - entity_id: /^alert(.).*
                          options:
                            secondary_info: last-changed
                      exclude:
                        - state: "off"
                        - state: idle
                    sort:
                      method: last_changed
                      reverse: true
                    grid_options:
                      columns: full
        card_mod:
          style: |
            ha-card { 
              --icon-size: 1.9em;
              --icon-symbol-size: 1.8em;
              --card-primary-font-size: 0.7em;
              --card-secondary-font-size: 0.7em;
              --card-primary-line-height: 1.0em;
              --card-secondary-line-height: 1.0em;
              animation: blink 1s linear infinite; 
            }            
            @keyframes blink { 50% {opacity: 0;} }
show_empty: true
