{# @description Who said it: a small portrait, the name, and what they do or where it was published. The caption of every quote in the family. #}
{# @prop name:text | description:"Who said it" #}
{# @prop role:text | description:"What they do and where, under the name" #}
{# @prop source:text | description:"The work it comes from: a book, a paper, a publication. Marked up as a citation." #}
{# @prop href:text | description:"Where the source can be read. Turns the source into a link." #}
{# @prop src:text | description:"A portrait of the person, shown in daisy-cotton's avatar. Square works best." #}
{# @prop align:select['start', 'centre'] | default:"start" | description:"Portrait beside the name, or stacked above it and centred" #}
{# @prop size:select['md', 'lg'] | default:"md" | description:"How large the name and the line under it are set" #}
{# @prop invert:boolean | default:False | description:"Leave the second line at the surrounding colour, for a dark or coloured surface" #}
{# @prop class:text | description:"Extra classes on the caption" #}
{% comment %}
  A `figcaption`, so it only belongs as the first or last child of a `figure`.
  The portrait's `alt` is empty because the name sits beside it. `cite` wraps the
  source and never the person: the element names a work.
{% endcomment %}
<c-vars name role source href src align="start" size="md" invert class />
<figcaption class="flex items-center gap-3 {% if align == 'centre' %}flex-col text-center{% endif %} {{ class }}"
            {{ attrs }}>
  {% if src %}
    <c-avatar src="{{ src }}" alt="" only />
  {% endif %}
  <div class="min-w-0 {% if size == 'lg' %}text-base{% else %}text-sm{% endif %}">
    {% if name %}<div class="font-semibold">{{ name }}</div>{% endif %}
    {% if role or source %}
      <div class="{% if not invert %}text-base-content/80{% endif %}">
        {{ role }}{% if role and source %}, {% endif %}{% if source %}<cite class="italic">{% if href %}<a class="link" href="{{ href }}">{{ source }}</a>{% else %}{{ source }}{% endif %}</cite>{% endif %}
      </div>
    {% endif %}
  </div>
</figcaption>