{% 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.label }}</dt>
  <dd class="text-sm text-secondary-900 dark:text-secondary-100 mt-0.5">
    {% if value is not none and value != '' %}
      {% set badge_col = none %}
      {% for col in resource.table_columns %}
        {% if col.key == field.key and col.__class__.__name__ == 'Badge' %}{% set badge_col = col %}{% endif %}
      {% endfor %}
      {% if badge_col %}
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ badge_col.css_classes(value) }}">{{ value }}</span>
      {% else %}{{ value }}{% endif %}
    {% 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.label }}</dt>
  <dd class="mt-1 sm:mt-0 sm:col-span-2 text-sm text-secondary-900 dark:text-secondary-100">
    {% if value is not none and value != '' %}
      {% set badge_col = none %}
      {% for col in resource.table_columns %}
        {% if col.key == field.key and col.__class__.__name__ == 'Badge' %}
          {% set badge_col = col %}
        {% endif %}
      {% endfor %}
      {% if badge_col %}
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                     {{ badge_col.css_classes(value) }}">
          {{ value }}
        </span>
      {% else %}
        {{ value }}
      {% endif %}
    {% else %}
      <span class="text-secondary-400 dark:text-secondary-500 italic">—</span>
    {% endif %}
  </dd>
</div>
{% endif %}