<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kelime Listesi</title>
    <style>
        /* CSS stilleri öncekiyle aynı, değişiklik yok */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
        :root {
            --primary-color: #1a1a2e;
            --secondary-color: #16213e;
            --card-background: #0f3460;
            --font-color: #e3e3e3;
            --highlight-color: #e94560;
            --accent-color-1: #53a8b6;
            --accent-color-2: #8a4fff;
            --accent-color-3: #f5b700;
            --accent-color-4: #32de84;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Poppins', sans-serif; background-color: var(--primary-color); color: var(--font-color); padding: 2rem; line-height: 1.6; }
        .container { max-width: 900px; margin: 0 auto; }
        h1 { text-align: center; color: var(--highlight-color); margin-bottom: 2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
        .word-card { background-color: var(--secondary-color); border-left: 5px solid var(--highlight-color); border-radius: 10px; margin-bottom: 1.5rem; padding: 1.5rem 2rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .word-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(233, 69, 96, 0.3); }
        .word-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #ffffff20; padding-bottom: 1rem; flex-wrap: wrap; }
        .word-title { color: var(--highlight-color); font-size: 2rem; font-weight: 700; text-transform: capitalize; }
        .word-level { background-color: var(--highlight-color); color: #fff; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
        .word-ipa { font-family: 'Courier New', Courier, monospace; color: #ccc; font-size: 1rem; }
        .word-details h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; }
        .word-details p { font-size: 0.95rem; color: var(--font-color); opacity: 0.9; padding-left: 1rem; border-left: 3px solid; }
        .definition h3 { color: var(--accent-color-1); } .definition p { border-color: var(--accent-color-1); }
        .example h3 { color: var(--accent-color-2); } .example p { border-color: var(--accent-color-2); }
        .synonyms h3 { color: var(--accent-color-3); } .synonyms p { border-color: var(--accent-color-3); }
        .antonyms h3 { color: var(--accent-color-4); } .antonyms p { border-color: var(--accent-color-4); }
        .pos h3 { color: #cccccc; } .pos p { border-color: #cccccc; text-transform: capitalize; }
        #pagination { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding: 1rem; flex-wrap: wrap; gap: 0.5rem; }
        .pagination-btn { background-color: var(--card-background); color: var(--font-color); border: 2px solid var(--card-background); padding: 0.6rem 1rem; border-radius: 5px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; }
        .pagination-btn:hover { background-color: var(--highlight-color); border-color: var(--highlight-color); color: #fff; }
        .pagination-btn.active { background-color: var(--highlight-color); border-color: var(--highlight-color); color: #fff; cursor: default; }
    </style>
</head>
<body>

    <div class="container">
        <h1>Kelime Listesi</h1>
        <main id="word-list">
            </main>
        <nav id="pagination">
            </nav>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const wordListContainer = document.getElementById('word-list');
            const paginationContainer = document.getElementById('pagination');
            let allData = []; // json dosyasından gelen tüm veriyi tutacak dizi
            let currentPage = 1;
            const rowsPerPage = 10;

            // Veriyi json dosyasından çeken ana fonksiyon
            async function loadData() {
                try {
                    const response = await fetch('data.json');
                    if (!response.ok) {
                        throw new Error(`HTTP hatası! Durum: ${response.status}`);
                    }
                    allData = await response.json();
                    // Veri başarıyla yüklendikten sonra listeleme ve sayfalama fonksiyonlarını çağır
                    displayList(currentPage);
                    setupPagination();
                } catch (error) {
                    console.error("Veri yüklenemedi:", error);
                    wordListContainer.innerHTML = `<p style="text-align: center; color: var(--highlight-color);">Veri dosyası yüklenirken bir hata oluştu. 'data.json' dosyasının doğru yerde ve formatta olduğundan emin olun.</p>`;
                }
            }

            // Belirtilen sayfadaki verileri gösteren fonksiyon
            function displayList(page) {
                wordListContainer.innerHTML = "";
                page--; // Sayfa numarasını dizi index'ine çevir

                const start = rowsPerPage * page;
                const end = start + rowsPerPage;
                const paginatedItems = allData.slice(start, end);

                paginatedItems.forEach(item => {
                    const itemElement = document.createElement('article');
                    itemElement.classList.add('word-card');
                    const exampleText = item.example ? item.example : 'Örnek cümle bulunmuyor.';
                    itemElement.innerHTML = `
                        <div class="word-header">
                            <h2 class="word-title">${item.word}</h2>
                            <span class="word-level">${item.level}</span>
                            <span class="word-ipa">${item.ipa || ''}</span>
                        </div>
                        <div class="word-details">
                            <div class="pos">
                                <h3>Part of Speech</h3>
                                <p>${item.pos}</p>
                            </div>
                            <div class="definition">
                                <h3>Definition</h3>
                                <p>${item.definition}</p>
                            </div>
                            <div class="example">
                                <h3>Example</h3>
                                <p>${exampleText}</p>
                            </div>
                            <div class="synonyms">
                                <h3>Synonyms</h3>
                                <p>${item.synonyms_api || 'N/A'}</p>
                            </div>
                            <div class="antonyms">
                                <h3>Antonyms</h3>
                                <p>${item.antonyms_api || 'N/A'}</p>
                            </div>
                        </div>
                    `;
                    wordListContainer.appendChild(itemElement);
                });
            }

            // Sayfa numarası butonlarını oluşturan fonksiyon
            function setupPagination() {
                paginationContainer.innerHTML = "";
                const pageCount = Math.ceil(allData.length / rowsPerPage);
                for (let i = 1; i <= pageCount; i++) {
                    const btn = paginationButton(i);
                    paginationContainer.appendChild(btn);
                }
            }

            // Tek bir sayfa butonu oluşturan yardımcı fonksiyon
            function paginationButton(page) {
                const button = document.createElement('button');
                button.classList.add('pagination-btn');
                button.innerText = page;
                if (currentPage == page) button.classList.add('active');

                button.addEventListener('click', function () {
                    currentPage = page;
                    displayList(currentPage);
                    
                    let currentActiveBtn = document.querySelector('#pagination .active');
                    if (currentActiveBtn) {
                        currentActiveBtn.classList.remove('active');
                    }
                    button.classList.add('active');
                    window.scrollTo(0, 0);
                });
                return button;
            }

            // Başlangıç
            loadData();
        });
    </script>
</body>
</html>