<?php
// Get the list of websites from the sites.json file
$sites = json_decode(file_get_contents('sites.json'), true);

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/ico" href="files/img/G11-Shadow.ico">
</head>

<body>

    <div class="container">
        <div class="header" id="header">
            <h1>Sites</h1>
            <span>beta</span>
            <img class="icon" id="theme" src="files/image/brightness_6.svg" alt="Theme">
            <h1 class="logo">thover.eu</h1>
        </div>
        <div class="content">
            <ul id="list">
                <?php foreach ($sites as $site) { ?>
                    <li>
                        <a class="site-title" href="<?php echo $site['url']; ?>">
                            <?php echo $site['name']; ?>
                        </a>
                        <?php
                        echo '<img src="' . $site['image'] . '" alt="' . $site['name'] . '">';
                        echo $site['description'];
                        // Tags in span tags
                        // Split the tags into an array if site['tags'] is not empty
                        if (!empty($site['tags'])) {
                            $tags = explode(', ', $site['tags']);

                            // Loop through the array if there are tags
                            if (count($tags) > 0) {
                                echo '<div class="tags">';
                                foreach ($tags as $tag) {
                                    echo '<span class="tag">' . $tag . '</span>';
                                }
                                echo '</div>';
                            }
                        }
                        // Visit button
                        echo '<a href="' . $site['url'] . '" class="visit">Visit</a>';
                        ?>
                    </li>
                <?php } ?>
            </ul>
        </div>
    </div>

    <script src="files/script.js"></script>

</body>

</html>