type: custom:vertical-stack-in-card # type: vertical-stack 
card_mod:
  style: |
    ha-card {
        border: 1px solid {% if is_state('binary_sensor.global_natural_alert', 'on') %} {{state_attr('binary_sensor.global_natural_alert','level')}} {% else %} Green {% endif %};
    }
cards:
#################################################################
## PICTURE ELEMENTS 
#################################################################
- type: picture-elements
  card_mod:
    style: |
      {% set global = 'binary_sensor.global_natural_alert' %}
      @keyframes blink {
        30% {
          background: {% if is_state(global, 'on') %} gray; {% endif %}
        }
      }
      ha-card {
        --my-animation: blink 2s linear 3;
        --global-level: {% if is_state(global, 'on') %} {{state_attr(global,'level')}}; {% else %} Green;{% endif %} 
        --meteoalarm-level: {{state_attr(global,'meteoalarm_level')}};
        --meteoalarm-level-left: {% if (state_attr('binary_sensor.meteoalarm', 'urgency')|lower) == 'immediate' %} 5%; {% else %} 90%; {% endif %}
        --meteoalarm-type-left: {% if (state_attr('binary_sensor.meteoalarm', 'urgency')|lower) == 'immediate' %} 10%; {% else %} 95%; {% endif %}
        --my-border-style: solid;

        --my-border-width: {% if is_state('input_boolean.natural_events', 'off') %} 1px; {% else %} 0px; {% endif %}
        --my-border-color: {% if is_state(global, 'on') %} var(--global-level); {% endif %}
        --my-background: {% if is_state(global, 'on') %} var(--global-level); {% else %} Green;{% endif %}
        --my-color: {% if state_attr(global, 'level') in ['White','Yellow','Gold','Orange'] %} var(--disabled-text-color); {% endif %}
        {% if is_state(global, 'on') %}
        --my-border-width: {% if is_state('input_boolean.natural_events', 'off') %} 1px; {% else %} 1px 0px 0px 0px; {% endif %}
        {% else %}
        --my-border-width: 0px;
        --my-color: Wihte;
        {% endif %}
        border-color: var(--my-border-color);
        border-style: var(--my-border-style);
        border-width: var(--my-border-width);
        background: var(--my-background);
      }
  image: /local/hassiohelp/pkg_natural_events/background.png
  elements:
    - type: conditional # Nessun Evento
      conditions:
        - entity: binary_sensor.global_natural_alert
          state: 'off'
      elements:
        - type: state-label
          entity: sensor.dark_sky_summary
          tap_action:
            action: call-service
            service: input_boolean.toggle
            service_data:
              entity_id: input_boolean.natural_events
          hold_action:
            action: none
          style:
            border-color: 'var(--global-level)'
            border-style: solid
            border-width: 'var(--my-border-width)'
            animation: 'var(--my-animation)'
            background-color: 'var(--global-level)'
            color: 'var(--my-color)'
            font-family: Trebuchet MS
            font-size: 120%
            font-weight: bold
            left: 0%
            opacity: 0.5
            pointer-events: auto
            right: 0%
            text-align: center
            top: 95%
            transform: 'translate(0%,-50%)'
            z-index: 98

    - type: conditional # MeteoAlarm
      conditions:
        - entity: binary_sensor.meteoalarm
          state: 'on'
      elements:
        - type: state-icon
          entity: sensor.meteoalarm_level
          style: 
            '--paper-item-icon-color': 'var(--meteoalarm-level)'
            left: 'var(--meteoalarm-level-left)'
            top: 20%
            z-index: 99
        - type: state-icon
          entity: sensor.meteoalarm_type
          style: 
            '--paper-item-icon-color': 'var(--meteoalarm-level)'
            left: 'var(--meteoalarm-type-left)'
            top: 20%
            z-index: 99

    - type: conditional # Eventi Meteo
      conditions:
        - entity: group.meteoalert
          state: 'on'
      elements:
        - type: state-label
          entity: group.meteoalert
          prefix: 'Meteo '
          tap_action:
            action: call-service
            service: input_boolean.toggle
            service_data:
              entity_id: input_boolean.natural_events
          hold_action:
            action: none
          style:
            border-color: 'var(--global-level)'
            border-style: solid
            border-width: 'var(--my-border-width)'
            animation: 'var(--my-animation)'
            background-color: 'var(--global-level)'
            color: 'var(--my-color)'
            font-family: Trebuchet MS
            font-size: 120%
            font-weight: bold
            left: 0%
            opacity: 0.5
            pointer-events: auto
            right: 0%
            text-align: center
            top: 5%
            transform: 'translate(0%,-50%)'
            z-index: 98
        - entity: binary_sensor.dpc_temporali_oggi
          image: /local/hassiohelp/pkg_natural_events/dpc_temporali_oggi.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 1
          type: image
        - entity: binary_sensor.dpc_temporali_domani
          image: /local/hassiohelp/pkg_natural_events/dpc_temporali_domani.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 1
          type: image
    - type: conditional # Eventi Geologici
      conditions:
        - entity: group.geoalert
          state: 'on'
      elements:
        - type: state-label
          entity: group.geoalert
          prefix: 'Geologico '
          tap_action:
            action: call-service
            service: input_boolean.toggle
            service_data:
              entity_id: input_boolean.natural_events
          hold_action:
            action: none
          style:
            border-color: 'var(--global-level)'
            border-style: solid
            border-width: 'var(--my-border-width)'
            animation: 'var(--my-animation)'
            background-color: 'var(--global-level)'
            color: 'var(--my-color)'
            font-family: Trebuchet MS
            font-size: 120%
            font-weight: bold
            left: 0%
            opacity: 0.5
            pointer-events: auto
            right: 0%
            text-align: center
            top: 95%
            transform: 'translate(0%,-50%)'
            z-index: 98
        - entity: binary_sensor.dpc_idraulico_oggi
          image: /local/hassiohelp/pkg_natural_events/dpc_idraulico_oggi.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 2
          type: image
        - entity: binary_sensor.dpc_idrogeologico_oggi
          image: /local/hassiohelp/pkg_natural_events/dpc_idrogeologico_oggi.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 1
          type: image
        - entity: binary_sensor.dpc_idraulico_domani
          image: /local/hassiohelp/pkg_natural_events/dpc_idraulico_domani.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 2
          type: image
        - entity: binary_sensor.dpc_idrogeologico_domani
          image: /local/hassiohelp/pkg_natural_events/dpc_idrogeologico_domani.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 1
          type: image
        - entity: binary_sensor.lastquake
          image: /local/hassiohelp/pkg_natural_events/sisma.png
          state_filter:
            'on': opacity(1)
            'off': opacity(0)
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
            z-index: 0
          type: image