Hichiro's custom garage card v0.2

type: custom:button-card
variables:
  garage_door_entity: cover.hall_window
  garage_light_entity: input_boolean.tester
  garage_automation_entity: input_boolean.tester
  garage_timer_entity: timer.tester
entity: '[[[ return variables.garage_door_entity ]]]'
name: Garage
show_label: true
state:
  - value: open
    icon: mdi:garage-open-variant
    color: red
    label: "[[[ return (states[variables.garage_door_entity].attributes.current_position == 100) ? 'Open' : `${states[variables.garage_door_entity].attributes.current_position}% Open` ]]]"
  - value: closed
    icon: mdi:garage-variant-lock
    color: green
    label: Closed
  - value: opening
    icon: mdi:archive-arrow-up
    color: khaki
    label: Opening
    styles:
      label:
        - animation: blink 2s ease infinite
  - value: closing
    icon: mdi:archive-arrow-down
    color: khaki
    label: Closing
    styles:
      label:
        - animation: blink 2s ease infinite
styles:
  card:
    - background: transparent
  custom_fields:
    automatic:
      - top: 10%
      - left: 5%
      - position: absolute
      - color: khaki
    light:
      - bottom: 10%
      - left: 5%
      - position: absolute
    fifty:
      - top: 35%
      - right: 5%
      - position: absolute
    twenty-five:
      - top: 10%
      - right: 5%
      - position: absolute
    timer-bar-card:
      - align-self: left
      - justify-self: left
      - position: absolute
      - width: 100%
      - left: 0%
      - bottom: '-16px'
      - opacity: 75%
tap_action:
  action: toggle
custom_fields:
  automatic:
    card:
      type: custom:button-card
      entity: '[[[ return variables.garage_automation_entity ]]]'
      show_icon: false
      show_name: false
      show_label: true
      state:
        - value: 'on'
          color: khaki
          label: Auto ON
          styles:
            card:
              - border-color: yellow
        - value: 'off'
          color: gray
          label: Auto OFF
      styles:
        card:
          - height: 50px
          - width: auto
          - padding: 10px
  light:
    card:
      type: custom:button-card
      entity: '[[[ return variables.garage_light_entity ]]]'
      show_name: false
      state:
        - value: 'on'
          icon: mdi:lightbulb-on-outline
          color: khaki
          styles:
            card:
              - border-color: yellow
        - value: 'off'
          icon: mdi:lightbulb
          color: gray
      styles:
        card:
          - height: 50px
          - width: 50px
  fifty:
    card:
      type: custom:button-card
      name: 50%
      styles:
        card:
          - height: 50px
          - width: 50px
      tap_action:
        action: call-service
        service: cover.set_cover_position
        service_data:
          entity_id: '[[[ return variables.garage_door_entity ]]]'
          position: 50
  twenty-five:
    card:
      type: custom:button-card
      name: 25%
      styles:
        card:
          - height: 50px
          - width: 50px
      tap_action:
        action: call-service
        service: cover.set_cover_position
        service_data:
          entity_id: '[[[ return variables.garage_door_entity ]]]'
          position: 25
  timer-bar-card:
    card:
      type: custom:timer-bar-card
      entity: '[[[ return variables.garage_timer_entity ]]]'
      translations:
        idle: "\_"
      layout: full_row
      invert: true
      bar_background: none
      bar_height: 6px
      bar_radius: 5px
      text_width: 0px
      sync_issues: fix
      tap_action:
        action: none
      modifications:
        - remaining: 100%
          bar_foreground: lime
        - remaining: 75%
          bar_foreground: orange
        - remaining: 50%
          bar_foreground: yellow
        - remaining: 25%
          bar_foreground: red