<?php
session_start();

require_once __DIR__ . '/../../../includes/helpers.php';
require_once __DIR__ . '/../../../includes/layout.php';
require_once __DIR__ . '/../../../includes/expense_shell.php';

if (!isset($_SESSION['authenticated'])) {
    redirect(page_url('signin'));
}

render_expense_shell_start('From Cards | Expenses | Zoho Expense', 'dashboard-page transactions-page', 'expenses');
?>
<div class="page-surface page-surface--white transactions-surface">
    <header class="transactions-header">
        <nav class="expense-tabs expense-tabs--transactions" aria-label="Expense tabs">
            <a class="expense-tab" href="<?= e(route_url('expenses/new/')) ?>">
                <i class="fa-regular fa-square-plus"></i>
                <span>Add Expense</span>
            </a>
            <a class="expense-tab" href="<?= e(route_url('expenses/new/bulkadd/')) ?>">
                <i class="fa-regular fa-table-cells-large"></i>
                <span>Bulk Add Expenses</span>
            </a>
            <a class="expense-tab is-active" href="<?= e(route_url('expenses/new/transactions/')) ?>">
                <i class="fa-regular fa-credit-card"></i>
                <span>From Cards</span>
            </a>
        </nav>
        <a class="page-close-button page-close-button--inline" href="<?= e(page_url('dashboard')) ?>" aria-label="Close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </a>
    </header>

    <section class="transactions-toolbar">
        <button type="button" class="transactions-title">
            <span>Unmatched Transactions</span>
            <i class="fa-solid fa-caret-down" aria-hidden="true"></i>
        </button>

        <button type="button" class="transactions-filter" aria-label="Filter">
            <i class="fa-solid fa-filter" aria-hidden="true"></i>
        </button>
    </section>

    <section class="transactions-board" aria-label="Unmatched transactions">
        <table class="transactions-table">
            <thead>
                <tr>
                    <th class="transactions-select-col">
                        <label class="transactions-check">
                            <input type="checkbox" aria-label="Select all transactions">
                        </label>
                    </th>
                    <th>DATE</th>
                    <th>PAYEE</th>
                    <th>DETAILS</th>
                    <th>CARD/ACCOUNT NAME</th>
                    <th class="transactions-amount-col">AMOUNT</th>
                </tr>
            </thead>
        </table>

        <div class="transactions-empty-state">
            You don't have any unmatched transactions
        </div>
    </section>
</div>
<?php render_expense_shell_end(); ?>
