type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Kies hier je standaard zender
        icon: mdi:music
        entity: media_player.ruimte1
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                margin: 10px;
              }
            mushroom-shape-icon$: |
              .shape {
              margin-top: 0px;
              }
            .: |
              ha-card {
                height: 55px !important;
                box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
                      }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: >-
              {{ states('input_text.persoon1_radiostations').split(',')[0]
              |default('') | title}}
            tap_action:
              action: call-service
              service: script.audio_optielijst
              service_data:
                option: ruimte1.1
            icon: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[0] %}

              {% if s is defined and s != '' %}
                mdi:volume-high
              {% else %}
                mdi:volume-off
              {% endif %}
            icon_color: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[0] %}

              {% if s is defined and s != '' %}
                {{ states("input_text.kleur_iconen")}}
              {% else %}
                grey
              {% endif %}
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
                  }
                .: |
                  ha-card:active {
                  transform: scale(1.02);
                  transition: 0s;
                    }
                  ha-card {
                    height: 50px !important;
                          }
          - type: custom:mushroom-template-card
            primary: >-
              {{ states('input_text.persoon1_radiostations').split(',')[1]
              |default('') | title}}
            icon: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[1] %}

              {% if s is defined and s != '' %}
                mdi:volume-high
              {% else %}
                mdi:volume-off
              {% endif %}
            icon_color: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[1] %}

              {% if s is defined and s != '' %}
                {{ states("input_text.kleur_iconen")}}
              {% else %}
                grey
              {% endif %}
            tap_action:
              action: call-service
              service: script.audio_optielijst
              service_data:
                option: ruimte1.2
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
                  }
                .: |
                  ha-card:active {
                  transform: scale(1.02);
                  transition: 0s;
                    }
                  ha-card {
                    height: 50px !important;
                          }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: >-
              {{ states('input_text.persoon1_radiostations').split(',')[2]
              |default('') | title }}
            icon: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[2] %}

              {% if s is defined and s != '' %}
                mdi:volume-high
              {% else %}
                mdi:volume-off
              {% endif %}
            icon_color: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[2] %}

              {% if s is defined and s != '' %}
                {{ states("input_text.kleur_iconen")}}
              {% else %}
                grey
              {% endif %}
            tap_action:
              action: call-service
              service: script.audio_optielijst
              service_data:
                option: ruimte1.3
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
                  }
                .: |
                  ha-card:active {
                  transform: scale(1.02);
                  transition: 0s;
                    }
                  ha-card {
                    height: 55px !important;
                          }
          - type: custom:mushroom-template-card
            primary: >-
              {{ states('input_text.persoon1_radiostations').split(',')[3]
              |default('') | title}}
            icon: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[3] %}

              {% if s is defined and s != '' %}
                mdi:volume-high
              {% else %}
                mdi:volume-off
              {% endif %}
            icon_color: >
              {% set s =
              states('input_text.persoon1_radiostations').split(',')[3] %}

              {% if s is defined and s != '' %}
                {{ states("input_text.kleur_iconen")}}
              {% else %}
                grey
              {% endif %}
            tap_action:
              action: call-service
              service: script.audio_optielijst
              service_data:
                option: ruimte1.4
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
                  }
                .: |
                  ha-card:active {
                  transform: scale(1.02);
                  transition: 0s;
                    }
                  ha-card {
                    height: 55px !important;
                          }
      - type: custom:button-card
        name: ''
        styles:
          card:
            - height: 1px
    card_mod:
      style: |
        ha-card {
          width: 98%;
          height: 98%;
        }