{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HubStation</title>
    <script src="https://cdn.tailwindcss.com"></script>

        <link rel="icon" href="/static/hub/img/okira_logo.png" sizes="32x32" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <style>
            body *{
                font-family:Poppins,Ubuntu,Corbel,sans-serif;
            }
        </style>
    <link rel="stylesheet" href="{% static 'hub/ia/styles.css' %}">
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 h-screen flex">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 left-0 w-64 transform -translate-x-full md:translate-x-0 transition-transform duration-300 z-10" id="sidebar">
        <div class="h-full p-6 flex flex-col">
            <div class="flex items-center justify-between mb-8">
                <h1 class="text-2xl font-bold tracking-tight text-gray-800 dark:text-white">HubStation LM</h1>
                <button id="close-sidebar" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-300">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <button class="gradient-button w-full mb-6">
                <i class="fas fa-plus mr-2"></i> <small> Nouvelle discusion </small>
            </button>
            
            <div class="flex-1 overflow-y-auto">
                <div class="mb-6">
                    <h2 class="text-gray-400 uppercase text-xs font-semibold mb-3">Recents</h2>
                    <ul class="space-y-2">
                        <li class="sidebar-item p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer flex items-center transition-all">
                            <i class="fas fa-comment mr-3 text-gray-400"></i>
                            <span class="text-gray-700 dark:text-gray-300"><small>Bienvenue sur HubStation</small></span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                        <i class="fas fa-user text-white"></i>
                    </div>
                    <a href="/station/" class="user-account text-gray-700 dark:text-gray-300 font-medium">Votre Espace</a>
                </div>
                <!-- <button class="settings-btn w-full p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center text-gray-700 dark:text-gray-300">
                    <i class="fas fa-cog mr-3"></i> Parametre
                </button> -->
            </div>
        </div>
    </div>
    
    <!-- Main content -->
    <div class="flex-1 flex flex-col md:ml-64">
        <!-- Header -->
        <header class="py-4 px-6 flex items-center justify-between">
            <button id="menu-button" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-300">
                <i class="fas fa-bars"></i>
            </button>
            <h1 class="text-xl font-semibold text-gray-800 dark:text-white">HubStation</h1>
            <div class="flex items-center space-x-2">
                <button id="theme-toggle" class="p-2 rounded-full text-gray-600 dark:text-gray-300">
                    <i class="fas fa-sun"></i>
                </button>
            </div>
        </header>
        
        <!-- Chat container -->
        <div class="flex-1 overflow-y-auto p-4" id="chat-container">
            <div class="max-w-4xl mx-auto">
                <!-- Welcome message -->
                <div class="welcome-card mb-8 text-center">
                    <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                        <i class="fas fa-robot text-3xl text-white"></i>
                    </div>
                    <h2 class="text-3xl font-bold mb-3 text-gray-800 dark:text-white">Bienvenue sur HubStation</h2>
                    <!-- <p class="text-gray-600 dark:text-gray-300 text-lg">Connecte votre API pour commencer un discusion.</p> -->
                </div>
                
                <!-- Sample suggestions -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                    <div class="suggestion-card p-6 cursor-pointer">
                        <h3 class="font-semibold mb-2 text-gray-800 dark:text-white">comment Hubstation peut vous aider</h3>
                        <p class="text-gray-600 dark:text-gray-300 text-sm">En terme facile</p>
                    </div>
                    <div class="suggestion-card p-6 cursor-pointer">
                        <h3 class="font-semibold mb-2 text-gray-800 dark:text-white">Pourquoi choisir Hubstation</h3>
                        <p class="text-gray-600 dark:text-gray-300 text-sm">pour votre business</p>
                    </div>
                    <div class="suggestion-card p-6 cursor-pointer">
                        <h3 class="font-semibold mb-2 text-gray-800 dark:text-white">Comment HubStation marche</h3>
                        <p class="text-gray-600 dark:text-gray-300 text-sm">avec exemple</p>
                    </div>
                    <div class="suggestion-card p-6 cursor-pointer">
                        <h3 class="font-semibold mb-2 text-gray-800 dark:text-white">Notre objectif</h3>
                        <p class="text-gray-600 dark:text-gray-300 text-sm">Le cameroun connecte</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Input area -->
        <div class="p-4">
            <div class="max-w-4xl mx-auto relative">
                <form id="chat-form" class="flex items-end gap-3">
                    <textarea 
                        id="message-input" 
                        rows="1" 
                        placeholder="Message HubStation..." 
                        class="flex-1 p-4 pr-16 resize-none text-gray-900 dark:text-gray-100"
                        style="min-height: 60px; max-height: 200px;"
                    ></textarea>
                    <button 
                        type="submit" 
                        id="send-button" 
                        disabled
                    >
                        <i class="fas fa-paper-plane text-xl"></i>
                    </button>
                </form>
                <!--
                <p class="text-xs text-center text-red-500 dark:text-red-400 mt-3" id="api-warning">
                    Connecte votre API pour commencer un discusion.
                </p>
                -->
            </div>
        </div>
    </div>

    <script src="{% static 'hub/ia/script.js' %}"></script>
</body>
</html>