Irrigation Card

- type: "custom:button-card"
  entity: timer.irrigation_1
  name: Irrigation
  label: Greenhouse
  show_name: true
  show_icon: false
  show_label: true
  show_state: >
    [[[
      if (states['timer.irrigation_1'].state == 'active') {
        return true;
      } else {
        return false;
      }
    ]]]
  styles:
    grid:
      - grid-template-areas: >
          [[[
            if (entity.state == 'active'){
              return '"n n" "l s"';}
            {return '"n n" "l l"';}
          ]]]

      - grid-template-rows: 1.5fr 1fr
      - grid-template-columns: 1fr 1fr
      - row-gap: 8px
    card:
      - height: 100%
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: 1rem
      - overflow: visible
      - aspect-ratio: 3/2

    name:
      - text-align: left
      - font-size: "var(--fs-600)"
      - font-family: Montserrat
      - font-weight: 600
      - justify-self: start
      - align-self: end
      - color: "var(--contrast-100)"
      - overflow: visible
    label:
      - text-align: left
      - font-size: "var(--fs-400)"
      - font-family: Montserrat
      - font-weight: 500
      - justify-self: start
      - align-self: center
      - color: "var(--contrast-100)"
      - overflow: visible
    state:
      - text-align: right
      - font-size: "var(--fs-400)"
      - font-family: Montserrat
      - font-weight: 500
      - justify-self: end
      - align-self: center
      - color: "var(--contrast-100)"