<?php
session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Roastmonday</title>

    <link rel="stylesheet" href="style/style_new.css">
    <link rel="prefetch" href="scripts/pictureViewer.js" as="script">
    <link rel="prefetch" href="scripts/toast.js" as="script">
    <link rel="reload" href="scripts/roastmonday_common.js" as="script">
    <script src="scripts/roastmonday_common.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1 class="centertitle">Roastmonday</h1>
    <div class="themelist">
        <ul>
<?php

// Load composer
require __DIR__ . '/vendor/autoload.php';

$config = include __DIR__ . '/config.php';
$internal_pics_dir = realpath(__DIR__ . $config['pics_dir']);
$app = new Phlaym\Roastmonday\Roastmonday($config, $internal_pics_dir);
$tm = [];
try {
    $tm = $app->getThemeMondays();
} catch (Phlaym\Roastmonday\DB\OperationTimedOutException $e) {
    echo 'Error connecting to the database, the connection has timed out. Please try again later';
}
foreach ($tm as $monday) {
    echo '<a href="pictures.php?id='
    . $monday['idx']
    . '" class="link"><li><span>#'
    . $monday['tag']
    . ' on '
    . $monday['date']->format('F jS, Y')
    . '</span></li></a>';
}
?>
    </ul>
</div>
<div class="horizontal-list">
    <div id="themeChooser" class="theme-chooser-wrapper ui-element">
        <div>Choose a theme</div>
    </div>
</div>
<div class="theme-preview">
    <div>
        <div class="hl-color">Highlight</div>
        <div class="link-color">Links</div>
    </div>
    <div>
        <div class="red">Red</div>
        <div class="green">Green</div>
    </div>
    <div>
        <div class="light-gray">Light Gray</div>
        <div class="medium-gray">Medium Gray</div>
        <div class="dark-gray">Dark Gray</div>
    </div>
    <div>
        <div class="shadow">Shadow</div>
    </div>
</div>
</body>
</html>