type: custom:button-card
variables:
  listcardversion: 1.0.2
  var_list: >-
    [[[ try {return
    hass.states[variables.var_assistsat_entity].attributes.list} catch {
    return  "todo.shopping_list"}]]]
  background: /view_assist/dashboard/infobackground.png
template:
  - variable_template
  - body_template
styles:
  card:
    - background: '[[[ return `center / cover no-repeat url(${variables.background})` ]]]'
    - background-size: cover
custom_fields:
  message:
    card:
      type: todo-list
      entity: '[[[ return variables.var_list ]]]'
      card_mod:
        style:
          .: |
            ha-card {
              background-color: transparent;
              box-shadow: none;
              border: none;
              position: absolute;
              top: 15vh; /* Play with this value to adjust top spacing */
              height: 80vh; /* Limit the vertical size to allow scrolling */
              /* flex-direction: column-reverse;  <-- Enable this to auto scroll to the end of the list */
              overflow-y: auto;
              padding: 1rem;
              display: flex;
              flex-wrap: wrap;
              align-content: flex-start;
            }

            ha-check-list-item {
              color: white;
              font-size: 3vw;
              line-height: 1.6;
            }

            ha-card.type-todo-list div.header,
            ha-card.type-todo-list .addRow,
            ha-card.type-todo-list div.divider,
            ha-check-list-item.editRow.completed {
              display: none;
            }