type: custom:button-card
variables:
  background: /local/viewassist/pinkbluesky.jpg
template:
  - variable_template
  - body_template
styles:
  grid:
    - grid-template-areas: |
        "title status"  
        "time time"
        "date date"
        "assist assist"
    - grid-template-rows: min-content min-content min-content min-content
    - grid-template-columns: 1fr 1fr
  card:
    - background: '[[[ return `center / cover no-repeat url(${variables.background})` ]]]'
    - background-size: cover
  custom_fields:
    time:
      - justify-self: center
      - z-index: 2
      - font-size: 55vh
      - font-weight: bold
      - position: absolute
      - color: white
    date:
      - justify-self: center
      - align-self: center
      - z-index: 2
      - font-size: 15vh
      - width: max-content
      - position: absolute
      - top: 70%
    night:
      - position: absolute
      - min-height: 200%
      - width: 200%
      - backdrop-filter: brightness(5%)
      - overflow: hidden
      - display: >-
          [[[ if (hass.states[variables.var_assistsat_entity].attributes.mode
          === "night") return "block"; else return "none"; ]]]      
      - z-index: 3
custom_fields:
  title:
    card:
      type: custom:button-card
      icon: '[[[ return variables.var_weather_icon ]]]'
      name: '[[[ return variables.var_weather_temperature ]]]'
      tap_action:
        action: navigate
        navigation_path: /dashboard-viewassist/weather
      styles:
        card:
          - background-color: transparent
          - border-width: 0px
          - width: 50%
          - margin-left: 5%
          - margin-top: '-5%'
        grid:
          - grid-template-areas: '"i n"'
          - grid-template-rows: min-content min-content
        name:
          - font-size: 15vh
          - color: white
        icon:
          - width: 25vw
          - color: white
  time: '[[[ return variables.var_current_time ]]]'
  date: '[[[ return variables.var_date_short ]]]'
  night: .