{% extends 'base.html' %}

{% block title %}Invoices - FinBot Vendor Portal{% endblock %}

{% block meta_description %}Manage your invoices with AI-powered processing. Create, track, and manage all your vendor invoices in one place.{% endblock %}

{% block nav_invoices %}active{% endblock %}

{% block page_title %}Invoice Management{% endblock %}
{% block page_subtitle %}Create, manage, and track your invoices with AI-powered processing{% endblock %}

{% block header_actions %}
<button id="create-invoice-btn" class="vendor-btn quantum-accent">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
    </svg>
    Create Invoice
</button>
<!-- <button class="vendor-btn quantum-secondary">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
    </svg>
    Upload Invoice
</button> -->
<a href="/vendor/assistant" class="vendor-btn quantum-primary">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
    </svg>
    AI Assistant
</a>
{% endblock %}

{% block content %}
<!-- Invoice Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
        </div>
        <div id="stat-total-count" class="metric-value">0</div>
        <div class="metric-label">Total</div>
    </div>

    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
            </svg>
        </div>
        <div id="stat-total-amount" class="metric-value">$0</div>
        <div class="metric-label">Total Value</div>
    </div>

    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
            </svg>
        </div>
        <div id="stat-paid-rate" class="metric-value">0%</div>
        <div class="metric-label">Paid</div>
    </div>

    <div class="neural-metric" data-no-animate>
        <div class="metric-icon">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>
        <div id="stat-overdue-count" class="metric-value">0</div>
        <div class="metric-label">Overdue</div>
    </div>
</div>

<!-- Invoice Management Interface -->
<div class="holo-card">
    <div class="holo-header">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-text-bright">All Invoices</h2>

            <div class="flex items-center space-x-4">
                <!-- hiding filters and search for now-->
                <!-- Filter Dropdown -->
                <!--

                <div class="relative">
                    <select class="vendor-input text-sm py-2 px-3 pr-8">
                        <option value="all">All Status</option>
                        <option value="paid">Paid</option>
                        <option value="pending">Pending</option>
                        <option value="overdue">Overdue</option>
                        <option value="draft">Draft</option>
                    </select>
                </div>
                -->
                <!-- Search -->
                <!--
                <div class="relative">
                    <input type="text" placeholder="Search invoices..." class="vendor-input text-sm py-2 pl-10 pr-4 w-64">
                    <svg class="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                -->
            </div>
        </div>
    </div>

    <div class="holo-body">
        <!-- Invoice Table -->
        <div class="overflow-x-auto">
            <table class="neural-table">
                <thead>
                    <tr>
                        <th>Invoice Number</th>
                        <th>Amount</th>
                        <th>Date</th>
                        <th>Due Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="invoices-table-body">
                    <!-- Invoices will be loaded dynamically -->
                    <tr class="loading-row">
                        <td colspan="6" class="text-center py-8">
                            <div class="flex items-center justify-center space-x-3">
                                <svg class="animate-spin h-5 w-5 text-vendor-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span class="text-text-secondary">Loading invoices...</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Empty State (hidden by default) -->
        <div id="invoices-empty-state" class="hidden text-center py-12">
            <svg class="w-16 h-16 mx-auto text-text-secondary mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            <h3 class="text-lg font-medium text-text-bright mb-2">No invoices yet</h3>
            <p class="text-text-secondary mb-4">Create your first invoice to get started</p>
            <button class="vendor-btn quantum-accent create-invoice-trigger">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
                Create Invoice
            </button>
        </div>

        <!-- Pagination -->
        <div class="flex items-center justify-between mt-6 pt-6 border-t border-vendor-primary/20">
            <div class="text-sm text-text-secondary">
                Showing 50 recent invoices
            </div>
            <!-- hiding pagination for now
            <div class="flex items-center space-x-2">
                <button class="vendor-btn quantum-secondary text-xs px-3 py-2" disabled>
                    Previous
                </button>
                <button class="vendor-btn quantum-primary text-xs px-3 py-2">
                    1
                </button>
                <button class="vendor-btn quantum-secondary text-xs px-3 py-2">
                    2
                </button>
                <button class="vendor-btn quantum-secondary text-xs px-3 py-2">
                    Next
                </button>
            </div>
            -->
        </div>
    </div>
</div>

<!-- Create/Edit Invoice Modal -->
<div id="invoice-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-portal-bg-secondary border border-vendor-primary/30 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
        <div class="p-6 border-b border-vendor-primary/20">
            <div class="flex items-center justify-between">
                <h3 id="invoice-modal-title" class="text-xl font-bold text-text-bright">Create Invoice</h3>
                <button id="close-invoice-modal-btn" class="text-text-secondary hover:text-text-bright transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>
        <div class="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
            <form id="invoice-form" class="space-y-6">
                <!-- CSRF Token -->
                {{ csrf_token_field | safe }}

                <!-- Hidden field for edit mode -->
                <input type="hidden" id="invoice-id" name="invoice_id" value="">

                <!-- Invoice Details -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-vendor-primary border-b border-vendor-primary/30 pb-2">
                        Invoice Details
                    </h4>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="vendor-form-group">
                            <label for="invoice-number" class="vendor-label">Invoice Number <span class="text-vendor-danger">*</span></label>
                            <input type="text" id="invoice-number" name="invoice_number" class="vendor-input" placeholder="INV-2026-001" required>
                        </div>
                        <div class="vendor-form-group">
                            <label for="invoice-amount" class="vendor-label">Amount <span class="text-vendor-danger">*</span></label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">$</span>
                                <input type="number" id="invoice-amount" name="amount" class="vendor-input pl-7" placeholder="0.00" step="0.01" min="0" required>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="vendor-form-group">
                            <label for="invoice-date" class="vendor-label">Invoice Date <span class="text-vendor-danger">*</span></label>
                            <input type="date" id="invoice-date" name="invoice_date" class="vendor-input" required>
                        </div>
                        <div class="vendor-form-group">
                            <label for="invoice-due-date" class="vendor-label">Due Date <span class="text-vendor-danger">*</span></label>
                            <input type="date" id="invoice-due-date" name="due_date" class="vendor-input" required>
                        </div>
                    </div>

                    <div class="vendor-form-group">
                        <label for="invoice-description" class="vendor-label">Description <span class="text-vendor-danger">*</span></label>
                        <textarea id="invoice-description" name="description" rows="4" class="vendor-input resize-none" placeholder="Describe the services or goods provided..." required></textarea>
                    </div>
                </div>

                <!-- FinDrive Attachments -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-vendor-primary border-b border-vendor-primary/30 pb-2 flex items-center justify-between">
                        <span>Attachments</span>
                        <button type="button" id="attach-files-btn" class="vendor-btn quantum-secondary text-xs px-3 py-1.5">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                            </svg>
                            Attach from FinDrive
                        </button>
                    </h4>
                    <div id="invoice-attachments" class="flex flex-wrap gap-2">
                        <p id="no-attachments-msg" class="text-xs text-text-secondary italic">No files attached. Click "Attach from FinDrive" to add supporting documents.</p>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-end space-x-4 pt-4 border-t border-vendor-primary/20">
                    <button type="button" id="cancel-invoice-btn" class="vendor-btn quantum-secondary">
                        Cancel
                    </button>
                    <button type="submit" id="submit-invoice-btn" class="vendor-btn quantum-accent">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        <span id="submit-invoice-text">Create Invoice</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Invoice Details Sidecar -->
<div id="invoice-sidecar-backdrop" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 hidden transition-opacity duration-300 opacity-0"></div>
<div id="invoice-sidecar" class="fixed top-0 right-0 h-full w-full max-w-lg bg-portal-bg-secondary border-l border-vendor-primary/30 shadow-2xl z-50 transform translate-x-full transition-transform duration-300 ease-out overflow-hidden flex flex-col">
    <!-- Sidecar Header -->
    <div class="flex items-center justify-between p-6 border-b border-vendor-primary/20 bg-portal-bg-secondary/95 backdrop-blur-sm">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-r from-vendor-primary to-vendor-secondary flex items-center justify-center">
                <svg class="w-5 h-5 text-text-bright" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div>
                <h3 class="text-lg font-bold text-text-bright">Invoice Details</h3>
                <p id="sidecar-invoice-number" class="text-sm text-text-secondary font-mono">INV-0000</p>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <button id="sidecar-edit-btn" class="vendor-btn quantum-secondary text-xs px-3 py-2">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Edit
            </button>
            <button id="close-sidecar-btn" class="p-2 text-text-secondary hover:text-text-bright hover:bg-white/5 rounded-lg transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Sidecar Content -->
    <div class="flex-1 overflow-y-auto p-6 space-y-6">
        <!-- Status Badge -->
        <div class="flex items-center justify-between">
            <span id="sidecar-status" class="status-indicator pending">Pending</span>
            <span id="sidecar-amount" class="text-2xl font-bold text-vendor-accent">$0.00</span>
        </div>

        <!-- Invoice Information Section -->
        <div class="space-y-4">
            <h4 class="text-sm font-semibold text-vendor-primary uppercase tracking-wide flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Invoice Information
            </h4>
            <div class="bg-portal-surface rounded-xl p-4 space-y-3 border border-vendor-primary/10">
                <div class="flex justify-between items-center">
                    <span class="text-text-secondary text-sm">Invoice Date</span>
                    <span id="sidecar-invoice-date" class="text-text-bright font-medium">-</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-text-secondary text-sm">Due Date</span>
                    <span id="sidecar-due-date" class="text-text-bright font-medium">-</span>
                </div>
            </div>
        </div>

        <!-- Description Section -->
        <div class="space-y-4">
            <h4 class="text-sm font-semibold text-vendor-primary uppercase tracking-wide flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                </svg>
                Description
            </h4>
            <div class="bg-portal-surface rounded-xl p-4 border border-vendor-primary/10">
                <p id="sidecar-description" class="text-text-bright text-sm leading-relaxed">No description provided.</p>
            </div>
        </div>

        <!-- Attachments Section -->
        <div id="sidecar-attachments-section" class="space-y-4 hidden">
            <h4 class="text-sm font-semibold text-vendor-primary uppercase tracking-wide flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                </svg>
                Attachments
            </h4>
            <div id="sidecar-attachments-list" class="bg-portal-surface rounded-xl p-3 border border-vendor-primary/10 space-y-2"></div>
        </div>

        <!-- Agent Notes Section -->
        <div class="space-y-4">
            <h4 class="text-sm font-semibold text-vendor-primary uppercase tracking-wide flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                </svg>
                Processing Notes
            </h4>
            <div class="bg-portal-surface rounded-xl p-4 border border-vendor-secondary/20">
                <div id="sidecar-agent-notes" class="text-sm text-text-bright leading-relaxed max-h-48 overflow-y-auto">
                    <span class="text-text-secondary italic">No processing notes available.</span>
                </div>
            </div>
        </div>

        <!-- Timestamps Section -->
        <div class="space-y-4">
            <h4 class="text-sm font-semibold text-vendor-primary uppercase tracking-wide flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Activity
            </h4>
            <div class="bg-portal-surface rounded-xl p-4 space-y-3 border border-vendor-primary/10">
                <div class="flex justify-between items-center">
                    <span class="text-text-secondary text-sm">Created</span>
                    <span id="sidecar-created-at" class="text-text-bright text-sm">-</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-text-secondary text-sm">Last Updated</span>
                    <span id="sidecar-updated-at" class="text-text-bright text-sm">-</span>
                </div>
            </div>
        </div>

        <!-- Re-process Invoice Section -->
        <div class="space-y-4">
            <h4 class="text-sm font-semibold text-vendor-primary uppercase tracking-wide flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Actions
            </h4>
            <div id="reprocess-section" class="p-4 bg-gradient-to-r from-vendor-primary/5 to-vendor-secondary/5 rounded-xl border border-vendor-primary/20">
                <div class="flex items-center justify-between">
                    <div class="flex-1 mr-4">
                        <p class="text-sm text-text-secondary">
                            Need the invoice reviewed again? Request AI re-processing.
                        </p>
                    </div>
                    <button id="reprocess-invoice-btn" class="vendor-btn quantum-secondary whitespace-nowrap text-xs px-3 py-2">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        Re-process
                    </button>
                </div>
                <div id="reprocess-status-message" class="hidden mt-3 p-3 rounded-lg text-sm"></div>
            </div>
        </div>
    </div>
</div>
<!-- FinDrive File Picker Modal -->
<div id="findrive-picker-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] hidden flex items-center justify-center p-4">
    <div class="bg-portal-bg-secondary border border-vendor-primary/30 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[70vh] overflow-hidden">
        <div class="p-4 border-b border-vendor-primary/20 flex items-center justify-between">
            <h3 class="text-lg font-bold text-text-bright">Attach files from FinDrive</h3>
            <button id="close-picker-btn" class="text-text-secondary hover:text-text-bright transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="picker-files-grid" class="p-4 overflow-y-auto max-h-[calc(70vh-120px)] grid grid-cols-3 sm:grid-cols-4 gap-3">
            <p class="col-span-full text-center text-text-secondary py-8">Loading files...</p>
        </div>
        <div class="p-3 border-t border-vendor-primary/20 flex justify-end">
            <button id="picker-done-btn" class="vendor-btn quantum-accent text-sm px-4 py-2">Done</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.quantum-warning {
    background: linear-gradient(135deg, var(--vendor-warning), #ff8c00);
    color: var(--portal-bg-primary);
    box-shadow: 0 8px 25px rgba(255, 184, 0, 0.3);
}

.quantum-warning:hover {
    box-shadow: 0 12px 35px rgba(255, 184, 0, 0.4);
    transform: translateY(-2px);
    color: var(--portal-bg-primary);
    text-decoration: none;
}

/* Action buttons */
.action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.action-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--vendor-primary);
}

.action-btn.edit:hover {
    background: rgba(6, 255, 165, 0.1);
    border-color: rgba(6, 255, 165, 0.3);
    color: var(--vendor-accent);
}

/* Sidecar styles */
#invoice-sidecar.open {
    transform: translateX(0);
}

#invoice-sidecar-backdrop.open {
    opacity: 1;
}

/* Agent notes timeline styling */
.agent-note-entry {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
}

.agent-note-entry:not(:last-child) {
    border-left: 1px solid rgba(0, 212, 255, 0.3);
}

.agent-note-entry::before {
    content: '';
    position: absolute;
    left: -0.375rem;
    top: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--vendor-primary);
}

.agent-note-entry.latest::before {
    background: var(--vendor-accent);
}

/* Attachment chips */
.attach-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px; border-radius: 6px;
    background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2);
    font-size: 12px; color: #e2e8f0;
}
.attach-chip-remove {
    background: none; border: none; color: #94a3b8; cursor: pointer;
    padding: 0; line-height: 1; font-size: 14px;
}
.attach-chip-remove:hover { color: #f87171; }

/* Picker card */
.picker-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 8px 10px; border-radius: 8px;
    border: 2px solid transparent; cursor: pointer;
    transition: all 0.15s; user-select: none; text-align: center;
}
.picker-card:hover { background: rgba(0,212,255,0.04); border-color: rgba(0,212,255,0.1); }
.picker-card.selected { background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.4); }
.picker-card-name {
    font-size: 11px; color: #e2e8f0; margin-top: 6px;
    word-break: break-word; line-height: 1.3;
    max-height: 2.6em; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Sidecar attachment row */
.sidecar-attach-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.03);
}
.sidecar-attach-row .sa-icon { flex-shrink: 0; }
.sidecar-attach-row .sa-name { font-size: 12px; color: #e2e8f0; }
.sidecar-attach-row .sa-type { font-size: 10px; color: #64748b; }
</style>
{% endblock %}

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