Table

import { Component } from '@angular/core';
import { HlmTableImports } from '@spartan-ng/helm/table';

@Component({
	selector: 'spartan-table-preview',
	imports: [...HlmTableImports],
	host: {
		class: 'w-full overflow-x-auto',
	},
	template: `
		<table hlmTable>
			<caption hlmCaption>A list of your recent invoices.</caption>
			<thead hlmTHead>
				<tr hlmTr>
					<th hlmTh class="w-[100px]">Invoice</th>
					<th hlmTh>Status</th>
					<th hlmTh>Method</th>
					<th hlmTh class="text-right">Amount</th>
				</tr>
			</thead>
			<tbody hlmTBody>
				@for (invoice of _invoices; track invoice.invoice) {
					<tr hlmTr>
						<td hlmTd class="font-medium">{{ invoice.invoice }}</td>
						<td hlmTd>{{ invoice.paymentStatus }}</td>
						<td hlmTd>{{ invoice.paymentMethod }}</td>
						<td hlmTd class="text-right">{{ invoice.totalAmount }}</td>
					</tr>
				}
			</tbody>
			<tfoot hlmTFoot>
				<tr hlmTr>
					<td hlmTd [attr.colSpan]="3">Total</td>
					<td hlmTd class="text-right">$2,500.00</td>
				</tr>
			</tfoot>
		</table>
	`,
})
export class TablePreview {
	protected _invoices = [
		{
			invoice: 'INV001',
			paymentStatus: 'Paid',
			totalAmount: '$250.00',
			paymentMethod: 'Credit Card',
		},
		{
			invoice: 'INV002',
			paymentStatus: 'Pending',
			totalAmount: '$150.00',
			paymentMethod: 'PayPal',
		},
		{
			invoice: 'INV003',
			paymentStatus: 'Unpaid',
			totalAmount: '$350.00',
			paymentMethod: 'Bank Transfer',
		},
		{
			invoice: 'INV004',
			paymentStatus: 'Paid',
			totalAmount: '$450.00',
			paymentMethod: 'Credit Card',
		},
		{
			invoice: 'INV005',
			paymentStatus: 'Paid',
			totalAmount: '$550.00',
			paymentMethod: 'PayPal',
		},
		{
			invoice: 'INV006',
			paymentStatus: 'Pending',
			totalAmount: '$200.00',
			paymentMethod: 'Bank Transfer',
		},
		{
			invoice: 'INV007',
			paymentStatus: 'Unpaid',
			totalAmount: '$300.00',
			paymentMethod: 'Credit Card',
		},
	];
}