Mealie: Showing today's meal

[WToa]

Here's what I have for showing what's on the menu for the day (add this under widgets)

- type: custom-api
  title: Today's Meal
  cache: 1m
  url: http://mealie.wherever/api/households/mealplans/today
  headers:
    Authorization: Bearer YOUR_BEARER_TOKEN_HERE
  template: |
    <div class="flex gap-15 justify-between">
      {{ range .JSON.Array "" }}
        <div class="card widget-content-frame flex-1" style="min-width: 0; max-width: calc(50% - 7.5px);">
          <div class="absolute" style="top: 10px; left: 10px; background-color: var(--color-widget-background); padding: 4px 8px; border-radius: var(--border-radius); z-index: 1;">
            <span class="size-h5 uppercase color-primary">{{.String "entryType"}}</span>
          </div>
          <div class="relative" style="height: 180px; overflow: hidden; border-radius: var(--border-radius) var(--border-radius) 0 0;">
            <img src="http://mealie.wherever/api/media/recipes/{{.String "recipeId"}}/images/original.webp" 
                class="max-width-100" style="width: 100%; height: 100%; object-fit: cover;"/>
          </div>
          <div class="padding-block-5 padding-inline-widget">
            <h3 class="size-h3 color-highlight margin-block-5 text-truncate">{{.String "recipe.name"}}</h3>
          </div>
        </div>
      {{ else }}
        <p class="text-center color-subdue padding-block-5 flex-1">No meals planned for today</p>
      {{ end }}
    </div>

And you'll get something that looks like this: