<?php

// Beispiel-FEN (kann ersetzt werden)
$fen = $block->fen();

// Unicode-Mapping
$pieceUnicode = [
        'K' => 'k', 'Q' => 'q', 'R' => 'r', 'B' => 'b', 'N' => 'n', 'P' => 'p',
        'k' => 'l', 'q' => 'w', 'r' => 't', 'b' => 'v', 'n' => 'm', 'p' => 'o',
];

$board = fenToBoard($fen);
?>

<style>
    .chessboard {
        border: 3px solid #333;
        border-radius: 2px;
        display: inline-block;
    }

    .chessboard-row {
        display: flex;
    }

    .chessboard-square {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Case';
        font-size: 3rem;
    }

    .chessboard-light {
        background: #ededed;
    }

    .chessboard-dark {
        background: #7e91c5;
    }
</style>

<div class="flex justify-center py-8">
    <div class="chessboard">
        <?php for ($i = 0; $i < 8; $i++): ?>
            <div class="chessboard-row">
                <?php for ($j = 0; $j < 8; $j++):
                    $isLight = ($i + $j) % 2 == 1;
                    $piece = $board[$i][$j] ?? '';
                    $symbol = $pieceUnicode[$piece] ?? '';
                    ?>
                    <div class="chessboard-square chessboard-<?= $isLight ? 'light' : 'dark' ?>">
                        <?php echo $symbol; ?>
                    </div>
                <?php endfor; ?>
            </div>
        <?php endfor; ?>
    </div>
</div>
