{# @description A card-shaped stand-in for a region that isn't built yet. #}
{# @prop message:text | default:"Coming soon..." | description:"Text shown in the placeholder." #}
{# @prop height:text | description:"CSS height for the card, e.g. a fixed size to match the region it stands in for." #}
{# @prop icon:text | description:"Icon shown above the message." #}
{# @prop class:text | description:"Extra classes on the card." #}
{% load i18n %}
<c-vars message="{% trans "Coming soon..." %}"
        height
        icon
        class />
<div class="card bg-base-200 {{ class }}"
     {% if height %}style="height: {{ height }}"{% endif %}>
  <div class="card-body flex justify-center items-center">
    <div class="text-center">
      {% if icon %}<c-icon name="{{ icon }}" class="text-5xl" />{% endif %}
      <p>{{ message }}</p>
    </div>
  </div>
</div>