<?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('Cards | Expense', 'dashboard-page cards-import-page', 'cards');
?>
<div class="page-surface page-surface--white">
    <header class="import-header">
        <h1>Import Statement</h1>
        <a class="page-close-button" href="<?= e(page_url('cards')) ?>" aria-label="Close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </a>
    </header>

    <div class="import-stepper" aria-label="Import statement steps">
        <span class="import-step is-complete"><strong>1</strong> Enter Card Details</span>
        <span class="import-step is-active"><strong>2</strong> Select file</span>
        <span class="import-step"><strong>3</strong> Map fields</span>
        <span class="import-step"><strong>4</strong> Finish Import</span>
    </div>

    <section class="import-upload-shell">
        <div class="import-upload-box import-upload-box--filled">
            <div class="import-upload-target">
                <i class="fa-solid fa-file-pdf" aria-hidden="true"></i>
                <strong>Admit Card.pdf</strong>
                <a href="#">Remove</a>
                <button type="button" class="expense-primary expense-primary--small">Replace File</button>
                <small>File format : CSV or TSV or OFX or QIF or CAMT.053 or PDF</small>
            </div>
        </div>

        <p class="import-note">View our <a href="#">sample file</a> to ensure you import files in the standard format.</p>

        <label class="bank-terms-check bank-terms-check--inline">
            <input type="checkbox" checked>
            <span>This file is password protected</span>
        </label>

        <label class="import-field import-field--compact">
            <span>Password *</span>
            <input type="password">
        </label>

        <footer class="expense-actions expense-actions--center">
            <a class="expense-primary" href="<?= e(route_url('cards/import-statement/bank/')) ?>">Import</a>
            <a class="expense-ghost" href="<?= e(page_url('cards')) ?>">Cancel</a>
        </footer>
    </section>
</div>
<?php render_expense_shell_end(); ?>
