<?php
/**
 * Batch Drawer — Header
 *
 * Mirrors the payout drawer header: pager chevrons absolutely positioned
 * on the title row (near the close-X), then a muted metadata ribbon below.
 *
 * Rendered via the drawer trait's `header_callback` slot.
 *
 * @package     AffiliateWP
 * @subpackage  Admin/Payouts
 * @since       2.33.0
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>
<!--
	top-5 (not top-4) vertically centers the 24px pager bar against the
	32px close-X. Header row is items-start, so top-4 (= py-4) would
	align the bar's TOP with the X's top and leave the pager's center
	4px above the X's center. The extra 4px of offset pushes the
	bar's center down to match.

	Uses x-show (not x-if) so the buttons exist in the DOM at page load,
	letting Tippy's [data-tooltip-html] init scan attach tooltips. With
	x-if the buttons would be cloned in after init runs and never bound.
-->
<div x-show="$store.batchDrawer.batch && $store.batchDrawer.showPager"
	x-cloak
	class="absolute right-20 top-5 flex items-center gap-2 text-xs text-gray-500 z-10">
		<span x-text="$store.batchDrawer.listPosition + ' of ' + $store.batchDrawer.listTotal"></span>
		<span class="text-gray-300" aria-hidden="true">·</span>
		<div class="inline-flex items-center gap-0.5">
			<button type="button"
				@click="$store.batchDrawer.goPrev()"
				:disabled="! $store.batchDrawer.hasPrev"
				class="inline-flex items-center justify-center size-6 rounded bg-transparent border-0 text-gray-500 hover:text-gray-900 hover:bg-gray-100 disabled:opacity-30 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-affwp-brand-500 cursor-pointer transition-colors"
				data-tooltip-html="<?php echo esc_attr( affwp_tooltip( __( 'Prev', 'affiliate-wp' ), '↑' ) ); ?>">
				<span class="sr-only"><?php esc_html_e( 'Previous batch', 'affiliate-wp' ); ?></span>
				<?php \AffiliateWP\Utils\Icons::render( 'chevron-up', [ 'class' => 'size-4' ] ); ?>
			</button>
			<button type="button"
				@click="$store.batchDrawer.goNext()"
				:disabled="! $store.batchDrawer.hasNext"
				class="inline-flex items-center justify-center size-6 rounded bg-transparent border-0 text-gray-500 hover:text-gray-900 hover:bg-gray-100 disabled:opacity-30 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-affwp-brand-500 cursor-pointer transition-colors"
				data-tooltip-html="<?php echo esc_attr( affwp_tooltip( __( 'Next', 'affiliate-wp' ), '↓' ) ); ?>">
				<span class="sr-only"><?php esc_html_e( 'Next batch', 'affiliate-wp' ); ?></span>
				<?php \AffiliateWP\Utils\Icons::render( 'chevron-down', [ 'class' => 'size-4' ] ); ?>
			</button>
		</div>
</div>

<template x-if="$store.batchDrawer.batch">
	<!--
		Muted metadata ribbon: method · total · date · retry-of. Status
		badge lives on the title row (via trait's title_badge_callback),
		not here — state is adjacent to the identifier, not buried in a
		descriptive ribbon.
	-->
	<div class="mt-2 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-gray-500 transition-opacity duration-200"
		:class="{ 'opacity-60': $store.batchDrawer.isNavigating }">

		<template x-if="$store.batchDrawer.batch.payout_method_label">
			<span x-text="$store.batchDrawer.batch.payout_method_label"></span>
		</template>

		<template x-if="$store.batchDrawer.batch.total_amount_formatted">
			<span class="text-gray-300" aria-hidden="true">·</span>
		</template>
		<template x-if="$store.batchDrawer.batch.total_amount_formatted">
			<span x-text="$store.batchDrawer.batch.total_amount_formatted"></span>
		</template>

		<template x-if="$store.batchDrawer.batch.date_short">
			<span class="text-gray-300" aria-hidden="true">·</span>
		</template>
		<template x-if="$store.batchDrawer.batch.date_short">
			<span x-text="$store.batchDrawer.batch.date_short"></span>
		</template>

		<template x-if="$store.batchDrawer.batch.retry_of_batch_id > 0">
			<span class="text-gray-300" aria-hidden="true">·</span>
		</template>
		<!--
			Retry-of pointer. If the parent batch still exists, render as a
			clickable brand-color link. If the parent has been deleted, fall
			back to plain muted text so we're not promising a navigation that
			won't work.
		-->
		<template x-if="$store.batchDrawer.batch.retry_of_batch_id > 0 && $store.batchDrawer.batch.retry_of_batch_url">
			<a :href="$store.batchDrawer.batch.retry_of_batch_url"
				class="text-affwp-link hover:text-affwp-link-hover"
				x-text="'retry of #' + $store.batchDrawer.batch.retry_of_batch_id"></a>
		</template>
		<template x-if="$store.batchDrawer.batch.retry_of_batch_id > 0 && ! $store.batchDrawer.batch.retry_of_batch_url">
			<span class="text-gray-500"
				x-text="'retry of #' + $store.batchDrawer.batch.retry_of_batch_id + ' (deleted)'"></span>
		</template>
	</div>
</template>
