{% load i18n %}

<span class="flex gap-4 items-center">
    {% if value.3 and value.3.path %}
        {% if value.3.as_background %}
            <span class="block bg-center bg-contain bg-no-repeat {% if not value.3.width %}w-16{% endif %} {% if not value.3.height %}h-12{% endif %}" style="background-image: url({{ value.3.path }}); {% if value.3.height %}height: {{ value.3.height }}px;{% endif %} {% if value.3.width %}width: {{ value.3.width }}px;{% endif %}">
            </span>
        {% else %}
            <span class="bg-center bg-cover bg-white flex font-medium justify-center overflow-hidden dark:bg-base-900 dark:border-base-700 {% if value.3.squared %}rounded{% else %}rounded-full{% endif %}{% if not value.3.borderless %} border{% endif %}{% if not value.3.width or not value.3.height %} h-8 max-w-8 min-w-8{% endif %}">
                <img loading="lazy" src="{{ value.3.path }}" class="max-w-none object-cover" {% if value.3.width %}width="{{ value.3.width }}"{% endif %} {% if value.3.height %}height="{{ value.3.height }}"{% endif %} alt="{% trans "Record picture" %}" />
            </span>
        {% endif %}
    {% elif value.2 %}
        <span class="bg-white border flex font-medium h-8 justify-center items-center rounded-full text-xs uppercase w-8 dark:bg-base-900 dark:border-base-700">
            {{ value.2 }}
        </span>
    {% endif %}

    <span class="flex flex-col text-right lg:text-left">
        {% if value.0 %}
            <strong class="block font-normal">{{ value.0 }}</strong>
        {% endif %}

        {% if value.1 %}
            <p class="text-base-500">
                {{ value.1 }}
            </p>
        {% endif %}
    </span>
</div>
