HaCasa cover template

hc_cover_card:
    variables:
      show_mode_state: true
    show_label: true
    show_state: true
    state_display: |
      [[[
        return "Currently " + states[entity.entity_id].state + ' - ' + states[entity.entity_id].attributes.current_position + '%'
      ]]]
    label: |
      [[[
          var label = ""
          if (variables.show_mode_state == true & states[entity.entity_id].state === "open") {
              label = "<ha-icon icon='mdi:window-shutter-open' style='width: 100px; height: 100px'></ha-icon>"
          } else if (variables.show_mode_state == true & states[entity.entity_id].state === "opening") {
              label = "<ha-icon icon='mdi:window-shutter-open' style='cwidth: 100px; height: 100px'></ha-icon>"
          } else if (variables.show_mode_state == true & states[entity.entity_id].state === "closing") {
              label = "<ha-icon icon='mdi:window-shutter' style='width: 100px; height: 100px'></ha-icon>"
          } else if (variables.show_mode_state == true & states[entity.entity_id].state === "closed") {
              label = "<ha-icon icon='mdi:window-shutter' style='width: 100px; height: 100px'></ha-icon>"
          } else {
              label = "<ha-icon icon='mdi:window-shutter' style='width: 100px; height: 100px'></ha-icon>"
          }
          return label
      ]]]
    show_icon: false
    state:
      - value: opening
        styles:
          card:
            - background: var(--color-blue)
          name:
            - color: white
          label:
            - color: white
          state:
            - color: white
      - value: closing
        styles:
          card:
            - background: var(--color-red)
          name:
            - color: white
          label:
            - color: white
          state:
            - color: white
    styles:
      grid:
        - grid-template-areas: |
            'l buttons'
            'n buttons'
            's buttons'
        - grid-template-rows: min-content min-content min-content min-content
      card:
        - padding: 20px
        - pointer-events: none
      name:
        - justify-self: start
        - align-self: end
        - font-family: montserrat
        - font-weight: 500
        - z-index: 2
      label:
        - font-size: 5em
        - justify-self: start
        - align-self: start
        - font-weight: 700
        - font-family: montserrat
        - z-index: 2
      state:
        - justify-self: start
        - opacity: 0.8
        - font-size: 12px
        - font-family: montserrat
        - z-index: 2
    tap_action: none
    custom_fields:
      buttons:
        card:
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: |
                  'item_1'
                  'item_2'
                  'item_3'
            card:
              - padding: 10px
              - border-radius: 50px
              - background-color: var(--contrast-10)
              - z-index: 2
          custom_fields:
            item_1:
              card:
                type: custom:button-card
                icon: mdi:chevron-up
                styles:
                  icon:
                    - width: 25px
                  card:
                    - padding: 10px
                    - border-radius: 500px
                    - box-shadow: none
                    - pointer-events: auto
                    - background: none
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  target:
                    entity_id: '[[[ return entity.entity_id ]]]'
            item_2:
              card:
                type: custom:button-card
                icon: mdi:stop
                styles:
                  icon:
                    - width: 25px
                  card:
                    - padding: 10px
                    - border-radius: 500px
                    - box-shadow: none
                    - pointer-events: auto
                    - background: none
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  target:
                    entity_id: '[[[ return entity.entity_id ]]]'
            item_3:
              card:
                type: custom:button-card
                icon: mdi:chevron-down
                styles:
                  icon:
                    - width: 25px
                  card:
                    - padding: 10px
                    - border-radius: 500px
                    - box-shadow: none
                    - pointer-events: auto
                    - background: none
                tap_action:
                  action: call-service
                  service: cover.close_cover
                  target:
                    entity_id: '[[[ return entity.entity_id ]]]'