{# suma_browser/templates/_types/order/_orders_rows.html #}

{# --- existing rows, but split into desktop/tablet vs mobile --- #}
{% for order in orders %}
  {# Desktop / tablet table row #}
  <tr class="hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60">
    <td class="px-3 py-2 align-top">
      <span class="font-mono text-[11px] sm:text-xs">#{{ order.id }}</span>
    </td>
    <td class="px-3 py-2 align-top text-stone-700 text-xs sm:text-sm">
      {% if order.created_at %}
        {{ order.created_at.strftime('%-d %b %Y, %H:%M') }}
      {% else %}
        —
      {% endif %}
    </td>
    <td class="px-3 py-2 align-top text-stone-700 text-xs sm:text-sm">
      {{ order.description or '' }}
    </td>
    
    <td class="px-3 py-2 align-top text-stone-700 text-xs sm:text-sm">
      {{ order.currency or 'GBP' }}
      {{ '%.2f'|format(order.total_amount or 0) }}
    </td>
    <td class="px-3 py-2 align-top">
      {# status pill, roughly matching existing styling #}
      <span
        class="
          inline-flex items-center rounded-full border px-2 py-0.5
          text-[11px] sm:text-xs
          {% if (order.status or '').lower() == 'paid' %}
            border-emerald-300 bg-emerald-50 text-emerald-700
          {% elif (order.status or '').lower() in ['failed', 'cancelled'] %}
            border-rose-300 bg-rose-50 text-rose-700
          {% else %}
            border-stone-300 bg-stone-50 text-stone-700
          {% endif %}
        "
      >
        {{ order.status or 'pending' }}
      </span>
    </td>
    <td class="px-3 py-0.5 align-top text-right">
      <a
        href="{{ url_for('orders.order.order_detail', order_id=order.id)|host }}"
        class="inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
      >
        View
      </a>
    </td>
  </tr>

  {# Mobile card row #}
  <tr class="sm:hidden border-t border-stone-100">
    <td colspan="5" class="px-3 py-3">
      <div class="flex flex-col gap-2 text-xs">
        <div class="flex items-center justify-between gap-2">
          <span class="font-mono text-[11px] text-stone-700">
            #{{ order.id }}
          </span>

          <span
            class="
              inline-flex items-center rounded-full border px-2 py-0.5
              text-[11px]
              {% if (order.status or '').lower() == 'paid' %}
                border-emerald-300 bg-emerald-50 text-emerald-700
              {% elif (order.status or '').lower() in ['failed', 'cancelled'] %}
                border-rose-300 bg-rose-50 text-rose-700
              {% else %}
                border-stone-300 bg-stone-50 text-stone-700
              {% endif %}
            "
          >
            {{ order.status or 'pending' }}
          </span>
        </div>

        <div class="text-[11px] text-stone-500 break-words">
          {{ order.created_at or '' }}
        </div>

        <div class="flex items-center justify-between gap-2">
          <div class="font-medium text-stone-800">
            {{ order.currency or 'GBP' }}
            {{ '%.2f'|format(order.total_amount or 0) }}
          </div>

          <a
            href="{{ url_for('orders.order.order_detail', order_id=order.id)|host }}"
            class="inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0"
          >
            View
          </a>
        </div>
      </div>
    </td>
  </tr>
{% endfor %}

{# --- sentinel / end-of-results --- #}
{% if page < total_pages|int %}
  <tr
    id="orders-sentinel-{{ page }}"
    hx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host }}"
    hx-trigger="intersect once delay:250ms, sentinel:retry"
    hx-swap="outerHTML"
    _="
      init
        if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end

      on sentinel:retry
        remove .hidden from .js-loading in me
        add .hidden to .js-neterr in me
        set me.style.pointerEvents to 'none'
        set me.style.opacity to '0'
        trigger htmx:consume on me
        call htmx.trigger(me, 'intersect')
      end

      def backoff()
        add .hidden to .js-loading in me
        remove .hidden from .js-neterr in me
        set myMs to Number(me.dataset.retryMs)
        if myMs < 10000 then set me.dataset.retryMs to myMs * 2 end
        js setTimeout(() => htmx.trigger(me, 'sentinel:retry'), myMs)
      end

      on htmx:beforeRequest
        set me.style.pointerEvents to 'none'
        set me.style.opacity to '0'
      end

      on htmx:afterSwap
        set me.dataset.retryMs to 1000
      end

      on htmx:sendError     call backoff()
      on htmx:responseError call backoff()
      on htmx:timeout       call backoff()
    "
    role="status"
    aria-live="polite"
    aria-hidden="true"
  >
    <td colspan="5" class="px-3 py-4">
      {# Mobile sentinel content #}
      <div class="block md:hidden h-[60vh] js-mobile-sentinel">
        {% include "sentinel/mobile_content.html" %}
      </div>

      {# Desktop sentinel content #}
      <div class="hidden md:block h-[30vh] js-desktop-sentinel">
        {% include "sentinel/desktop_content.html" %}
      </div>
    </td>
  </tr>
{% else %}
  <tr>
    <td colspan="5" class="px-3 py-4 text-center text-xs text-stone-400">
      End of results
    </td>
  </tr>
{% endif %}
