Button template for room card

button_card_templates:
  card_room:
    template:
      - ulm_translation_engine
    variables:
      label_use_temperature: true
      label_use_brightness: false
    double_tap_action:
      action: call-service
      service: input_select.select_option
      service_data:
        option: '[[[ return variables.ulm_input_select_option ]]]'
        entity_id: '[[[ return variables.ulm_input_select ]]]'
    color: var(--google-grey-500)
    size: 45%
    aspect_ratio: 1/1
    show_icon: true
    show_label: true
    show_name: true
    icon: mdi:sofa-single
    label: |-
      [[[
        if (variables.label_use_temperature) {
          return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.attributes?.device_temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '°C');
        } else if (variables.label_use_brightness && entity?.state == "on" && entity?.attributes?.brightness != null) {
          let bri = Math.round(entity?.attributes?.brightness / 2.55);
          return (bri ? bri : "0") + "%";
        }
        return variables.ulm_translation_state;
      ]]]
    state:
      - value: unavailable
        styles:
          custom_fields:
            notification:
              - border-radius: 50%
              - border: 2px solid var(--card-background-color)
              - width: 24.5px
              - height: 24.5px
              - position: absolute
              - left: 50%
              - top: 50%
              - transform: translate(-50%,-50%)
              - margin-top: 35%
              - margin-left: '-35%'
              - line-height: 0
              - display: grid
              - background-color: '[[[ return ''rgba(var(--color-red),1)''; ]]]'
    styles:
      icon:
        - color: rgba(var(--color-theme),0.2)
      label:
        - justify-self: start
        - align-self: start
        - font-weight: bold
        - font-size: 14px
        - filter: opacity(40%)
        - margin-left: 12px
        - max-width: >-
            [[[ return `calc(100% - (12px + ${!variables?.entity_1 &&
            !variables?.entity_2 ? 5 : 0}px))`; ]]]
        - text-overflow: ellipsis
        - overflow: hidden
        - margin-top: '[[[ return !variables?.entity_1 ? ''-24%'' : ''-10%''; ]]]'
      name:
        - justify-self: start
        - align-self: end
        - font-weight: bold
        - font-size: 18px
        - margin-left: 12px
        - margin-bottom: >-
            [[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' :
            '24%') : '10%'; ]]]
        - max-width: >-
            [[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 :
            0}px))`; ]]]
        - text-overflow: ellipsis
        - overflow: hidden
      state:
        - justify-self: start
        - font-weight: bold
        - font-size: 12px
        - filter: opacity(40%)
        - margin-left: 6px
      img_cell:
        - background-color: rgba(var(--color-theme),0.05)
        - border-radius: 50%
        - width: 75%
        - height: 75%
        - max-width: none
        - max-height: none
        - position: absolute
        - left: 50%
        - top: 50%
        - transform: translate(-50%,-50%)
        - margin-top: 25%
        - margin-left: '-25%'
      grid:
        - grid-template-areas: >-
            [[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n'
            'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l
            l l i2' 'i i . i3' 'i i . i4'`; ]]]
        - grid-template-columns: >-
            [[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr';
            ]]]
        - grid-template-rows: >-
            [[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr';
            ]]]
        - justify-items: center
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 5px
      custom_fields:
        i1:
          - border-radius: 50%
          - width: 80%
          - height: 80%
          - line-height: 0
          - display: grid
        i2:
          - border-radius: 50%
          - width: 80%
          - height: 80%
          - line-height: 0
          - display: grid
        i3:
          - border-radius: 50%
          - width: 80%
          - height: 80%
          - line-height: 0
          - display: grid
        i4:
          - border-radius: 50%
          - width: 80%
          - height: 80%
          - line-height: 0
          - display: grid
    custom_fields:
      notification: |
        [[[
          if (entity?.state == 'unavailable'){
            return '<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>';
          }
        ]]]
      i1:
        card:
          type: custom:button-card
          template: |
            [[[
              let templates = [ 'widget_icon_room' ];
              if (variables?.entity_1?.templates?.length) {
                templates.push(...variables.entity_1.templates);
              }
              return templates;
            ]]]
          variables: '[[[ return variables?.entity_1; ]]]'
          state:
            - operator: template
              value: '[[[ return !variables.entity_1; ]]]'
              styles:
                card:
                  - display: none
          entity: '[[[ return variables?.entity_1?.entity_id; ]]]'
      i2:
        card:
          type: custom:button-card
          template: |
            [[[
              let templates = [ 'widget_icon_room' ];
              if (variables?.entity_2?.templates?.length) {
                templates.push(...variables.entity_2.templates);
              }
              return templates;
            ]]]
          variables: '[[[ return variables?.entity_2; ]]]'
          state:
            - operator: template
              value: '[[[ return !variables.entity_2; ]]]'
              styles:
                card:
                  - display: none
          entity: '[[[ return variables?.entity_2?.entity_id; ]]]'
      i3:
        card:
          type: custom:button-card
          template: |
            [[[
              let templates = [ 'widget_icon_room' ];
              if (variables?.entity_3?.templates?.length) {
                templates.push(...variables.entity_3.templates);
              }
              return templates;
            ]]]
          variables: '[[[ return variables?.entity_3; ]]]'
          state:
            - operator: template
              value: '[[[ return !variables.entity_3; ]]]'
              styles:
                card:
                  - display: none
          entity: '[[[ return variables?.entity_3?.entity_id; ]]]'
      i4:
        card:
          type: custom:button-card
          template: |
            [[[
              let templates = [ 'widget_icon_room' ];
              if (variables?.entity_4?.templates?.length) {
                templates.push(...variables.entity_4.templates);
              }
              return templates;
            ]]]
          variables: '[[[ return variables?.entity_4; ]]]'
          state:
            - operator: template
              value: '[[[ return !variables.entity_4; ]]]'
              styles:
                card:
                  - display: none
          entity: '[[[ return variables?.entity_4?.entity_id; ]]]'
  widget_icon_room:
    variables:
      tap_action:
        action: toggle
      hold_action:
        action: more-info
    tap_action:
      action: >-
        [[[ return variables?.tap_action?.action ? variables.tap_action.action :
        'none'; ]]]
      entity: '[[[ return variables.tap_action.entity; ]]]'
      navigation_path: '[[[ return variables.tap_action.navigation_path; ]]]'
      url_path: '[[[ return variables.tap_action.url_path; ]]]'
      service: '[[[ return variables.tap_action.service; ]]]'
      service_data: '[[[ return variables.tap_action.service_data; ]]]'
    hold_action:
      action: >-
        [[[ return variables?.hold_action?.action ? variables.hold_action.action
        : 'none'; ]]]
      entity: '[[[ return variables.hold_action.entity; ]]]'
      navigation_path: '[[[ return variables.hold_action.navigation_path; ]]]'
      url_path: '[[[ return variables.hold_action.url_path; ]]]'
      service: '[[[ return variables.hold_action.service; ]]]'
      service_data: '[[[ return variables.hold_action.service_data; ]]]'
    size: 15px
    color: var(--google-grey)
    show_icon: true
    show_name: false
    styles:
      icon:
        - width: 50%
        - height: 50%
        - line-height: '0'
        - color: rgba(var(--color-theme),0.2)
      img_cell:
        - border-radius: 50%
        - background-color: rgba(var(--color-theme),0.05)
      grid:
        - grid-template-areas: '''i'''
      card:
        - height: 100%
        - box-shadow: none
        - padding: 0px
        - border-radius: 50%
  ulm_translation_engine:
    variables:
      ulm_translation_back: '[[[ return hass.resources[hass[''language'']][''ui.common.back'']; ]]]'
      ulm_translation_brightness: >-
        [[[ return hass.resources[hass['language']]['ui.card.light.brightness'];
        ]]]
      ulm_translation_color_temperature: >-
        [[[ return
        hass.resources[hass['language']]['ui.card.light.color_temperature']; ]]]
      ulm_translation_status: >-
        [[[ return
        hass.resources[hass['language']]['ui.dialogs.more_info_control.vacuum.status'];
        ]]]
      ulm_translation_scenes: >-
        [[[ return
        hass.resources[hass['language']]['ui.dialogs.quick-bar.commands.reload.scene'];
        ]]]
      ulm_translation_source: >-
        [[[ return
        hass.resources[hass['language']]['ui.card.media_player.source']; ]]]
      ulm_translation_history: >-
        [[[ return
        hass.resources[hass['language']]['ui.dialogs.more_info_control.history'];
        ]]]
      ulm_translation_close_cover: >-
        [[[ return
        hass.resources[hass['language']]['ui.dialogs.more_info_control.cover.close_cover'];
        ]]]
      ulm_translation_stop_cover: >-
        [[[ return
        hass.resources[hass['language']]['ui.dialogs.more_info_control.cover.stop_cover'];
        ]]]
      ulm_translation_open_cover: >-
        [[[ return
        hass.resources[hass['language']]['ui.dialogs.more_info_control.cover.open_cover'];
        ]]]
      ulm_translation_more_options: >-
        [[[ return
        hass.resources[hass['language']]['ui.panel.lovelace.editor.edit_card.options'];
        ]]]
      ulm_translation_hour: |
        [[[
          var number = hass.resources[hass['language']]["ui.duration.hour"];
          var matches = number.match(/[^{\}]+(?=})/g);
          var hour = "Hour";
          if (matches) {
            var hour = matches[1];
          }
          return(hour);
        ]]]
      ulm_translation_hours: |
        [[[
          var number = hass.resources[hass['language']]["ui.duration.hour"];
          var matches = number.match(/[^{\}]+(?=})/g);
          var hour = "Hours";
          if (matches) {
            var hour = matches[2];
          }
          return(hour);
        ]]]
      ulm_translation_hvac: |
        [[[
          if (typeof(entity) !== 'undefined' && entity !== undefined){
            let state = entity.state;
            let d_class = entity.attributes.device_class;
            let def = ["unknown", "unavailable"];
            let lang = hass["language"];
            let action = entity.attributes.hvac_action;
            let domain = entity.entity_id.substr(0, entity.entity_id.indexOf("."));
            var mode = hass.resources[lang]["state_attributes." + domain + ".hvac_action." + action];
            if (def.includes(state)) {
              var mode = hass.resources[lang]["state.default." + state ];
            }
            var label = hass.resources[lang]["component." + domain + ".state._." + state];
            var translation = label ? label : state;
            return (entity.attributes.current_temperature ) + '°' + ' • ' + translation + ((entity.state !='off' && mode !== undefined) ? ' (' + mode + ')' : '');
            }
        ]]]
      ulm_translation_off: '[[[ return hass.resources[hass[''language'']][''state.default.off'']; ]]]'
      ulm_translation_on: '[[[ return hass.resources[hass[''language'']][''state.default.on'']; ]]]'
      ulm_translation_state: |
        [[[
          if (typeof(entity) !== 'undefined' && entity !== undefined){
            let state = entity.state;
            let d_class = entity.attributes.device_class;
            let def = ["unknown", "unavailable"];
            let lang = hass["language"];
            let domain = entity.entity_id.substr(0, entity.entity_id.indexOf("."));
            var translation = hass.resources[lang]["component." + domain + ".state._." + state]
            if (def.includes(state)) {
              var translation = hass.resources[lang]["state.default." + state ];
            }
            else if (domain == "binary_sensor" && d_class != ''){
              var translation = hass.resources[lang]["component." + domain + ".state." + d_class + "." + state]
            }
            return translation ? translation : state;
          }
        ]]]
      ulm_translation_state_reverse: |
        [[[
          if (typeof(entity) !== 'undefined' && entity !== undefined){
            let state = entity.state;
            let def = ["unknown", "unavailable"];
            let lang = hass["language"];
            if (state === "on"){
              var translation = hass.resources[lang]["state.default.off"];
            } else if (state === "off"){
              var translation = hass.resources[lang]["state.default.on"];
            }
            if (def.includes(state)) {
              var translation = hass.resources[lang]["state.default." + state ];
            }
            return translation ? translation : state;
          }
        ]]]
      ulm_translation_state_unit: |
        [[[
          if (typeof(entity) !== 'undefined' && entity !== undefined){
            let state = entity.state;
            let d_class = entity.attributes.device_class;
            let def = ["unknown", "unavailable"];
            let lang = hass["language"];
            let domain = entity.entity_id.substr(0, entity.entity_id.indexOf("."));
            let unit = entity.attributes.unit_of_measurement != null ? " " + entity.attributes.unit_of_measurement : "";

            if(hass.resources[lang]["component." + domain + ".state._." + state]){
            var translation = hass.resources[lang]["component." + domain + ".state._." + state] + unit
            } else {
            var translation =  state + unit;
            }
            if (def.includes(state)) {
              var translation = hass.resources[lang]["state.default." + state ];
            }
            else if (domain == "binary_sensor" && d_class != ''){
              var translation = hass.resources[lang]["component." + domain + ".state." + d_class + "." + state]
            }
            else if (domain == "media_player" && d_class != ''){
              if (state == 'idle' || state == 'paused')
                var translation = hass.resources[lang]["component." + domain + ".state." + state];
              else {
                var translation = (entity.attributes.source) + ' • ' +  ( Math.round(entity.attributes.volume_level / 0.01)) + '%' ;
              }
            }
            return translation ? translation : state;
          }
        ]]]
      ulm_translation_statistics: >-
        [[[ return
        hass.resources[hass['language']]['ui.components.statistic-picker.statistic'];
        ]]]
      ulm_translation_unavailable: >-
        [[[ return
        hass.resources[hass['language']]['state.default.unavailable']; ]]]
      ulm_translation_currency: |
        [[[
          var hasscurrency = hass.config["currency"];
          var currency =
          { "AFA": "؋",
            "ALL": "Lek",
            "DZD": "دج",
            "AOA": "Kz",
            "ARS": "$",
            "AMD": "֏",
            "AWG": "ƒ",
            "AUD": "$",
            "AZN": "m",
            "BSD": "B$",
            "BHD": ".د.ب",
            "BDT": "৳",
            "BBD": "Bds$",
            "BYR": "Br",
            "BEF": "fr",
            "BZD": "$",
            "BMD": "$",
            "BTN": "Nu.",
            "BTC": "฿",
            "BOB": "Bs.",
            "BAM": "KM",
            "BWP": "P",
            "BRL": "R$",
            "GBP": "£",
            "BND": "B$",
            "BGN": "Лв.",
            "BIF": "FBu",
            "KHR": "KHR",
            "CAD": "$",
            "CVE": "$",
            "KYD": "$",
            "XOF": "CFA",
            "XAF": "FCFA",
            "XPF": "₣",
            "CLP": "$",
            "CNY": "¥",
            "COP": "$",
            "KMF": "CF",
            "CDF": "FC",
            "CRC": "₡",
            "HRK": "kn",
            "CUC": "$, CUC",
            "CZK": "Kč",
            "DKK": "Kr.",
            "DJF": "Fdj",
            "DOP": "$",
            "XCD": "$",
            "EGP": "ج.م",
            "ERN": "Nfk",
            "EEK": "kr",
            "ETB": "Nkf",
            "EUR": "€",
            "FKP": "£",
            "FJD": "FJ$",
            "GMD": "D",
            "GEL": "ლ",
            "DEM": "DM",
            "GHS": "GH₵",
            "GIP": "£",
            "GRD": "₯, Δρχ, Δρ",
            "GTQ": "Q",
            "GNF": "FG",
            "GYD": "$",
            "HTG": "G",
            "HNL": "L",
            "HKD": "$",
            "HUF": "Ft",
            "ISK": "kr",
            "INR": "₹",
            "IDR": "Rp",
            "IRR": "﷼",
            "IQD": "د.ع",
            "ILS": "₪",
            "ITL": "L,£",
            "JMD": "J$",
            "JPY": "¥",
            "JOD": "ا.د",
            "KZT": "лв",
            "KES": "KSh",
            "KWD": "ك.د",
            "KGS": "лв",
            "LAK": "₭",
            "LVL": "Ls",
            "LBP": "£",
            "LSL": "L",
            "LRD": "$",
            "LYD": "د.ل",
            "LTL": "Lt",
            "MOP": "$",
            "MKD": "ден",
            "MGA": "Ar",
            "MWK": "MK",
            "MYR": "RM",
            "MVR": "Rf",
            "MRO": "MRU",
            "MUR": "₨",
            "MXN": "$",
            "MDL": "L",
            "MNT": "₮",
            "MAD": "MAD",
            "MZM": "MT",
            "MMK": "K",
            "NAD": "$",
            "NPR": "₨",
            "ANG": "ƒ",
            "TWD": "$",
            "NZD": "$",
            "NIO": "C$",
            "NGN": "₦",
            "KPW": "₩",
            "NOK": "kr",
            "OMR": ".ع.ر",
            "PKR": "₨",
            "PAB": "B/.",
            "PGK": "K",
            "PYG": "₲",
            "PEN": "S/.",
            "PHP": "₱",
            "PLN": "zł",
            "QAR": "ق.ر",
            "RON": "lei",
            "RUB": "₽",
            "RWF": "FRw",
            "SVC": "₡",
            "WST": "SAT",
            "SAR": "﷼",
            "RSD": "din",
            "SCR": "SRe",
            "SLL": "Le",
            "SGD": "$",
            "SKK": "Sk",
            "SBD": "Si$",
            "SOS": "Sh.so.",
            "ZAR": "R",
            "KRW": "₩",
            "XDR": "SDR",
            "LKR": "Rs",
            "SHP": "£",
            "SDG": ".س.ج",
            "SRD": "$",
            "SZL": "E",
            "SEK": "kr",
            "CHF": "CHf",
            "SYP": "LS",
            "STD": "Db",
            "TJS": "SM",
            "TZS": "TSh",
            "THB": "฿",
            "TOP": "$",
            "TTD": "$",
            "TND": "ت.د",
            "TRY": "₺",
            "TMT": "T",
            "UGX": "USh",
            "UAH": "₴",
            "AED": "إ.د",
            "UYU": "$",
            "USD": "$",
            "UZS": "лв",
            "VUV": "VT",
            "VEF": "Bs",
            "VND": "₫",
            "YER": "﷼",
            "ZMK": "ZK"
          }
          return currency[hasscurrency];
        ]]]
  blue_no_state:
    styles:
      icon:
        - color: "rgba(var(--color-blue),1)"
      label:
        - color: "rgba(var(--color-blue-text),1)"
      name:
        - color: "rgba(var(--color-blue-text),1)"
      img_cell:
        - background-color: "rgba(var(--color-blue), 0.2)"
      card:
        - background-color: "rgba(var(--color-background-blue), var(--opacity-bg))"
  green_no_state:
    styles:
      icon:
        - color: "rgba(var(--color-green),1)"
      label:
        - color: "rgba(var(--color-green-text),1)"
      name:
        - color: "rgba(var(--color-green-text),1)"
      img_cell:
        - background-color: "rgba(var(--color-green), 0.2)"
  grey_no_state:
    styles:
      icon:
        - color: "rgba(var(--color-grey),1)"
      label:
        - color: "rgba(var(--color-grey-text),1)"
      name:
        - color: "rgba(var(--color-grey-text),1)"
      img_cell:
        - background-color: "rgba(var(--color-grey), 0.2)"
  pink_no_state:
    styles:
      icon:
        - color: "rgba(var(--color-pink),1)"
      label:
        - color: "rgba(var(--color-pink-text),1)"
      name:
        - color: "rgba(var(--color-pink-text),1)"
      img_cell:
        - background-color: "rgba(var(--color-pink), 0.2)"
  purple_no_state:
    styles:
      icon:
        - color: "rgba(var(--color-purple),1)"
      label:
        - color: "rgba(var(--color-purple-text),1)"
      name:
        - color: "rgba(var(--color-purple-text),1)"
      img_cell:
        - background-color: "rgba(var(--color-purple), 0.2)"
  red_no_state:
    styles:
      icon:
        - color: rgba(var(--color-red),1)
      label:
        - color: rgba(var(--color-red-text),1)
      name:
        - color: rgba(var(--color-red-text),1)
      img_cell:
        - background-color: rgba(var(--color-red), 0.2)
  yellow_no_state:
    styles:
      icon:
        - color: "rgba(var(--color-yellow),1)"
      label:
        - color: "rgba(var(--color-yellow-text),1)"
      name:
        - color: "rgba(var(--color-yellow-text),1)"
      img_cell:
        - background-color: "rgba(var(--color-yellow), 0.2)"
  red_off:
    state:
      - styles:
          icon:
            - color: rgba(var(--color-red),1)
          label:
            - color: rgba(var(--color-red-text),1)
          name:
            - color: rgba(var(--color-red-text),1)
          img_cell:
            - background-color: rgba(var(--color-red), 0.2)
        value: 'off'
        id: 'off'
  yellow_on:
    state:
      - styles:
          icon:
            - color: rgba(var(--color-yellow),1)
          label:
            - color: rgba(var(--color-yellow-text),1)
          name:
            - color: rgba(var(--color-yellow-text),1)
          img_cell:
            - background-color: rgba(var(--color-yellow), 0.2)
          card:
            - background-color: rgba(var(--color-background-yellow),var(--opacity-bg))
        value: 'on'
        id: 'on'
  blue_on:
    state:
      - styles:
          icon:
            - color: rgba(var(--color-blue),1)
          label:
            - color: rgba(var(--color-blue-text),1)
          name:
            - color: rgba(var(--color-blue-text),1)
          img_cell:
            - background-color: rgba(var(--color-blue), 0.2)
          card:
            - background-color: rgba(var(--color-background-blue), var(--opacity-bg))
        id: 'on'
        value: 'on'
  green_on:
    state:
      - styles:
          icon:
            - color: rgba(var(--color-green),1)
          label:
            - color: rgba(var(--color-green-text),1)
          name:
            - color: rgba(var(--color-green-text),1)
          img_cell:
            - background-color: rgba(var(--color-green), 0.2)
          card:
            - background-color: rgba(var(--color-background-green), var(--opacity-bg))
        value: 'on'
        id: 'on'
  pink_on:
    state:
      - styles:
          icon:
            - color: rgba(var(--color-pink),1)
          label:
            - color: rgba(var(--color-pink-text),1)
          name:
            - color: rgba(var(--color-pink-text),1)
          img_cell:
            - background-color: rgba(var(--color-pink), 0.2)
        value: 'on'
        id: 'on'