Nested IFs (conditions) within Frontend-Template

Configuration Frontend
1

Dear Community,

I started with a frontend-.YAML: fe-og-kin2.yaml
I included a template-file using button_card_templates: !include button-card-templates.yaml
Within the template-file, I configured the following template to render my cover-buttons

schmiddy-cover:
    size: 30%
    icon: |
      [[[
        if (variables.function == "up")
          if (entity.state == "opening")
            return 'mdi:arrow-up-bold';
          else if (entity.state == "open")
            return 'mdi:arrow-up-bold';
          else return 'mdi:arrow-up-bold-outline';
        else if (variables.function == "stop")
          return 'mdi:pause';
        else if (variables.function == "down")
          if (entity.state == "closing")
            return 'mdi:arrow-down-bold';
          else if (entity.state == "close")
            return 'mdi:arrow-down-bold';
          else return 'mdi:arrow-down-bold-outline';
      ]]]

Using the variable ‘function’ I wanted to manage the button-design for up, pause and down.
But unfortunately the nested IF-statements don’t work properly.
=> up works fine, the variants bold/outline of the icons displayed as I wanted it.
which is: in state ‘opening’ AND ‘open’ it should be bold, otherwise outlined.
=> But in down-mode, bold-Icon displays during closing, but not in close-state (instead outline is displayed)

I just don’t understand, why.

Which language is used between the brackets [[[ and ]]]?
Can anyone give me the hint and correct my code?
I would be very thankful.

Best regards

Lars

2

Try this (it is more readable but not sure it will behave as expected…):

schmiddy-cover:
    size: 30%
    icon: |
      [[[
        if ((variables.function == "up") & (entity.state == "opening")) return 'mdi:arrow-up-bold';
        if ((variables.function == "up") & (entity.state == "open")) return 'mdi:arrow-up-bold';
        if (variables.function == "up") return 'mdi:arrow-up-bold-outline';
        if (variables.function == "stop") return 'mdi:pause';
        if ((variables.function == "down") & (entity.state == "closing")) return 'mdi:arrow-down-bold';
        if ((variables.function == "down") & (entity.state == "close")) return 'mdi:arrow-down-bold';
        if (variables.function == "down") return 'mdi:arrow-down-bold-outline';
        else return 'mdi:alert-circle-outline';
      ]]]

At the end, it will return an icon (alert circle) if none of the conditions are met…