#################################################################
## NATURAL EVENTS VERTICAL STACK - PICTURE MENU
#################################################################
type: custom:vertical-stack-in-card
card_mod: ##background-color: var(--ha-card-background);
  style: |
    ha-card {
        --ha-card-background: var(--card-background);
        --primary-text-color: var(--primary-text-color);
        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 (Al posto dell'HEADER nella versione light) *
  #################################################################
  - 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(--dark-primary-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
  #################################################################
  ## FOLDS
  #################################################################
  - type: conditional # CARDS VISUALIZZATE SOLO SE INPUT BOOLEAN NATURAL EVENTS ON!!
    conditions:
      - entity: input_boolean.natural_events
        state: "on"
    card:
      type: vertical-stack
      cards:
        - type: entities # CONTENITORE MENU Impostazioni fold
          card_mod:
            style: |
              div#states.card-content {padding-block-end: 0; padding-block-start: 0;}
              ha-card {background:none; border-radius: 0px; box-shadow: none;}
          entities:
            - type: custom:auto-entities # MENU Impostazioni fold
              show_empty: false
              sort:
                method: domain
              filter:
                include:
                  - attributes:
                      package: "Natural_events*" # 🌍
                    options:
                      state_color: true
                exclude:
                  - entity_id: input_boolean.natural_events
                  - entity_id: geo_location.*
                  - domain: binary_sensor
                  - domain: group
                  - domain: sensor
                  - domain: script
                  - domain: zone
              card:
                type: custom:fold-entity-row
                head:
                  entity: input_boolean.natural_events
                  tap_action:
                    action: toggle
                  card_mod:
                    style: |
                      :host {
                        {% if is_state('input_boolean.natural_events', 'on') %} 
                        --paper-item-icon-color: var(--paper-item-icon-active-color);
                        {% endif %}
                      }
            - type: custom:fold-entity-row # 1 group.meteoalert
              card_mod:
                style: |
                  #head { 
                    {% if is_state('group.meteoalert', 'on') %}
                    --paper-item-icon-color: var(--paper-item-icon-active-color);
                    {% endif %}
                  }
              # padding: 0 #Allinea icone a sx
              head:
                entity: group.meteoalert
                state_color: true
              group_config:
                state_color: true
                secondary_info: last-updated
                card_mod:
                  style: |
                    :host {
                      {% set color = {0:'var(--primary-text-color)', 1:'Green', 2:'Yellow', 3:'Orange', 4:'Red'} %}
                      color: {% if is_state_attr(config.entity,'integration', 'dpc') %} {{color[state_attr(config.entity, 'level')|int(0)]}}
                              {% elif 'binary_sensor.meteoalarm' in config.entity %} 
                                {{state_attr('binary_sensor.global_natural_alert','meteoalarm_level')}}
                              {% elif 'burze' in config.entity and states(config.entity) == 'on'%}
                                {% set d = state_attr(config.entity,'distance') %}
                                {% if d %}
                                  {% if d <= 1 %}Red{% elif 1 < d <= 5 %}Orange{% elif 5 < d <= 10 %}Yellow{% else %}Green{% endif %}
                                {% endif %}
                            {% else %}
                            Green
                            {% endif %};
                    }
            - type: custom:fold-entity-row # 2 group.geoalert
              card_mod:
                style: |
                  #head { 
                    {% if is_state('group.geoalert', 'on') %}
                    --paper-item-icon-color: var(--paper-item-icon-active-color);
                    {% endif %}
                  }
              head:
                entity: group.geoalert
                state_color: true
              group_config:
                state_color: true
                secondary_info: last-updated
                card_mod:
                  style: |
                    :host {
                        {% set color = {0:'var(--primary-text-color)', 1:'Green', 2:'Yellow', 3:'Orange', 4:'Red'} %}
                        color: {% if is_state_attr(config.entity,'integration', 'dpc') %} {{color[state_attr(config.entity, 'level')|int(0)]}} 
                                {% elif 'meteoalarm' in config.entity %} {{state_attr('binary_sensor.global_natural_alert','meteoalarm_level')}}
                                {% elif 'quake' in config.entity and states('binary_sensor.lastquake') == 'on' %} {{color[state_attr('binary_sensor.lastquake', 'level')|int(0)]}}
                              {% else %}
                                Green
                              {% endif %};
                        {% if 'gdacs' in config.entity and states(config.entity) > '0' %} --paper-item-icon-color: var(--paper-item-icon-active-color);{% endif %}
                    }
  #################################################################
  ## * BUTTONS MAPS (AUTO-ENTITIES SENSORS ON Escluso dalla light) *
  #################################################################
  - type: conditional # CARDS VISUALIZZATE SOLO SE INPUT BOOLEAN NATURAL EVENTS OFF!!
    conditions:
      - entity: input_boolean.natural_events
        state: "off"
    card:
      type: custom:paper-buttons-row
      # card_mod:
      #   style: |
      #     ha-card { background: none; border-radius: 0px; box-shadow: none; }
      #     div#states.card-content {padding-block-end: 0; padding-block-start: 0;}
      buttons:
        - entity: input_boolean.natural_events
          layout: icon
          icon: mdi:information-variant
          # name: Info
          style:
            button:
              color: var(--state-icon-color)
            ripple:
              color: "{{state_attr('binary_sensor.global_natural_alert','level')}}"
        - entity: group.natural_events
          layout: icon|name
          name: Map
          icon: mdi:image-off
          style:
            button:
              color: var(--state-icon-color)
            ripple:
              color: "{{state_attr('binary_sensor.global_natural_alert','level')}}"
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.geo_map, input_select.meteo_map, input_select.meteo_iframe
              option: Nessuna
        - entity: input_select.geo_map
          layout: icon|name
          name: Geo
          tap_action:
            action: call-service
            service: input_select.select_next
            service_data:
              entity_id: input_select.geo_map
          double_tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: Nessuna
              entity_id: input_select.geo_map
          style:
            button:
              color: var(--state-active-color)
            ripple:
              color: "{{state_attr('binary_sensor.global_natural_alert','level')}}"
          state_styles:
            nessuna:
              button:
                color: var(--state-icon-color)
        - entity: input_select.meteo_map
          layout: icon|state
          style:
            button:
              color: var(--state-active-color)
            ripple:
              color: "{{state_attr('binary_sensor.global_natural_alert','level')}}"
          state:
            case: first
          state_styles:
            nessuna:
              button:
                color: var(--state-icon-color)
          state_text:
            nessuna: Meteo
            temperatura nuvole infrared: Infrared
            nuvole infrared: Notte
            nuvole e sole: Giorno
            pioggia: Pioggia
            neve: Neve
            il meteo: Il meteo
            burze: Burze
            burze nord ovest: Burze NO
            burze nord est: Burze NE
            burze sud ovest: Burze SO
            burze sud est: Burze SE
            wwwlln: WWLLN
          tap_action:
            action: call-service
            service: input_select.select_next
            service_data:
              entity_id: input_select.meteo_map
          double_tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: Nessuna
              entity_id: input_select.meteo_map
        - entity: input_select.meteo_iframe
          layout: icon|state
          name: I-Frame
          state:
            case: first
          state_text:
            nessuna: I-Frame
            windy alert: Alert
            dpc radar: DPC Radar
            dpc bollettino criticità: Criticità
            dpc vigilanza meteo: Vigilanza
            eumet: EUMET
            blitzortung: Blitz
            radareu: Radareu
            volcanodiscovery: Vulcani
          tap_action:
            action: call-service
            service: input_select.select_next
            service_data:
              entity_id: input_select.meteo_iframe
          double_tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: Nessuna
              entity_id: input_select.meteo_iframe
          style:
            button:
              color: var(--state-active-color)
            ripple:
              color: "{{state_attr('binary_sensor.global_natural_alert','level')}}"
          state_styles:
            nessuna:
              button:
                color: var(--state-icon-color)

  #################################################################
  ## ROOT -> FOLDS + CARDS - SECONDA PARTE
  #################################################################
  - type: conditional # CARDS VISUALIZZATE SOLO SE INPUT BOOLEAN NATURAL EVENTS ON!!
    conditions:
      - entity: input_boolean.natural_events
        state: "on"
    card:
      type: vertical-stack
      cards:

        #################################################################
        ## INFO - Da qui in poi uguale per light e picture menu
        #################################################################
        #################################################################
        ## BURZE
        #################################################################
        - type: markdown
          card_mod:
            style: |
              ha-card {background: none; border-radius: 0px; box-shadow: none;}
              ha-markdown {padding-bottom: 0px !important}
          content: >
            {% set color = 'Gold' %}
            {% set burze = 'binary_sensor.burze_storms_nearby' %}
            {#
            {% if  states(burze) != 'on' %}
            {% set alert_type = {'':'info', 'off':'success', 'unavailable':'warning', 'unknown':'error'} %}
            <ha-alert title="Burze {{ states(burze) }}" alert-type='{{ alert_type[states(burze)] }}'></ha-alert>
            {% else %}
            #}

            <details {{'open' if is_state(burze, 'on') else ''}}>
              <summary> <b><a href="https://burze.dzis.net">BURZE</a></b> </summary>
            
            <ha-alert title="Temporale" alert-type='warning'>


            {{ state_attr(burze, 'number') }} 
            <font color={{color}}/><ha-icon icon="mdi:flash"></ha-icon></font>
            in {{ state_attr(burze, 'period') }} minuti.
            Il più vicino è caduto a {{ state_attr(burze, 'distance') }} Km
            a {{ state_attr('binary_sensor.global_natural_alert','burze_direction') }}
            da casa.


            [Burze](https://burze.dzis.net) ~ [Blitzortung](http://map.blitzortung.org/#5.11/43.00/13.00)
            </ha-alert>
            
            </details>

            {# {% endif %} #}

        #################################################################
        ## DPC
        #################################################################
        - type: markdown
          card_mod:
            style: |
              ha-card {background: none; border-radius: 0px; box-shadow: none;}
              ha-markdown {padding: 0px 16px !important}

          # card_size: 4
          content: >
            {#- Nota Ciclo for se si hanno più sensori dpc per altri luoghi... -#}
            {% set dpc_entities = integration_entities("dpc")| select('match','sensor')|list %}
            {% set color = {0:'White', 1:'Green', 2:'Gold', 3:'Orange', 4:'Red'} %}
            {% set days_map = {'today':'Oggi.', 'tomorrow':'Domani.', 'aftertomorrow': 'Dopodomani.'} %}
            {% set alert_type = {0:'info', 1:'success', 2:'warning', 3:'warning', 4:'error', 5:'error'} %}
            {% set web_crit = 'https://mappe.protezionecivile.gov.it/it/mappe-rischi/bollettino-di-criticita' %}
            {% set web_vigi = 'https://mappe.protezionecivile.it/it/mappe-rischi/bollettino-di-vigilanza' %}
            {% set web_dpc = 'https://www.protezionecivile.gov.it/it/'  %}
            {% set web_radar = 'https://mappe.protezionecivile.it/it/mappe-rischi/piattaforma-radar' %}

            <details open>
              <summary> <b><a href="{{web_dpc}}">PROTEZIONE CIVILE</a> - <a href="{{web_crit}}">Criticità</a>
              - <a href="{{web_vigi}}">Vigilanza meteo</a> </b> </summary>

            {% for entity in dpc_entities if 'alert' in entity and states(entity)|int(0) > 0 %}

            <ha-alert title="{{ state_attr(entity, 'friendly_name') }}" alert-type="{{alert_type[states(entity)|int(0)]}}">

            <details {{'open' if states(entity)|int(0) > 1 else ''}}>
              <summary> <b>{{ state_attr(entity, 'zone_name') }}</b> </summary>

            {% for day in ['today', 'tomorrow'] %}
            {% set d = state_attr(entity, day) %}
            {% set events = state_attr(entity, 'events_' + day) %}
            {% if d and d.get('level', 0) > 0 %} 
            {# ##### ZONA: {{ d['zone_name'] }} #}

            <table><tr>
            <td> <font color="{{ color.get(d['level']) }}"/> 
                <ha-icon icon="{{ 'mdi:numeric-' ~ d['level'] ~ '-box'}}"/></ha-icon> </td>
            <td> <b>{{ days_map[day] }}</b> {{d['info']}} {{d['alert']}}</font>  </td>
              </tr></table>
            
            {% endif %}
            {% if events %}
            {% for ev in events %}

            <table><tr>
            <td> <font color="{{ color.get(ev['level']) }}"/> <ha-icon icon="{{ 'mdi:numeric-' ~ ev['level'] }}"/> </td>
            <td> <font color="{{ color.get(ev['level']) }}"/> <ha-icon icon="{{ ev['icon'] }}"/> </td>
            <td> {{ ev['alert'] }} {{ ev['info'] }} criticità per rischio {{ ev['risk'] }} </td>
            </tr></table>

            {% endfor %} {% endif %} {% endfor %}

            </details>

            </ha-alert>

            {% endfor %}

            <!--
            </details>

            <details open>
              <summary> <b><a href="{{web_dpc}}">PROTEZIONE CIVILE</a> - <a href="{{web_vigi}}">VIGILANZA METEO</a>
              </b> </summary>
            -->

            {% set color = {0:'White', 1:'Green', 2:'Gold', 3:'Orange', 4:'Red', 5: 'BlueViolet'} %}
            {# set color_v1 = {0:'#FFFFFF', 1:'#008000', 2:'#C3FFFE', 3:'#50FFFF', 4:'#508BFF', 5: '#A040FF'} #}
            {% set color_v2 = {0:'White', 1:'Green', 2:'LightCyan', 3:'BabyBlue', 4:'CornflowerBlue', 5: 'BlueViolet'} %}
            {% set day = {'today':'Oggi ', 'tomorrow':'Domani ', 'aftertomorrow': 'Dopodomani '} %}
            {% for entity in dpc_entities if 'vigilance' in entity and states(entity)|int(0) > 0 %}
            {% set open = (states(entity)|int(0) > 1 or state_attr(entity, 'total_phenomena')|int(0) > 0) %}

            <ha-alert title="{{ state_attr(entity, 'friendly_name') }}" alert-type="{{alert_type[states(entity)|int(0)]}}">

            <details {{ iif(open, 'open', '') }}>
              <summary> {{state_attr(entity, 'zone_name')}} </summary>

            {% for status in ['today', 'tomorrow','aftertomorrow'] %}
            {% set v = state_attr(entity, status) %}
            {# if (v and v.get('level', 0) > 1)  or v.get('phenomena', []) #}
            {% if v and v.get('level', 0) > 0 %} 

            <table><tr>
              <td> <font color="{{ color.get(v['level']) }}"/> <ha-icon icon="{{ v['icon'] }}"/></ha-icon> </font> </td>
              <td> <big><b>{{ day[status] }}</b></big> <small>quantitativi previsti </small> <b>{{ v['precipitation'] }}</b> </td>
            </tr></table>                

            {% for d in v.get('phenomena', []) %}

            <table><tr>
              <td> &emsp; </td>
              <td> <ha-icon icon="{{ d['icon'] }}"/></ha-icon> </td>
              <td> {{ d['event'] }} {{ d['value'] }} [{{ d['distance'] }} Km <small>{{ d['direction'] }}]</small> </td>
            </tr></table>

            {% endfor %} {% endif %} {% endfor %}
            
            </details>

            </ha-alert>

            {% endfor %}

            </details>

        #################################################################
        ## METEOALARM
        #################################################################
        - type: markdown
          card_mod:
            style: |
              ha-card {background: none; border-radius: 0px; box-shadow: none;}
              ha-markdown {padding: 0px 16px !important}
          content: >-
            {% set global = 'binary_sensor.global_natural_alert' %}
            {% set meteoalarm = 'binary_sensor.meteoalarm' %}
            {% set alert_type = {'White':'info', 'Green':'success', 'Gold':'warning', 'Orange':'warning', 'Red':'error'} %}
            {% set days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
            {% set start = as_timestamp(state_attr(meteoalarm, 'effective'),0) %}
            {% set end = as_timestamp(state_attr(meteoalarm, 'expires'),0) %}

            <details {{'open' if is_state(meteoalarm, 'on') else ''}}>
              <summary> <b><a href="https://meteoalarm.org/it">{{state_attr(meteoalarm, 'friendly_name')}}</a></b>
              </summary>
            
            <ha-alert title="{{state_attr(meteoalarm, 'headline')}}" alert-type="{{alert_type[state_attr(global,'meteoalarm_level')]}}">

            <br><font color="{{state_attr(global,'meteoalarm_level')}}">
            <ha-icon icon="{{state_attr(global, 'meteoalarm_level_icon')}}"></ha-icon>
            <ha-icon icon="{{state_attr(global, 'meteoalarm_type_icon')}}"></ha-icon></font>
            <b>{{ state_attr(meteoalarm, 'urgency')|upper }}</b> {{state_attr(meteoalarm, 'event')}}
            <br><font>Da {{days[start|timestamp_custom('%w')|int(0)]}}{{start|timestamp_custom(' %d alle %H:%M')}}
            a {{days[end|timestamp_custom('%w')|int(0)]}}{{end|timestamp_custom(' %d alle %H:%M')}}</font><br><br>
            <big><b>{{(state_attr(meteoalarm, 'description')|default('',true)).split('(DISCLAIMER')[0]}}</big></b><br><br>
            <i>{{state_attr(meteoalarm, 'instruction')}}</i><br>

            <!-- [MeteoAlarm](https://meteoalarm.org/it) -->
            <!-- {{state_attr(meteoalarm, 'web')|replace('http://','https://')}} -->

            </ha-alert>
            </details>

        #################################################################
        ## LASTQUAKE
        #################################################################
        - type: markdown
          entity_id:
            - binary_sensor.lastquake
          card_mod:
            style: |
              ha-card {background: none; border-radius: 0px; box-shadow: none;}
              ha-markdown {padding: 0px 16px !important}
          content: >-
            {% set ingv_entities = integration_entities("ingv_centro_nazionale_terremoti") %}
            {% set entityid = ingv_entities | select('match','geo_location') | max | default(false) %}

            {# IF GEO LOCATION START ->> #}
            {% if entityid %} 
            {% set alert_type = {0:'info', 1:'success', 2:'warning', 3:'warning', 4:'error'} %}
            {% set code = {0:'White', 1:'Green', 2:'Gold', 3:'Orange', 4:'Red'} %} 
            {% set url = "http://shakemap.rm.ingv.it/shake4/data/{}/current/products/{}.jpg" %}
            {# set url2 = "http://shakemap.ingv.it/shake4/data/{}/current/products/{}.jpg" #} 
            {% set openmap = "https://www.openstreetmap.org/?mlat={}&mlon={}#map=12/{}/{}" %}
            {% set id = state_attr(entityid, 'event_id') %} 
            {% set lat = state_attr(entityid, 'latitude') %} 
            {% set long = state_attr(entityid, 'longitude') %} 
            {% set depth = state_attr(entityid, 'depth')|default(none) %}
            {% set magnitudo = state_attr(entityid, 'magnitude')|float(default=0) %} 
            {% set utc = as_timestamp(state_attr(entityid, 'publication_date'),0) %} 
            {# MACRO MAGNITUDE LEVEL #}
            {% macro mag(m) -%}
              {% if 0 <= m < 2 %}0{% elif 2 <= m < 3 %}1{% elif 3 <= m < 4 %}2
              {% elif 4 <= m < 6 %}3{% else %}4{% endif %}
            {% endmacro %}
            {% set level = mag(magnitudo)|int(0) %}
            {% set alert = alert_type[level] %}
            {# MACRO BOLD TEXT FORMAT and COLOR according to the warning LEVEL #}
            {%- macro form(data, color=code[level]) -%}
              <font color="{{color}}">**{{data}}**</font>
            {%- endmacro -%}

            <details {{'open' if entityid else ''}}>
              <summary> <b><a href="http://terremoti.ingv.it/">INGV </a></b></summary>

            <ha-alert title="TERREMOTO " alert-type={{alert}}>

            <br>{{ utc|timestamp_custom('%H:%M:%S del %d-%m-%Y') if utc is not none else 0 }}
            

            Un terremoto di magnitudo {{ form(magnitudo) }}
            è avvenuto nella zona: 
            [{{ state_attr(entityid, 'region') }}]({{ openmap.format(lat,long,lat,long) }})
            a {{ form(states(entityid)) }} km da casa,
            con coordinate epicentrali {{ lat }}, {{ long }},
            ad una profondità di {{ form(depth) }} Km.


            [INGV](http://terremoti.ingv.it/) ~ 
            [Hai Sentito Il Terremoto?](http://www.haisentitoilterremoto.it/) 

            </details>

            </ha-alert>

            {# IMAGE AND LINK #}
            {% if magnitudo >= 3 %}

            [Intensity]({{url.format(id,'intensity')}}) ~ 
            [PGA]({{url.format(id,'pga')}}) ~ [PGV]({{url.format(id,'pgv')}}) ~ 
            [PSA0]({{url.format(id,'psa0p3')}}) ~ [PSA1]({{url.format(id,'psa1p0')}}) ~ 
            [HSIT](http://eventi.haisentitoilterremoto.it/{{id}}/{{id}}_mcs.jpg)


            {% if is_state('binary_sensor.download_file', 'on') %}

            <a href="http://shakemap.rm.ingv.it/shake4/view.html?eventid={{id}}"><img
            src="/local/hassiohelp/downloads/lastquake.jpg?t='{{now().timestamp()}}'"></a>
            {% else %} 
            <a  href="http://shakemap.rm.ingv.it/shake4/view.html?eventid={{id}}"><img
            src="http://shakemap.rm.ingv.it/shake4/data/{{id}}/current/products/pga.jpg"></a>
            {% endif %} {% endif %}

            <!-- <center> <a href="http://terremoti.ingv.it/"> <img
            src="https://www.ingv.it/images/INGV_Acronimo_50.png" width="50" ></a>-->
            <!-- [<img src="https://www.hsit.it/images/favicon.png"/> 
            Hai Sentito Il Terremoto](http://www.haisentitoilterremoto.it/) -->

            {# ELSE SENSOR STATUS #}
            {% else %}
            {% for entity in ingv_entities %}
            <ha-alert title="{{ state_attr(entity, 'friendly_name') }}
            {{ state_attr(entity, 'status')|slugify(separator=' ') }} - {{ states(entity) }}
            " alert-type="{{ iif('OK' in state_attr(entity, 'status'), 'info', 'warning', 'error') }}"></ha-alert>
            {% endfor %}
            {% endif %}

        - type: custom:auto-entities # CONDITIONAL ULTIMI {count} TERREMOTI
          show_empty: false
          sort:
            {
              attribute: publication_date,
              method: attribute,
              reverse: true,
              count: 5,
              first: 0,
            }
          filter:
            include:
              - entity_id: geo_location.*
                attributes:
                  source: ingv_centro_nazionale_terremoti
          card:
            type: entities
            entity_id: this.entity_id
            card_mod:
              style: |
                ha-card {background: none; border-radius: 0px; box-shadow: none;}
                div#states.card-content {padding-block-end: 0; padding-block-start: 0;}

        #################################################################
        ## GDACS
        #################################################################
        - type: markdown
          card_mod:
            style: |
              ha-card {background: none; border-radius: 0px; box-shadow: none;}
              ha-markdown {padding-top: 0px !important}
          content: >-
            {# Set Last days to show #}
            {% set last_days = 7 %}
            {% set gdacs_entities = integration_entities("gdacs")| select('match','geo_location')|list %}
            {% set alert_type = {'Green':'info', 'Green':'success', 'Orange':'warning', 'Red':'error'} %}
            {% for geo in gdacs_entities if utcnow() < (state_attr(geo, 'from_date')) + timedelta(days = last_days) %}
            {% set alert = alert_type[state_attr(geo, 'alert_level')] %}

            <details open>
              <summary> <b><a href="https://gdacs.org/">GDACS </a></b></summary>

            <ha-alert title="GDACS - {{ state_attr(geo, 'friendly_name') }}" alert-type={{alert}}>


            <font color="{{ state_attr(geo, 'alert_level') }}"><ha-icon icon="{{ state_attr(geo, 'icon') }}"></ha-icon> **{{ state_attr(geo, 'friendly_name') }}</font>**

            **Distanza: <font color={{ state_attr(geo, 'alert_level') }}> {{ states(geo) }}</font> km**

            **Descrizione:** {{ state_attr(geo, 'description') }}

            **Allerta:** {{ state_attr(geo, 'severity') }}

            **population:** {{ state_attr(geo, 'population') }}

            **Inizio:** {{ state_attr(geo, 'from_date').strftime("%d-%m-%Y %H:%M") }}
            **Fine:** {{ state_attr(geo, 'to_date').strftime("%d-%m-%Y %H:%M") }}
            
            **Settimane:** {{ state_attr(geo, 'duration_in_week') }} population


            [GDACS](https://gdacs.org/)

            </details>

            </ha-alert>
            
            {% endfor %} 

            <!-- https://gdacs.org/report.aspx?eventid=1014695&episodeid=28&eventtype=DR -->

  #################################################################
  ## ROOT -> MAPS
  #################################################################
  - type: custom:mod-card # margin: -16px;
    card_mod:
      style:
        hui-vertical-stack-card$: |
          :host {
            --stack-card-margin: 8px 16px 16px;
          }
    card:
      type: vertical-stack
      cards:

      #----------------- 
      - type: conditional # METEO
        conditions:
          - entity: input_select.meteo_map
            state_not: Nessuna
        card:
          type: picture-entity
          title: Nuvole
          entity: input_select.meteo_map
          tap_action:
            action: call-service
            service: input_select.select_next
            service_data:
              entity_id: input_select.meteo_map
          hold_action:
            action: call-service
            service: input_select.select_previous
            service_data:
              entity_id: input_select.meteo_map
          state_image:
            Nuvole e Sole: https://api.sat24.com/animated/IT/visual/3/
            Nuvole Infrared: https://api.sat24.com/animated/IT/infraPolair/3/
            Temperatura Nuvole Infrared: https://www.meteo60.fr/satellites/animation-satellite-ir-france.gif
            Pioggia: https://api.sat24.com/animated/IT/rainTMC/3/
            Neve: https://api.sat24.com/animated/EU/snow/3/
            Il Meteo: http://cdn-radar.ilmeteo.it/italy.gif
            Burze: https://burze.dzis.net/italia_fulmine_lebhaft.gif
            Burze Nord Ovest: https://burze.dzis.net/italia_fulmine_lebhaft_gruppi_nw.gif
            Burze Nord Est: https://burze.dzis.net/italia_fulmine_lebhaft_gruppi_ne.gif
            Burze Sud Ovest: https://burze.dzis.net/italia_fulmine_lebhaft_gruppi_sw.gif
            Burze Sud Est: https://burze.dzis.net/italia_fulmine_lebhaft_gruppi_se.gif
            WWLLN: https://wwlln.net/WWLLN_movies/Movie_of_Lightning_in_EurAfrica_BIG.gif
          entities:
            - entity: input_select.meteo_map

      - type: conditional # GEO
        conditions:
          - entity: input_select.geo_map
            state: Posizione Geografica
        card:
          type: map
          # entities:
          #   - entity: person.caio
          geo_location_sources:
            - all
          dark_mode: false
          default_zoom: 8
          aspect_ratio: 75% # 16:9
          hours_to_show: 72

      #################################################################
      ## MAPS IFRAME
      #################################################################
      - type: conditional
        conditions:
          - entity: input_select.meteo_iframe
            state: Windy Alert
        card:
          type: iframe
          aspect_ratio: 100%
          url: >-
            https://embed.windy.com/embed2.html?lat=42.000&lon=12.000&zoom=5
            &level=surface&overlay=capAlerts&menu=&type=map&location=coordinates
            &detail=&detailLat=42.000&detailLon=12.000

      - type: conditional # AM - Region
        conditions:
          - entity: input_select.meteo_iframe
            state: AM Ita
        card:
          type: iframe
          aspect_ratio: 100%
          url: https://www.meteoam.it/it/home

      - type: conditional # DPC RADAR
        conditions:
          - entity: input_select.meteo_iframe
            state: DPC Radar
        card:
          type: iframe
          aspect_ratio: 100%
          url: https://radar.protezionecivile.it/#/pages/dashboard?zoom=5.75
          ###https://mappe.protezionecivile.gov.it/it/mappe-rischi/piattaforma-radar
          # http://www.bulkdachecker.com/url-extractor/

      - type: conditional # DPC ALERT - CRITICITA
        conditions:
          - entity: input_select.meteo_iframe
            state: DPC Bollettino Criticità
        card:
          type: custom:config-template-card
          entities:
            - sensor.dpc_alert
          card:
            type: iframe
            aspect_ratio: 100%
            url: >-
              ${const d = new Date(); 
              const dpc_d = new Date(String(states['sensor.dpc_alert'].attributes.publication_date));
              var fase = (dpc_d.getDate() === d.getDate()) ? 'today' : 'tomorrow';
              'https://servizio-mappe.protezionecivile.it/#/view/dashboard?x=11.756&y=41.495&
              zoom=5.8&basemap=BING_AERIAL&appname=BollettinodiCriticità&file=
              https://raw.githubusercontent.com/pcm-dpc/DPC-Bollettini-Criticita-Idrogeologica-Idraulica/master/files/'
              +states['sensor.dpc_alert'].attributes.id+'.json&hidden=info,minimap&fase=' + fase}
              
      - type: conditional # DPC VIGILANZA METEO
        conditions:
          - entity: input_select.meteo_iframe
            state: DPC Vigilanza Meteo
        card:
          type: custom:config-template-card
          entities:
            - sensor.dpc_vigilance
          card:
            type: iframe
            aspect_ratio: 100%
            url: >-
              ${const d = new Date(); 
              const dpc_d = new Date(String(states['sensor.dpc_vigilance'].attributes.publication_date));
              var fase = (dpc_d.getDate() === d.getDate()) ? 'today' : 'tomorrow';
              'https://servizio-mappe.protezionecivile.it/#/view/dashboard?x=11.756&y=41.495&
              zoom=5.8&basemap=OPEN_STREET_MAP&appname=Bollettino di Vigilanza&file=
              https://raw.githubusercontent.com/pcm-dpc/DPC-Bollettini-Vigilanza-Meteorologica/master/files/'
              +states['sensor.dpc_vigilance'].attributes.id+'.json&hidden=minimap,info&fase=' + fase}
            # #hidden=hidden=minimap,info,switch <<--- 

      - type: conditional # BLITZORTUNG
        conditions:
          - entity: input_select.meteo_iframe
            state: "Blitzortung"
        card:
          type: iframe
          aspect_ratio: 100%
          url: https://map.blitzortung.org/#5.11/42.5/12.51 # Il Centro geografico d'Italia

      - type: conditional # RADAREU
        conditions:
          - entity: input_select.meteo_iframe
            state: Radareu
        card:
          type: iframe
          aspect_ratio: 100%
          url: http://www.radareu.cz/?lng=uk&core

      - type: conditional # EUMET
        conditions:
          - entity: input_select.meteo_iframe
            state: EUMET
        card:
          type: iframe
          aspect_ratio: 125%
          url: https://cdn.fmi.fi/demos/eumetnet-web-site-radar-animator/

      - type: conditional # VOLCANODISCOVERY
        conditions:
          - entity: input_select.meteo_iframe
            state: Volcanodiscovery
        card:
          type: iframe
          aspect_ratio: 100%
          url: https://earthquakes.volcanodiscovery.com/?L=12&zoom=6&lat=41&lon=13&minMag=3