action: call-service
              service: browser_mod.popup
              service_data:
                title: Stäng
                deviceID: this
                style:
                  --ha-card-border-radius: 1em
                  --more-info-header-color: rgba(255,255,255,0.6)
                  background: none
                  box-shadow: none
                  width: calc(400px + 550px)
                card:
                  type: custom:layout-card
                  column_num: 2
                  column_width: [400, 550]
                  layout: vertical
                  cards:
                    - type: custom:hui-vertical-stack-card
                      cards:
                        - type: entities
                          title: Husqvarna Automower
                          show_header_toggle: false
                          style: |
                            ha-card {
                              animation: pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center;
                              box-shadow: none; border-radius: 1em; padding: 0.3em 1.25em 0.4em 0.5em;
                              background: linear-gradient(180deg, rgba(48,52,52,1) 0%, rgba(48,52,52,1) 4.8em, rgba(34,38,39,1) 4.8em, rgba(34,38,39,1) 100%); }
                            .card-header {
                              margin: -0.4em 0 1.4em 0.4em; font-family: sf text; letter-spacing: 0.005em; font-size: 1.5em;}
                            @keyframes pop-in {
                              0% { transform: scale(0.6); opacity: 0; } 20% { opacity: 0; } 100% { transform: scale(1); opacity: 0.9; }}
                          entities:
                          - entity: sensor.froggy_state
                          - entity: sensor.froggy_battery_level
                          - entity: sensor.froggy_next_start


                          - type: custom:hui-horizontal-stack-card
                            style: |
                              #root {
                                justify-content: space-evenly;
                                margin: 3.2em -0.7em 0.7em 0;
                              }
                            cards:

                            - type: custom:button-card
                              icon: mdi:play-pause
                              triggers_update:
                                ['vacuum.froggy']
                              tap_action:
                                action: call-service
                                service: >
                                  [[[ if (states['vacuum.froggy'].state === 'Parked manually' ||
                                  states['vacuum.froggy'].state === 'Paused')
                                  return 'vacuum.start_pause';
                                  else return 'vacuum.stop'; ]]]
                                service_data:
                                  entity_id: vacuum.froggy
                              styles:
                                icon:
                                  [width: 1.8em]
                                card:
                                  [width: 6em]
                              template: icon_action

                            - type: custom:button-card
                              icon: mdi:flash
                              color: '#9da0a2'
                              tap_action:
                                action: call-service
                                service: vacuum.return_to_base
                                service_data:
                                  entity_id: vacuum.froggy
                              template: icon_action

                    - break

                    - type: picture-elements
                      title: Gräsklippning
                      image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
                      style: |
                        ha-card {
                          animation: pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.05s; transform-origin: center;
                          box-shadow: none; border-radius: 1em; padding: 0.3em 1.25em 0.4em 0.5em;
                          background: linear-gradient(180deg, rgba(48,52,52,1) 0%, rgba(48,52,52,1) 4.8em, rgba(34,38,39,1) 4.8em, rgba(34,38,39,1) 100%); }
                        .card-header {
                          margin: -0.4em 0 1.4em 0.4em; font-family: sf text; letter-spacing: 0.005em; font-size: 1.5em;}
                        @keyframes pop-in {
                          0% { transform: scale(0.6); opacity: 0; } 20% { opacity: 0; } 100% { transform: scale(1); opacity: 0.9; }}
                      elements:
                      - type: image
                        entity: device_tracker.automower_l_185103234_184732467
                        camera_image: camera.froggy_location
                        style:
                          top: 20%
                          left: 51%
                          width: 100%