<div class="max-w-full px-3 py-3 space-y-3">
    {% if not orders %}
      <div class="rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700">
        No orders yet.
      </div>
    {% else %}
      <div class="overflow-x-auto rounded-2xl border border-stone-200 bg-white/80">
        <table class="min-w-full text-xs sm:text-sm">
          <thead class="bg-stone-50 border-b border-stone-200 text-stone-600">
            <tr>
              <th class="px-3 py-2 text-left font-medium">Order</th>
              <th class="px-3 py-2 text-left font-medium">Created</th>
              <th class="px-3 py-2 text-left font-medium">Description</th>
              <th class="px-3 py-2 text-left font-medium">Total</th>
              <th class="px-3 py-2 text-left font-medium">Status</th>
              <th class="px-3 py-2 text-left font-medium"></th>
            </tr>
          </thead>
          <tbody>
            {# rows + infinite-scroll sentinel #}
            {% include "_types/orders/_rows.html" %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </div>
