<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anamnesis - Flashcard Learning</title>
    <link rel="stylesheet" href="static/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar">
            <div class="navbar-content">
                <div class="logo">
                    <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                    </svg>
                    <span class="logo-text">Anamnesis</span>
                </div>
                <div class="navbar-info">
                    <p class="project-subtitle">Open-Source Flashcard Learning Platform with Dependency Management</p>
                    <div class="social-links">
                        <a href="https://github.com/erenmirza/open-anamnesis" target="_blank" rel="noopener noreferrer" class="social-link" title="View on GitHub">
                            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                            </svg>
                        </a>
                        <a href="https://www.linkedin.com/in/erenmirza/" target="_blank" rel="noopener noreferrer" class="social-link" title="Connect on LinkedIn">
                            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main class="container">
            <div id="decks-view" class="view">
                <div class="project-info">
                    <h1 class="project-name" id="project-name"></h1>
                    <p class="project-description" id="project-description"></p>
                    <div class="project-meta">
                        <span class="project-version" id="project-version"></span>
                    </div>
                </div>
                <div class="view-header">
                    <h2 class="view-title">Your Decks</h2>
                    <div class="stats" id="deck-stats"></div>
                </div>
                <div class="deck-controls">
                    <div class="search-box">
                        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                        <input type="text" id="deck-search" placeholder="Search decks..." oninput="handleSearch(event)">
                    </div>
                    <div class="filter-controls">
                        <div class="view-toggle">
                            <button id="view-grid" class="view-btn active" onclick="setViewMode('grid')" title="Grid view">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="3" width="7" height="7"></rect>
                                    <rect x="14" y="3" width="7" height="7"></rect>
                                    <rect x="3" y="14" width="7" height="7"></rect>
                                    <rect x="14" y="14" width="7" height="7"></rect>
                                </svg>
                            </button>
                            <button id="view-list" class="view-btn" onclick="setViewMode('list')" title="List view">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="8" y1="6" x2="21" y2="6"></line>
                                    <line x1="8" y1="12" x2="21" y2="12"></line>
                                    <line x1="8" y1="18" x2="21" y2="18"></line>
                                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                                </svg>
                            </button>
                            <button id="view-lineage" class="view-btn" onclick="setViewMode('lineage')" title="Lineage view">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="3"></circle>
                                    <circle cx="6" cy="18" r="3"></circle>
                                    <circle cx="18" cy="6" r="3"></circle>
                                    <path d="M12 9V6M9 12H6M15 12h3M9.88 14.88L7.5 16.5"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="decks-list" class="decks-grid">
                    <!-- Dynamically populated -->
                </div>
                <div id="homescreen-lineage" class="homescreen-lineage hidden">
                    <div class="lineage-section-header">
                        <h3 class="lineage-section-title">Deck Dependencies</h3>
                        <button class="fullscreen-btn" onclick="toggleHomescreenLineageFullscreen()" title="Toggle Fullscreen">
                            <svg id="homescreen-fullscreen-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
                            </svg>
                        </button>
                    </div>
                    <div id="homescreen-lineage-content">
                        <!-- Dynamically populated -->
                    </div>
                </div>
            </div>

            <div id="deck-view" class="view hidden">
                <button class="back-btn" onclick="showDecksView()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    Back to Decks
                </button>
                <div class="deck-header">
                    <h2 id="deck-title" class="deck-title"></h2>
                    <p id="deck-description" class="deck-description"></p>
                </div>
                <div class="deck-actions">
                    <button class="btn btn-primary" onclick="startLearning()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                        </svg>
                        Start Learning
                    </button>
                    <button class="btn btn-secondary" onclick="startTest()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                        </svg>
                        Take Test
                    </button>
                </div>
                <div class="cards-preview">
                    <div class="cards-header">
                        <h3 class="section-title">All Cards</h3>
                        <div class="view-toggle">
                            <button id="cards-view-grid" class="view-btn active" onclick="setCardsViewMode('grid')" title="Grid view">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="3" width="7" height="7"></rect>
                                    <rect x="14" y="3" width="7" height="7"></rect>
                                    <rect x="3" y="14" width="7" height="7"></rect>
                                    <rect x="14" y="14" width="7" height="7"></rect>
                                </svg>
                            </button>
                            <button id="cards-view-list" class="view-btn" onclick="setCardsViewMode('list')" title="List view">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="8" y1="6" x2="21" y2="6"></line>
                                    <line x1="8" y1="12" x2="21" y2="12"></line>
                                    <line x1="8" y1="18" x2="21" y2="18"></line>
                                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div id="cards-list" class="cards-list">
                        <!-- Dynamically populated -->
                    </div>
                </div>
                <div id="deck-dependencies" class="deck-dependencies">
                    <!-- Dynamically populated -->
                </div>
            </div>

            <div id="learn-view" class="view hidden">
                <button class="back-btn" onclick="backToDeck()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    Back to Deck
                </button>
                <div class="learn-header">
                    <h2 class="view-title">Learning Mode</h2>
                    <div class="progress-bar">
                        <div class="progress-fill" id="learn-progress"></div>
                    </div>
                </div>
                <div class="card-container">
                    <div class="card-counter">
                        <span id="current-card">1</span> / <span id="total-cards">10</span>
                    </div>
                    <div class="flashcard" onclick="flipCard(this)">
                        <div class="flashcard-inner">
                            <div class="flashcard-front">
                                <div class="card-label">Question</div>
                                <div class="card-content" id="card-front"></div>
                                <div class="flip-hint">Click to reveal answer</div>
                            </div>
                            <div class="flashcard-back">
                                <div class="card-label">Answer</div>
                                <div class="card-content" id="card-back"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-navigation">
                        <button class="btn btn-nav" onclick="prevCard()">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M15 18l-6-6 6-6"/>
                            </svg>
                            Previous
                        </button>
                        <button class="btn btn-nav" onclick="nextCard()">
                            Next
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 18l6-6-6-6"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <div id="test-view" class="view hidden">
                <button class="back-btn" onclick="backToDeck()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    Back to Deck
                </button>
                <div class="test-header">
                    <h2 class="view-title">Test Mode</h2>
                    <div class="progress-bar">
                        <div class="progress-fill" id="test-progress"></div>
                    </div>
                </div>
                <div class="test-container">
                    <div class="question-counter">
                        Question <span id="test-current">1</span> of <span id="test-total">10</span>
                    </div>
                    <div class="question-section">
                        <h3 id="question-text" class="question-text"></h3>
                        <div id="answer-options" class="answer-options">
                            <!-- Dynamically populated -->
                        </div>
                    </div>
                    <div class="test-navigation">
                        <button class="btn btn-nav" onclick="prevQuestion()">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M15 18l-6-6 6-6"/>
                            </svg>
                            Previous
                        </button>
                        <button class="btn btn-nav" onclick="nextQuestion()">
                            Next
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 18l6-6-6-6"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <div id="lineage-view" class="view hidden">
                <button class="back-btn" onclick="closeLineageView()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    Back to Deck
                </button>
                <div class="lineage-header">
                    <h2 id="lineage-title" class="view-title">Lineage View</h2>
                    <p class="lineage-description">Navigate the relationship graph by clicking on nodes. Click and drag to pan.</p>
                </div>
                <div id="lineage-graph" class="lineage-graph">
                    <!-- Dynamically populated -->
                </div>
            </div>
        </main>
    </div>

    <script src="static/app.js"></script>
</body>
</html>
