Merge branch 'main' into custom_actions

docs/usage/custom_cards/custom_card_afvalophaling.md

@@ -3,6 +3,7 @@ title: Afvalophaling Custom-card
 hide:
   - toc
 ---
+
 <!-- markdownlint-disable MD046 -->
 
 # Custom-card "Afvalophaling"
@@ -29,16 +30,16 @@ Initial release
 ## Usage
 
 ```yaml
-      - type: 'custom:button-card'
-        template:
-          - card_afvalophaling
-        variables:
-          ulm_card_ophaling_vandaag: 'sensor.limburg_net_afvalophaling_vandaag'
-          ulm_card_ophaling_morgen: "sensor.limburg_net_afvalophaling_morgen"
-          ulm_card_datum_gft: "sensor.limburg_net_afvalophaling_gft"
-          ulm_card_datum_pmd: "sensor.limburg_net_afvalophaling_pmd"
-          ulm_card_datum_rest: "sensor.limburg_net_afvalophaling_restafval"
-          ulm_card_datum_papier: "sensor.limburg_net_afvalophaling_papier"
+- type: "custom:button-card"
+  template:
+    - card_afvalophaling
+  variables:
+    ulm_card_ophaling_vandaag: "sensor.limburg_net_afvalophaling_vandaag"
+    ulm_card_ophaling_morgen: "sensor.limburg_net_afvalophaling_morgen"
+    ulm_card_datum_gft: "sensor.limburg_net_afvalophaling_gft"
+    ulm_card_datum_pmd: "sensor.limburg_net_afvalophaling_pmd"
+    ulm_card_datum_rest: "sensor.limburg_net_afvalophaling_restafval"
+    ulm_card_datum_papier: "sensor.limburg_net_afvalophaling_papier"
 ```
 
 ## Requirements
@@ -92,151 +93,8 @@ Integration from HACS: "Home-Assistant-Sensor-Afvalbeheer" from pippyn
 </tr>
 </table>
 
-## Template code
+??? note "Template Code"
 
-```yaml
----
-card_afvalophaling:
-  template:
-    - "ulm_language_variables"
-    - "icon_info_afvalophaling"
-    - "custom_colors"
-  triggers_update: "all"
-  icon: "mdi:delete"
-  name: >
-        [[[
-          if(states[variables.ulm_card_ophaling_vandaag].state !=='Geen' || states[variables.ulm_card_ophaling_morgen].state !=='Geen'){
-            return variables.ulm_ophaling
-          } else {
-            return variables.ulm_volgende_ophaling
-          }
-        ]]]
-  label: |
-        [[[
-          var glas = ''
-          if(variables.ulm_card_datum_glas){
-          var glas = "Glas " + ' • ' + states[variables.ulm_card_datum_glas].state + '<br>'
-          }
-          var pmd = ''
-          if(variables.ulm_card_datum_pmd){
-          var pmd = "PMD " + ' • ' + states[variables.ulm_card_datum_pmd].state + '<br>'
-          }
-          var gft = ''
-          if(variables.ulm_card_datum_gft){
-          var gft = "GFT " + ' • ' + states[variables.ulm_card_datum_gft].state + '<br>'
-          }
-          var rest = ''
-          if(variables.ulm_card_datum_rest){
-          var rest = "Restafval " + ' • ' + states[variables.ulm_card_datum_rest].state + '<br>'
-          }
-          var papier = ''
-          if(variables.ulm_card_datum_papier){
-          var papier = "Papier " + ' • ' + states[variables.ulm_card_datum_papier].state + '<br>'
-          }
-          if(states[variables.ulm_card_ophaling_vandaag].state !=='Geen'){
-            return states[variables.ulm_card_ophaling_vandaag].state
-          }
-          if(states[variables.ulm_card_ophaling_morgen].state !=='Geen'){
-            return states[variables.ulm_card_ophaling_morgen].state
-          } else {
-            return rest + papier + pmd + gft + glas
-          }
-        ]]]
-custom_colors:
-  state:
-    - styles:
-        icon:
-          - color: "rgba(var(--color-green),1)"
-        img_cell:
-          - background-color: "rgba(var(--color-green), 0.2)"
-      value: >
-        [[[
-          return states[variables.ulm_card_ophaling_vandaag].state !== "Geen" || states[variables.ulm_card_ophaling_morgen].state !== "Geen"
-        ]]]
-      icon: "mdi:recycle"
-      operator: "template"
-    - styles:
-        icon:
-          - color: "rgba(var(--color-blue),1)"
-        img_cell:
-          - background-color: "rgba(var(--color-blue), 0.2)"
-      value: >
-        [[[
-          return states[variables.ulm_card_ophaling_vandaag].state === "glas" || states[variables.ulm_card_ophaling_morgen].state === "glas"
-        ]]]
-      icon: "mdi:bottle-wine-outline"
-      operator: "template"
-icon_info_afvalophaling:
-  color: "var(--google-grey)"
-  show_icon: "true"
-  show_label: "true"
-  show_name: "true"
-  state:
-    - value: "unavailable"
-      styles:
-        icon:
-          - color: "rgba(var(--color-red),1)"
-        img_cell:
-          - background-color: "rgba(var(--color-red), 0.2)"
-        custom_fields:
-          notification:
-            - border-radius: "50%"
-            - position: "absolute"
-            - left: "42px"
-            - top: "10px"
-            - height: "16px"
-            - width: "16px"
-            - font-size: "12px"
-            - line-height: "14px"
-            - 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: "12px"
-      - filter: "opacity(40%)"
-      - margin-left: "12px"
-      - text-align: "start"
-    name:
-      - align-self: "end"
-      - justify-self: "start"
-      - font-weight: "bold"
-      - font-size: "14px"
-      - margin-left: "12px"
-      - margin-bottom: "4px"
-    state:
-      - justify-self: "start"
-      - align-self: "start"
-      - font-weight: "bold"
-      - font-size: "12px"
-      - filter: "opacity(40%)"
-      - margin-left: "12px"
-    img_cell:
-      - background-color: "rgba(var(--color-theme),0.05)"
-      - border-radius: "50%"
-      - place-self: "center"
-      - width: "42px"
-      - height: "42px"
-    grid:
-      - grid-template-areas: "'i n' 'i l'"
-      - grid-template-columns: "min-content auto"
-      - grid-template-rows: "min-content min-content"
-    card:
-      - border-radius: "var(--border-radius)"
-      - box-shadow: "var(--box-shadow)"
-      - padding: "12px"
-  custom_fields:
-    notification: >
-      [[[
-        if (states[variables.ulm_card_ophaling_vandaag].state =='unavailable' || states[variables.ulm_card_ophaling_morgen].state =='unavailable'){
-          return `<ha-icon icon="mdi:help" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
-        }
-      ]]]
-  size: "20px"
-```
+    ```yaml title="card_afvalophaling.yaml"
+    --8<-- "custom_cards/custom_card_afvalophaling/card_afvalophaling.yaml"
+    ```