title: Home
icon: mdi:view-dashboard
path: home
layout:
  grid-template-columns: 50% 50%
  grid-template-rows: 320px 80px 80px
  grid-template-areas: |
    "left right"
    "button button"
    "footer footer"
cards:
  - type: grid
    columns: 1
    square: false
    view_layout:
      grid-area: left
    cards:
      - type: custom:gap-card
        height: 80
      - type: custom:button-card
        tap_action:
          action: call-service
          service: |
            [[[
              this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
              return none;
            ]]]
        hold_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              dismissable: true
              autoclose: false
              timeout: 5000
              content:
                type: custom:mod-card
                card_mod:
                  style: |
                    ha-card {
                      height:480px;
                      border-radius: 30px;
                      padding: 5px;
                      border: solid 5px var(--sidebar);
                      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);
                    }
                card:
                  show_name: true
                  show_icon: true
                  show_label: true
                  label: chiude Home Assistant
                  type: custom:button-card
                  tap_action:
                    action: url
                    url_path: app://l.l
                  name: Torna ad Android
                  icon: mdi:android
                  styles:
                    card:
                      - border: solid 5px var(--sidebar);
                      - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);
                      - border-radius: 30px
                      - height: 390px
                      - background: black
                      - opacity: 80%
                    name:
                      - color: white
                      - font-size: 24px
                      - font-weight: 500
                    label:
                      - color: white
                      - font-size: 14px
                      - font-weight: 300
                    icon:
                      - color: yellow
              right_button: chiudi
              right_button_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.close_popup
                  deviceID: this
        name: |
          [[[ return states['sensor.giorno'].state  + ",
" +
          states['sensor.mese'].state]]]
        label: |
          [[[ return states['sensor.time'].state ]]]
        show_label: true
        styles:
          grid:
            - grid-template-areas: "\"l\" \"n\""
            - grid-template-columns: 1fr
            - grid-template-rows: min-content min-content
          card:
            - position: absolute
            - height: 200px
            - background: none
            - border: none
            - padding: 0 20px
            - margin-top: "-10px"
            - "--button-card-ripple-press-opacity": 0
          name:
            - justify-self: start
            - text-align: left
            - align-self: start
            - font-size: 16px
            - opacity: 0.7
            - font-weight: 300
          label:
            - justify-self: start
            - font-size: 66px
            - font-weight: 300
  - square: false
    type: grid
    columns: 1
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: input_number.nsp_meteo
            state: "1.0"
        card:
          type: custom:button-card
          entity: sensor.meteo_icon_orario
          show_icon: false
          show_name: false
          show_label: true
          tap_action:
            action: call-service
            service: input_number.set_value
            target:
              entity_id: input_number.nsp_meteo
            data:
              value: 2
          label: |
            [[[ return entity.attributes.desc ]]]
          styles:
            grid:
              - grid-template-areas: " \"temp temp\" \"feellike feellike\"\"l l\""
              - grid-template-columns: 1fr min-content
              - grid-template-rows: min-content min-content max-content
            card:
              - position: absolute
              - top: 30px
              - right: "-6px"
              - background: none
              - border: none
              - height: 330px
              - "--button-card-ripple-press-opacity": 0
            label:
              - justify-self: end
              - margin-right: 8px
              - align-self: start
              - text-align: right
              - font-size: 16px
              - opacity: 0.7
              - font-weight: 300
              - text-transform: capitalize
            custom_fields:
              icon:
                - position: absolute
                - top: 0px
                - right: "-100px"
                - margin-top: "-55px"
                - justify-self: end
                - align-self: center
                - padding-right: 2px
              temp:
                - padding-top: 70px
                - margin-right: 10px
                - justify-self: end
                - align-self: end
                - font-size: 46px
                - font-weight: 300
              feellike:
                - justify-self: end
                - margin-right: 8px
                - text-align: right
                - align-self: start
                - font-size: 16px
                - opacity: 0.7
                - font-weight: 300
          custom_fields:
            icon: |
              [[[
                return ''
              ]]]
            temp: |
              [[[
                return entity.attributes.temp + '°C'
              ]]]
            feellike: |
              [[[
                return "Percepita:  " + entity.attributes.percepita + '°C'
              ]]]
      - type: conditional
        conditions:
          - condition: state
            entity: input_number.nsp_meteo
            state: "2.0"
        card:
          type: custom:button-card
          entity: sensor.meteo_giornaliero
          show_icon: false
          show_name: false
          tap_action:
            action: call-service
            service: input_number.set_value
            target:
              entity_id: input_number.nsp_meteo
            data:
              value: 1
          styles:
            grid:
              - grid-template-areas: |
                  "icon1 day1 temp1"
                  "icon2 day2 temp2"
                  "icon3 day3 temp3"
                  "icon4 day4 temp4"
                  "icon5 day5 temp5"
              - grid-template-columns: 60px max-content 1fr
              - grid-template-rows: 1fr 1fr 1fr 1fr 1fr
            card:
              - background: none
              - border: none
              - height: 275px
              - padding: 10px
            custom_fields:
              day1:
                - justify-self: start
                - align-self: center
                - font-size: 16px
                - font-weight: 500
                - text-transform: capitalize
                - padding-right: 10px
              temp1:
                - justify-self: end
                - padding-right: 4px
                - font-size: 14px
                - font-weight: 400
              icon1:
                - justify-self: center
              day2:
                - justify-self: start
                - align-self: center
                - font-size: 16px
                - font-weight: 500
                - text-transform: capitalize
                - padding-right: 10px
              temp2:
                - justify-self: end
                - padding-right: 4px
                - font-size: 14px
                - font-weight: 400
              icon2:
                - justify-self: center
              day3:
                - justify-self: start
                - align-self: center
                - font-size: 16px
                - font-weight: 500
                - text-transform: capitalize
                - padding-right: 10px
              temp3:
                - justify-self: end
                - padding-right: 4px
                - font-size: 14px
                - font-weight: 400
              icon3:
                - justify-self: center
              day4:
                - justify-self: start
                - align-self: center
                - font-size: 16px
                - font-weight: 500
                - text-transform: capitalize
                - padding-right: 10px
              temp4:
                - justify-self: end
                - padding-right: 4px
                - font-size: 14px
                - font-weight: 400
              icon4:
                - justify-self: center
              day5:
                - justify-self: start
                - align-self: center
                - font-size: 16px
                - font-weight: 500
                - text-transform: capitalize
                - padding-right: 10px
              temp5:
                - justify-self: end
                - padding-right: 4px
                - font-size: 14px
                - font-weight: 400
              icon5:
                - justify-self: center
          custom_fields:
            day1: |
              [[[
                return helpers.formatDateWeekdayShort(entity.attributes.forecast[1].datetime)
              ]]]
            temp1: |
              [[[
                return entity.attributes.forecast[1].temperature + "° - " + entity.attributes.forecast[1].precipitation + " mm"
              ]]]
            icon1: |
              [[[
                var weather = entity.attributes.forecast[1].condition;
                return ''
              ]]]
            day2: |
              [[[
                return helpers.formatDateWeekdayShort(entity.attributes.forecast[2].datetime)
              ]]]
            temp2: |
              [[[
                return entity.attributes.forecast[2].temperature + "° - " + entity.attributes.forecast[2].precipitation + " mm"
              ]]]
            icon2: |
              [[[
                var weather = entity.attributes.forecast[2].condition;
                return ''
              ]]]
            day3: |
              [[[
                return helpers.formatDateWeekdayShort(entity.attributes.forecast[3].datetime)
              ]]]
            temp3: |
              [[[
                return entity.attributes.forecast[3].temperature + "° - " + entity.attributes.forecast[3].precipitation + " mm"
              ]]]
            icon3: |
              [[[
                var weather = entity.attributes.forecast[3].condition;
                return ''
              ]]]
            day4: |
              [[[
                return helpers.formatDateWeekdayShort(entity.attributes.forecast[4].datetime)
              ]]]
            temp4: |
              [[[
                return entity.attributes.forecast[4].temperature + "° - " + entity.attributes.forecast[4].precipitation + " mm"
              ]]]
            icon4: |
              [[[
                var weather = entity.attributes.forecast[4].condition;
                return ''
              ]]]
            day5: |
              [[[
                return helpers.formatDateWeekdayShort(entity.attributes.forecast[5].datetime)
              ]]]
            temp5: |
              [[[
                return entity.attributes.forecast[5].temperature + "° - " + entity.attributes.forecast[5].precipitation + " mm"
              ]]]
            icon5: |
              [[[
                var weather = entity.attributes.forecast[5].condition;
                return ''
              ]]]
    view_layout:
      grid-area: right
  - square: false
    type: grid
    cards:
      - show_name: true
        show_icon: true
        entity: light.camera
        layout: icon_name
        type: custom:button-card
        styles:
          name:
            - justify-self: start
            - font-size: 20px
            - font-style: Montserrat
            - font-weight: 400
            - opacity: 0.7
          card:
            - height: 70px
            - border-radius: 10px
            - border: none
            - "--button-card-ripple-color": var(--yellow)
            - "--button-card-ripple-press-opacity": 0.4
        tap_action:
          action: navigate
          navigation_path: /dashboard-nspanel/camera
        hold_action:
          action: toggle
        icon: hue:room-bedroom
        name: Camera
        state:
          - value: "on"
            icon: hue:room-bedroom
      - type: custom:button-card
        template: icon-button
        icon: mdi:apps
        variables:
          path: menu
      - show_name: true
        show_icon: true
        entity: binary_sensor.tv_samsung
        layout: icon_name
        type: custom:button-card
        styles:
          name:
            - justify-self: start
            - font-size: 20px
            - font-style: Montserrat
            - font-weight: 400
            - opacity: 0.7
          card:
            - height: 70px
            - border-radius: 10px
            - border: none
            - "--button-card-ripple-color": var(--yellow)
            - "--button-card-ripple-press-opacity": 0.4
        tap_action:
          action: navigate
          navigation_path: /dashboard-nspanel/tv
        hold_action:
          action: call-service
          service: remote.send_command
          target:
            entity_id: remote.broadlink_rm4_camera
          data:
            num_repeats: 1
            delay_secs: 0.4
            hold_secs: 0
            command: power
            device: TV
        icon: mdi:television
        name: TV
    columns: 3
    view_layout:
      grid-area: button
  - square: false
    type: grid
    cards:
      - type: custom:big-slider-card
        card_mod:
          style: |
            {% if is_state('light.luce_camera','on') %}
              #name {font-size:16px;font-weight:500;opacity:0.7}
              #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
              !important;}
              #slider {opacity:0.4 !important; background: var(--brightness) !important;}
            {% else %}
              #name {font-size:16px;font-weight:500;opacity:0.7}
              #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
              !important;}
              #slider {opacity:0.4 !important; background: var(--brightness) !important;}
              #icon {color:white !important;}
            {% endif %}
        entity: light.luce_camera
        name: Luce
        attribute: brightness
        transition: 0.3
        icon: phu:ceiling-lamp
        border_radius: 10px
        show_percentage: true
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: custom:big-slider-card
        card_mod:
          style: |
            {% if is_state('light.comodino','on') %}
              #name {font-size:16px;font-weight:500;opacity:0.7}
              #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
              !important;}
              #slider {opacity:0.4 !important; background: var(--brightness) !important;}
            {% else %}
              #name {font-size:16px;font-weight:500;opacity:0.7}
              #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
              !important;}
              #slider {opacity:0.4 !important; background: var(--brightness) !important;}
              #icon {color:white !important;}
            {% endif %}
        entity: light.comodino
        name: Comodino
        attribute: brightness
        transition: 0.3
        icon: mdi:lamp
        border_radius: 10px
        show_percentage: true
        tap_action:
          action: toggle
        hold_action:
          action: more-info
    columns: 2
    view_layout:
      grid-area: footer
type: custom:grid-layout
background:
  opacity: 50
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image: /api/image/serve/73c7eb64c91eede9394f48923d279bf0/original