{% set _url = field.get_url(value) if field.get_url is defined else None %}
{% set _download_label = field.get_download_label() if field.get_download_label is defined else 'Download' %}
{% 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 _url %}
      <a href="{{ _url }}" target="_blank" rel="noopener"
         class="inline-flex items-center gap-1.5 text-sm text-primary-600 dark:text-primary-400 hover:underline">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        {{ _download_label }}
      </a>
    {% 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 _url %}
      <a href="{{ _url }}" target="_blank" rel="noopener"
         class="inline-flex items-center gap-1.5 text-sm text-primary-600 dark:text-primary-400 hover:underline">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        {{ _download_label }}
      </a>
    {% else %}<span class="text-secondary-400 dark:text-secondary-500 italic">—</span>{% endif %}
  </dd>
</div>
{% endif %}