{% extends "base.html" %}

{% block title %}Import CSV - FINA{% endblock %}

{% block body %}
<div class="flex h-screen w-full">
    <!-- Sidebar -->
    <aside id="sidebar" class="hidden lg:flex w-64 flex-col bg-sidebar-light dark:bg-background-dark border-r border-border-light dark:border-[#233648]">
        <div class="p-6 flex flex-col h-full justify-between">
            <div class="flex flex-col gap-8">
                <div class="flex gap-3 items-center">
                    <img src="{{ current_user.avatar | avatar_url }}" alt="{{ current_user.username }}" class="size-10 rounded-full border-2 border-primary/30 object-cover">
                    <div class="flex flex-col">
                        <h1 class="text-text-main dark:text-white text-base font-bold leading-none">{{ current_user.username }}</h1>
                        <p class="text-text-muted dark:text-[#92adc9] text-xs font-normal mt-1">
                            {% if current_user.is_admin %}<span data-translate="user.admin">Admin</span>{% else %}<span data-translate="user.user">User</span>{% endif %}
                        </p>
                    </div>
                </div>
                
                <nav class="flex flex-col gap-2">
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.dashboard') }}">
                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
                        <span class="text-sm font-medium" data-translate="nav.dashboard">Dashboard</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.transactions') }}">
                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
                        <span class="text-sm font-medium" data-translate="nav.transactions">Transactions</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.income') }}">
                        <span class="material-symbols-outlined text-[20px]">payments</span>
                        <span class="text-sm font-medium" data-translate="nav.income">Income</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.recurring') }}">
                        <span class="material-symbols-outlined text-[20px]">repeat</span>
                        <span class="text-sm font-medium" data-translate="nav.recurring">Recurring</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="{{ url_for('main.import_page') }}">
                        <span class="material-symbols-outlined text-[20px]">file_upload</span>
                        <span class="text-sm font-medium" data-translate="nav.import">Import CSV</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.reports') }}">
                        <span class="material-symbols-outlined text-[20px]">pie_chart</span>
                        <span class="text-sm font-medium" data-translate="nav.reports">Reports</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.documents') }}">
                        <span class="material-symbols-outlined text-[20px]">folder_open</span>
                        <span class="text-sm font-medium" data-translate="nav.documents">Documents</span>
                    </a>
                    {% if current_user.is_admin %}
                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.admin') }}">
                        <span class="material-symbols-outlined text-[20px]">admin_panel_settings</span>
                        <span class="text-sm font-medium" data-translate="nav.admin">Admin</span>
                    </a>
                    {% endif %}
                </nav>
            </div>
            
            <div class="flex flex-col gap-2">
                <button id="theme-toggle" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors">
                    <span id="theme-icon" class="material-symbols-outlined text-[20px]">dark_mode</span>
                    <span id="theme-text" class="text-sm font-medium" data-translate="dashboard.darkMode">Dark Mode</span>
                </button>
                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.settings') }}">
                    <span class="material-symbols-outlined text-[20px]">settings</span>
                    <span class="text-sm font-medium" data-translate="nav.settings">Settings</span>
                </a>
                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-red-500 dark:text-red-400 hover:bg-red-500/10 transition-colors" href="{{ url_for('auth.logout') }}">
                    <span class="material-symbols-outlined text-[20px]">logout</span>
                    <span class="text-sm font-medium" data-translate="nav.logout">Log out</span>
                </a>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- Mobile Header -->
        <div class="lg:hidden bg-white dark:bg-[#0f1921] border-b border-border-light dark:border-[#233648] p-4 flex items-center justify-between">
            <button id="menu-toggle" class="text-text-main dark:text-white">
                <span class="material-symbols-outlined">menu</span>
            </button>
            <h1 class="text-lg font-bold text-text-main dark:text-white" data-translate="nav.import">Import CSV</h1>
            <div class="w-6"></div>
        </div>

        <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark pb-20">
            <!-- Header -->
            <div class="bg-white dark:bg-[#0f1921] border-b border-border-light dark:border-[#233648] p-6">
                <div class="max-w-4xl mx-auto">
                    <h1 class="text-2xl font-bold text-text-main dark:text-white mb-2">
                        <span class="material-symbols-outlined align-middle mr-2">file_upload</span>
                        <span id="importTitle">Import CSV</span>
                    </h1>
                    <p class="text-text-muted dark:text-[#92adc9]" id="importSubtitle">
                        Import your bank statements or expense CSV files
                    </p>
                </div>
            </div>

            <!-- Main Content -->
            <div class="max-w-4xl mx-auto p-6">
                <div id="importContainer">
                    <!-- Import UI will be rendered here by import.js -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/import.js') }}"></script>
{% endblock %}