{% set _rendered = field.render(value) if field.render is defined else (value | string if value else '—') %}
{% set _css = field.get_css(value) if field.get_css is defined else 'bg-secondary-100 text-secondary-700 dark:bg-secondary-700 dark:text-secondary-300' %}
{% if in_section %}
<div class="{{ span_class }} px-5 py-4">
  <dt class="text-xs font-medium text-secondary-500 dark:text-secondary-400 uppercase tracking-wide mb-1">{{ field.get_label() }}</dt>
  <dd class="mt-1">
    {% if _rendered and _rendered != '—' %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ _css }}">{{ _rendered }}</span>
    {% else %}<span class="text-secondary-400 dark:text-secondary-500 italic">—</span>{% endif %}
  </dd>
</div>
{% else %}
<div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-6">
  <dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400 flex items-center">{{ field.get_label() }}</dt>
  <dd class="mt-1 sm:mt-0 sm:col-span-2">
    {% if _rendered and _rendered != '—' %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ _css }}">{{ _rendered }}</span>
    {% else %}<span class="text-secondary-400 dark:text-secondary-500 italic">—</span>{% endif %}
  </dd>
</div>
{% endif %}