type: custom:button-card
name: Soggiorno
icon: mdi:sofa
entity: light.luce_soggiorno
show_state: false
show_label: true
label: |
  [[[
    return Math.round(states['sensor.broadlink_rm4_soggiorno_temperature'].state) + "°C" + "<br>" + Math.round(states['sensor.broadlink_rm4_soggiorno_humidity'].state) + " %";
  ]]]
tap_action:
  action: toggle
double_tap_action:
  action: toggle
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          entity: light.luce_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% elif is_state(entity, 'off') %}
            mdi:lightbulb-outline
            {% else %}
              mdi:lightbulb-alert-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}
              
            {% endif %}
        - type: template
          tap_action:
            action: toggle
          entity: light.lampada_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              hue:floor-shade
            {% else %}
              hue:floor-shade
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}

            {% endif %}
        - type: template
          tap_action:
            action: fire-dom-event
            local_conditional_card:
              action: set
              ids:
                - sb_home: hide
                - sb_vacuum: show
          entity: vacuum.vacky
          icon: mdi:vacuum
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                {% if states('light.luce_soggiorno') == 'on' %}
                  --chip-background: rgba(235, 204, 52, 1);
                {% elif states('light.luce_soggiorno') == 'off' %}
                  --chip-background: rgba(235, 204, 52, 0.3);
                {% else %}
                  --chip-background: rgba(var(--rgb-disabled), 1);
                {% endif %}
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.luce_soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(250, 163, 0, 1)' if is_state('light.lampada_soggiorno', 'on') else 'rgba(250, 163, 0, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.lampada_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(250, 163, 0, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(250, 163, 0, 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.lampada_soggiorno', 'on') }};
                transform-origin: 50% 100%
              }
              @keyframes scan {
                0%, 100% { transform: rotate(10deg); }
                50% { transform: rotate(-10deg); }
              }
          mushroom-template-chip:nth-child(3)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(166, 207, 152, 0.3)' if is_state('vacuum.vacky', 'docked') else 'rgba(166, 207, 152, 1)' }};
                animation: {{ 'ping 2.5s ease-out infinite' if not is_state('vacuum.vacky', 'docked') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(166, 207, 152, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(166, 207, 152, 0);
                }
            .: |
              ha-state-icon {
                animation: {{ 'scan 5s ease-in-out infinite' if not is_state('vacuum.vacky', 'docked') }};
              }
              @keyframes scan {
                0%, 100% { transform: rotate(20deg); }
                50% { transform: rotate(-15deg); }
              }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: more-info
          entity: cover.tapparella
          icon: |
            {% if is_state(entity, 'closed') %}
              mdi:window-shutter
            {% else %}
              mdi:window-shutter
            {% endif %}
          icon_color: black
        - type: template
          tap_action:
            action: more-info
          entity: media_player.echo_show_in_soggiorno
          icon: |
            {% if is_state(entity, 'standby') %}
              phu:echo-show-8-gen-2
            {% else %}
              mdi:speaker
            {% endif %}
          icon_color: |
            {% if not is_state(entity, 'standby') %}
              black
            {% else %}

            {% endif %}
        - type: template
          tap_action:
            action: more-info
          entity: camera.soggiorno
          icon: mdi:cctv
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(137, 207, 239, 1)' if is_state('cover.tapparella', 'open') else 'rgba(137, 207, 239, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('cover.tapparella', 'open') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
            .: |
              ha-state-icon {
                {% if states('cover.tapparella') == 'opening' %}
                animation: open 3s steps(1) infinite;
                {% elif states('cover.tapparella') == 'closing' %}
                animation: close 3s steps(1) infinite;
                {% elif state_attr('cover.tapparella', 'current_position') > 91 %}
                  clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0);
                {% elif state_attr('cover.tapparella', 'current_position') > 71 %}
                  clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0);
                {% elif state_attr('cover.tapparella', 'current_position') > 51 %}
                  clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0);
                {% elif state_attr('cover.tapparella', 'current_position') > 10 %}
                  clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0);
                {% endif %}
              }
              @keyframes open {
                0% { clip-path: inset(0 0 0 0); }
                20%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0); }
                40%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0); }
                60% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0); }
                80% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0); }
              }
              @keyframes close {
                0% { clip-path: inset(0 0 0 0); }
                80%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0); }
                60%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0); }
                40% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0); }
                20% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(219, 145, 79, 0.3)' if is_state('media_player.echo_show_in_soggiorno', 'standby') else 'rgba(219, 145, 79, 1)' }};
                animation: {{ 'ping 1.3s ease-out infinite, beat 1.3s ease-out infinite both;' if not is_state('media_player.echo_show_in_soggiorno', 'standby') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(219, 145, 79, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(219, 145, 79, 1), 0);
                }
              }
              @keyframes beat {
                0% { transform: scale(1); }
                10% { transform: scale(1.1); }
                17% { transform: scale(1.05); }
                33% { transform: scale(1.25); }
                60% { transform: scale(1); }
              }
            .: |
              ha-state-icon {
                animation: {{ 'beat 1.3s ease-out infinite both;' if not is_state('media_player.echo_show_in_soggiorno', 'standby') }};
              }
              @keyframes beat {
                0% { transform: scale(1); }
                10% { transform: scale(1.1); }
                17% { transform: scale(1.05); }
                33% { transform: scale(1.25); }
                60% { transform: scale(1); }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
          mushroom-template-chip:nth-child(3)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(223,130,108, 1)' if not is_state('sensor.agentdvr_soggiorno_persona_rilevata','on') else 'rgba(223,130,108, 0.3)' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
            .: |
              ha-state-icon {
                animation: scan 5s ease-in-out infinite;
                transform-origin: 90% 80%
              }
              @keyframes scan {
                0%, 100% { transform: rotate(20deg); }
                50% { transform: rotate(-15deg); }
              }
styles:
  grid:
    - grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: center
    - position: absolute
    - width: 150px
    - height: 150px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background: "#FFC47E"
    - border-radius: 200px
  icon:
    - width: 60px
    - color: black
    - opacity: "0.6"
  card:
    - height: 200px
    - padding: 17px 3px 17px 17px
    - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: null
  label:
    - min-height: 80px
    - justify-self: start
    - align-self: start
    - font-size: 14px
    - font-weight: 300
    - opacity: "0.7"
state:
  - value: "on"
    styles:
      card:
        - border: solid 5px rgba(255, 196, 126, 1)
  - value: "off"
    styles:
      card:
        - border: solid 5px rgba(255, 196, 126, 0.2)
      img_cell:
        - background: "#FFC47E"
        - opacity: 0.2
  - value: unavailable
    styles:
      card:
        - border: solid 5px rgba(255, 196, 126, 0.2)
      img_cell:
        - background: "#FFC47E"
        - opacity: 0.2