{{define "invoices_content"}}
<div class="invoices-page">
    <div class="invoices-header">
        <h2>Invoice Management</h2>
        <div class="view-controls">
            <button id="search-view-btn" class="view-btn active" onclick="switchView('search')">
                🔍 Search View
            </button>
            <button id="board-view-btn" class="view-btn" onclick="switchView('board')">
                📋 Board View
            </button>
        </div>
    </div>

    <!-- Search View -->
    <div id="search-view" class="view-section active">
        <div class="enhanced-search">
            <div class="search-header">
                <h3>Search Invoices</h3>
                <div class="search-tips">
                    💡 <strong>Tips:</strong> Search by invoice ID, customer name, or job number. Use commas or spaces
                    for multiple invoices.
                </div>
            </div>

            <div class="search-container">
                <div class="search-input-group">
                    <input id="invoice-search-input" class="enhanced-search-input" type="text" name="search"
                        placeholder="Enter invoice numbers, customer names, or job numbers..." hx-get="/invoices"
                        hx-trigger="keyup changed delay:500ms" hx-target="#invoice-search-results"
                        hx-indicator="#search-loading" />
                    <button class="search-clear-btn" onclick="clearSearch()" style="display: none;">✕</button>
                </div>

                <div id="search-loading" class="search-loading htmx-indicator">
                    <div class="loading-spinner"></div>
                    <span>Searching invoices...</span>
                </div>
            </div>

            <div id="invoice-search-results" class="search-results">
                <div class="no-search-state">
                    <div class="no-search-icon">📋</div>
                    <h4>Start searching for invoices</h4>
                    <p>Enter an invoice ID, customer name, or job number above to begin</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Board View -->
    <div id="board-view" class="view-section">
        <div class="board-header">
            <h3>Invoice Status Board</h3>
            <div class="board-info">
                <p class="board-help">💡 <strong>Tip:</strong> Search for invoices in the Search View first, then switch
                    to Board View to see them organized by status.</p>
            </div>
            <div class="board-controls">
                <button class="refresh-board-btn" onclick="refreshBoard()">
                    🔄 Refresh Board
                </button>
                <button class="load-recent-btn" onclick="loadRecentInvoices()">
                    📥 Load Recent Invoices
                </button>
            </div>
        </div>

        <div id="invoice-board" class="invoice-kanban-board">
            <div class="kanban-column" data-status="draft">
                <div class="column-header">
                    <h4>📝 Draft</h4>
                    <span class="invoice-count">0</span>
                </div>
                <div class="invoice-drop-zone" data-status="draft">
                    <div class="empty-column-message">
                        <div class="empty-icon">📝</div>
                        <p>No draft invoices</p>
                    </div>
                </div>
            </div>

            <div class="kanban-column" data-status="ok">
                <div class="column-header">
                    <h4>✅ OK</h4>
                    <span class="invoice-count">0</span>
                </div>
                <div class="invoice-drop-zone" data-status="ok">
                    <div class="empty-column-message">
                        <div class="empty-icon">✅</div>
                        <p>No OK invoices</p>
                    </div>
                </div>
            </div>

            <div class="kanban-column" data-status="pending_accounting">
                <div class="column-header">
                    <h4>🧾 Pending</h4>
                    <span class="invoice-count">0</span>
                </div>
                <div class="invoice-drop-zone" data-status="pending_accounting">
                    <div class="empty-column-message">
                        <div class="empty-icon">🧾</div>
                        <p>No pending invoices</p>
                    </div>
                </div>
            </div>

            <div class="kanban-column" data-status="processed">
                <div class="column-header">
                    <h4>💰 Processed</h4>
                    <span class="invoice-count">0</span>
                </div>
                <div class="invoice-drop-zone" data-status="processed">
                    <div class="empty-column-message">
                        <div class="empty-icon">💰</div>
                        <p>No processed invoices</p>
                    </div>
                </div>
            </div>

            <div class="kanban-column" data-status="failed">
                <div class="column-header">
                    <h4>❌ Failed</h4>
                    <span class="invoice-count">0</span>
                </div>
                <div class="invoice-drop-zone" data-status="failed">
                    <div class="empty-column-message">
                        <div class="empty-icon">❌</div>
                        <p>No failed invoices</p>
                    </div>
                </div>
            </div>

            <div class="kanban-column" data-status="void">
                <div class="column-header">
                    <h4>💣 Void</h4>
                    <span class="invoice-count">0</span>
                </div>
                <div class="invoice-drop-zone" data-status="void">
                    <div class="empty-column-message">
                        <div class="empty-icon">💣</div>
                        <p>No void invoices</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="board-loading" class="board-loading" style="display: none;">
            <div class="loading-spinner"></div>
            <span>Loading invoices...</span>
        </div>
    </div>
</div>

<script src="/static/js/invoices.js"></script>
{{end}}