<!DOCTYPE html>
<html>
<head>
    <title>DataFrame Editor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/css/tabulator.min.css">
    <link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/js/tabulator.min.js"></script>
    <script defer src="https://unpkg.com/alpinejs@3.12.0/dist/cdn.min.js"></script>
</head>
<body x-data="editorApp({{ collaborative|lower }}, {{ test_mode|lower }})" x-init="init()">
    <div id="loading-overlay" class="loading-overlay" x-show="loading">
        <div class="loading-spinner"></div>
        <div id="loading-text" class="loading-text" x-text="loadingText"></div>
    </div>

    <div class="bg-glow">
        <div class="bg-gradient"></div>
    </div>

    <div class="content">
        <header class="header">
            <div class="header-content">
                <h1 class="title">DataFrame Editor</h1>
                
                <div class="button-container">
                    <div class="button-group">
                        <button @click="addNewColumn()" class="button add-button">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"></path>
                            </svg>
                            Column
                        </button>
                        <button @click="addNewRow()" class="button add-button">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"></path>
                            </svg>
                            Row
                        </button>
                    </div>
                    
                    <template x-if="!isCollaborative">
                        <button @click="saveData()" class="button save-button">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Save Changes
                        </button>
                    </template>
                    
                    <button @click="shutdownServer()" class="button send-button">
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                        <span x-text="isCollaborative ? 'Done' : 'Send Data'"></span>
                    </button>
                    
                    <template x-if="!isCollaborative">
                        <button @click="cancelChanges()" class="button cancel-button">
                            <svg width="16" height="16" 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"></path>
                            </svg>
                            Cancel
                        </button>
                    </template>
                </div>
            </div>
            
            <template x-if="isCollaborative">
                <div id="collaborators-container" class="collaborators-container" x-show="Object.keys(collaborators).length > 0">
                    <div class="collaborators-header">Collaborators:</div>
                    <div id="collaborators-list" class="collaborators-list">
                        <template x-for="(collab, id) in collaborators" :key="id">
                            <div class="collaborator-badge" 
                                 :data-user-id="id"
                                 :style="`background-color: ${collab.color}20; border-color: ${collab.color}; color: ${collab.color}`">
                                <div class="collaborator-dot" :style="`background-color: ${collab.color}`"></div>
                                <span x-text="collab.name"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </header>
        
        <div id="column-rename-tooltip" class="tooltip-box" style="display: none;" 
             x-show="!isTestMode">
            <div class="tooltip-content">
                <div class="tooltip-icon">💡</div>
                <div class="tooltip-text">
                    <strong>Tip:</strong> Shift+Click on any column header to rename it.
                    <button id="dismiss-tooltip" class="dismiss-button">Got it</button>
                </div>
            </div>
        </div>

        <main class="main-content">
            <div class="table-container">
                <div id="data-table"></div>
            </div>
        </main>
    </div>

    <!-- Toast Container -->
    <div id="toast-container" class="toast-container"></div>

    <script src="{{ url_for('static', path='/js/editor.js') }}"></script>
</body>
</html>
