
<?php
$myCards = array();
#array_push($myCards, "item");

$directory = "./cards/";
$sorting_order = SCANDIR_SORT_DESCENDING;
#$dir =  scandir($directory, $sorting_order);
$dir = preg_grep('/^([^.])/', scandir($directory, $sorting_order));
/*
foreach (array_keys($dir, '.') as $key) {
    unset($dir[$key]);
}

#foreach (array_keys($dir, '..') as $key) {
#    unset($dir[$key]);
#}

if (($key = array_search('..', $dir)) !== false) {
    unset($dir[$key]);
}

echo count($dir);

print_r($dir);
*/

#for($iterator; $iterator <= count($dir); $iterator += 2) {
#    if ($dir[$iterator] == "." || $dir[$iterator] == "..") continue;
#    echo "<p>" . $dir[$iterator] . "</p>";
#    echo "<p>" . $dir[$iterator+1] . "</p>";
#}

/*
foreach ($dir as &$value) {
    #if ($value == "." || $value == "..") continue;
    echo "<p> $value </p>";
    #$cardPair = [
    #    'front' => ''
    #    'back' => 
    #];
}
*/
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/index.css">
    <title>Meine Coolen Karten</title>
</head>
<body>
    <header>
        <img src="/nfl-1-logo-black-and-white.png" alt="" srcset="">
        <span>Karten von Joachim</span>
    </header>
    <main class="flip-card__container">
        <?php
        for($outeriterator = 0; $outeriterator < 4; $outeriterator += 1) {
            for($iterator = 0; $iterator < count($dir); $iterator += 1) {
                echo "
                <div class='flip-card__card'>
                    <div class='flip-card__inner'>
                        <div class='flip-card__front'>
                            <img class='flip-card__image' src='/cards/{$dir[$iterator]}' alt='Avatar'>
                            <div>front</div>
                        </div>
                        <div class='flip-card__back'>
                            <img class='flip-card__image' src='/cards/{$dir[$iterator+1]}' alt='Avatar'>
                            <div>back</div>
                        </div>
                    </div>
                </div>
                ";
                $iterator++;
            }
        }
        ?>
    </main>
</body>
</html>