type: custom:button-card
variables:
  alertcardversion: 1.0.0
  var_icon: >-
    [[[ try {return
    hass.states[variables.var_assistsat_entity].attributes.alert_data['icon']}
    catch { return  "mdi:cancel"}]]]  
  var_header: >-
    [[[ try {return
    hass.states[variables.var_assistsat_entity].attributes.alert_data['header']}
    catch { return  "Undefined"}]]]
  var_line1: >-
    [[[ try {return
    hass.states[variables.var_assistsat_entity].attributes.alert_data['line1']}
    catch { return  "Something went wrong"}]]]
  var_line2: >-
    [[[ try {return
    hass.states[variables.var_assistsat_entity].attributes.alert_data['line2']}
    catch { return  "Check your settings"}]]]        
template:
  - variable_template
  - body_template
styles:
  grid:
    - grid-template-areas: |
        "title status"  
        "alert alert"
        "assist assist"       
    - grid-template-columns: 1.5fr 1.5fr
    - grid-template-rows: min-content max-content
  card:
    - background-color: "#059bf1"
    - background-size: cover
  custom_fields:
    title:
      - font-size: 6vh
      - font-family: Anton
    status:
      - font-size: 5vh
      - color: black
      - icon:
          - color: black
          - height: 90%
    alert:
      - align-self: center
      - justify-self: center
      - position: absolute
      - z-index: 2
      - width: 90%
custom_fields:
  alert:
    card:
      type: custom:button-card
      custom_fields:
        header: "[[[ return variables.var_header ]]]"
        line1: "[[[ return variables.var_line1 ]]]"
        line2: "[[[ return variables.var_line2 ]]]"
        icon: |
          [[[ return `<ha-icon icon="${variables.var_icon}"></ha-icon>`; ]]]
      show_icon: false
      show_name: false
      styles:
        grid:
          - grid-template-areas: |
              "icon header" 
              "icon line1"
              "icon line2"
          - grid-template-columns: .5fr 1fr
          - grid-template-rows: max-content max-content max-content
        card:
          - justify-content: center
          - align-items: center
          - padding: 2%
          - border-radius: 1vw
          - background-color: "#059bf1"
          - background-size: cover
          - border: none
        custom_fields:
          icon:
            - align-self: center
            - justify-self: end
            - z-index: 2
            - border-right: 2px solid black
            - padding-right: 5%
            - color: black
          header:
            - font-size: 7vh
            - color: black
            - justify-self: start
            - padding-left: 10%
            - font-weight: 500
            - padding-top: 2em
          line1:
            - font-size: 7vh
            - color: black
            - justify-self: start
            - padding-left: 10%
            - padding-left: 10%
          line2:
            - font-size: 7vh
            - color: black
            - justify-self: start
            - padding-left: 10%
            - padding-bottom: 2em