HA: button+popup NO-CARDMOD

###################################################################################
###################################################### SZABLONY CUSTOM-BUTTON-CARD:

button_card_templates:
    #################### wspólne
    default:
      styles:
        card:
        - background-color: var(--card-background-color)
        - background-size: cover
        - border: none
        - margin: none
        - box-shadow: none

    #################### sensor pojedyńczy
    single_sensor:
      show_label: true
      styles:
        card:
        - padding: 4px
        - font-size: 1em
        grid:
        - grid-template-areas: '"n n" "i l"'
        - grid-template-columns: 35% 65%
        - grid-template-rows: 1fr 1fr
        name:
        - align-self: center
        - justify-self: center
        - color: var(--secondary-text-color)
        - padding-bottom: 5px
        icon:
        - color: var(--state-icon-color)
        - width: 50%
        label:
        - align-self: middle
        - justify-self: start
        - font-size: 1.2em
      label: >
        [[[
          var temps = `${entity.state}`;
          var tempu = `${entity.attributes.unit_of_measurement}`;
          return `<span>` + (isNaN(temps) ? '?' : temps) + ` ` + tempu + `</span>`;
        ]]]

    #################### sensor podwójny z dużą ikoną główną
    double_sensor_icon:
      template: single_sensor
      show_label: false
      styles:
        grid:
        - grid-template-areas: '"n n" "i asensor" "i bsensor"'
        - grid-template-columns: 40% 60%
        - grid-template-rows: 1fr 1fr 1fr
        icon:
        - width: 50%
        custom_fields:
          asensor:
          - align-self: start
          - justify-self: start
          - font-size: 1em
          bsensor:
          - align-self: start
          - justify-self: start
      custom_fields:
        asensor: >
          [[[
            var temps = `${entity.state}`;
            var tempu = `${entity.attributes.unit_of_measurement}`;
            var tempi = `${entity.attributes.icon}`;
            return `<ha-icon icon="` + tempi + `" style="width: 1.5em; color: var(--state-icon-color)"></ha-icon> <span>` + ` ` + (isNaN(temps) ? '?' : temps) + (tempu ? tempu : '') + `</span>`;
          ]]]

    #################### sensor podwójny z popupem
    double_sensor_popup:
      template: double_sensor_icon
      tap_action:
        action: fire-dom-event
        browser_mod:
          command: popup
          card:
            type: vertical-stack

###################################################################################
############################################## KOD NA BUTTON Z POPUPEM W LOWELASIE:

#################### gabinet
    - name: Gabinet
      type: custom:button-card
      template: double_sensor_popup
      entity: sensor.2_off_temperature
      icon: mdi:remote-desktop
      aspect_ratio: 2/1
      custom_fields:
        bsensor: >
          [[[
            var temph = states["sensor.2_off_humidity"].state;
            var prefix = `<ha-icon icon="mdi:water-percent" style="width: 1.5em; color: var(`;
            var suffix = `);"></ha-icon> ` + (isNaN(temph) ? '?' : temph) + `%</span>`;
            if (temph >= 40 && temph <= 60) return prefix + `--label-badge-green` + suffix;
            if (temph >= 0 && temph < 40) return prefix + `--label-badge-yellow` + suffix;
            else return prefix + `--label-badge-red` + suffix;
          ]]]
      tap_action:
        browser_mod:
          title: Gabinet
          card:
            cards:
            - type: custom:mini-graph-card
              name: "Temperatura"
              entities:
              - sensor.2_off_temperature
              - entity: sensor.0_cfg_nightime
                color: "#444444"
                show_line: false
                show_points: false
                show_legend: false
                y_axis: secondary
              group: true
              hours_to_show: 48
              points_per_hour: 1
              hour24: true
              decimals: 1
              animate: true
              show:
                points: false
                extrema: true
                fill: fade
              color_thresholds_transition: smooth
              color_thresholds:
              - value: 17
                color: "#00d9d9"
              - value: 22
                color: "#ff8000"
              - value: 27
                color: "#ff2626"
            - type: custom:mini-graph-card
              name: "Wilgotność"
              entities:
              - sensor.2_off_humidity
              - entity: sensor.0_cfg_nightime
                color: "#444444"
                show_line: false
                show_points: false
                show_legend: false
                y_axis: secondary
              group: true
              hours_to_show: 48
              points_per_hour: 1
              hour24: true
              decimals: 1
              animate: true
              show:
                points: false
                extrema: true
                icon_adaptive_color: true
                fill: fade
              color_thresholds_transition: hard
              color_thresholds:
              - value: 0
                color: "#f4b400"
              - value: 40
                color: "#0DA035"
              - value: 60
                color: "#DF4C1E"


###################################################################################
###################################### DODATKOWA KARTA Z WYKRESEM TEMP. NA ZEWNĄTRZ
  - type: horizontal-stack
    cards:
    - name: Na dworze
      type: custom:mini-graph-card
      entities:
      - entity: sensor.0_out_feel_temperature
        name: Odczuwalna
      - entity: sensor.0_out_average_temperature
        name: Temperatura
        show_state: true
        show_graph: false
      - entity: sensor.4_out_humidity
        name: Wilgotność
        show_state: true
        show_graph: false
      - entity: sensor.0_cfg_nightime
        color: "#444444"
        show_line: false
        show_points: false
        show_legend: false
        y_axis: secondary
      show:
        legend: false
        points: false
      tap_action:
        action: fire-dom-event
        browser_mod:
          command: popup
          title: Pogoda
          card:
            #################### pogoda popup
            type: vertical-stack
            cards:
            - type: custom:weather-card
              entity: weather.0_wth_summary
              current: true
              details: true
              forecast: true
              hourly_forecast: false
              number_of_forecasts: 5
            - name: "Średnia 3-dniowa"
              type: custom:mini-graph-card
              entities:
              - sensor.0_out_average_3d_temperature
              - entity: sensor.0_cfg_nightime
                color: "#444444"
                show_line: false
                show_points: false
                show_legend: false
                y_axis: secondary
              group: true
              hours_to_show: 168
              height: 100
              points_per_hour: 1
              hour24: true
              decimals: 1
              animate: true
              show:
                points: false
                extrema: false
                fill: fade
              color_thresholds_transition: smooth
              color_thresholds:
              - value: 13
                color: "#00d9d9"
              - value: 18
                color: "#ff8000"
              - value: 20
                color: "#ff2626"
            - type: custom:sun-card
              language: pl
            - type: entities
              show_header_toggle: false
              entities:
              - sensor.0_out_season
              - binary_sensor.0_out_heating
              - sensor.0_out_max_24h_temperature
              - sensor.0_out_min_24h_temperature
      font_size: 80
      align_icon: left
      icon: mdi:home-group
      hours_to_show: 24
      hour24: true
      decimals: 1
      animate: true
      color_thresholds:
      - value: -10
        color: "#2a4a96"
      - value: -5
        color: "#057ac2"
      - value: 0
        color: "#13aaec"
      - value: 5
        color: "#85c8f3"
      - value: 10
        color: "#d1e18d"
      - value: 15
        color: "#ffe700"
      - value: 20
        color: "#eab856"
      - value: 25
        color: "#df915d"
      - value: 30
        color: "#d2694b"
      - value: 35
        color: "#ad352e"