<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Roastmonday</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style/style_new.css">
    <script src="scripts/roastmonday_common.js"></script>
    <script src="scripts/pictureViewer.js"></script>
    <script src="scripts/toast.js"></script>
</head>
<body>

<?php
require __DIR__ . '/vendor/autoload.php';
if (empty($_GET['id'])) {
    die('No theme selected. <a href="index.php">Overview</a>');
}
$config = include __DIR__ . '/config.php';
$id = $_GET['id'];
$internal_pics_dir = realpath(__DIR__ . $config['pics_dir']);
$app = new Phlaym\Roastmonday\Roastmonday($config, $internal_pics_dir);
$theme = $app->getThemeMonday($id);
echo '<h1>' . $theme['tag'] . '</h1>';
?>
<a href="index.php" class="link linkbutton ui-element"><span>Overview</span></a>
        <a href="#" class="link linkbutton ui-element" id="showUploadForm"><span>Manually add an avatar</span></a>
        <a href="#" class="link linkbutton ui-element" id="addTempAvatar">
            <span>Change your avatar</span>
            <div id="loadingLoginStatus" class="hidden">
                Checking login status...
                <div id="spinnerLoadingLoginStatus"></div>
            </div>
            </a>
        <div>
            <form id="manuallyAddAvatarForm"
                  class="upload-form"
                  onsubmit="handleManualAvatarUpload(this); return false;"
                  method="POST"
                  action="upload_avatar.php">
                <table>
                    <tr>
                        <td>Post ID:</td>
                        <td><input name="postID" type="text" min="0" required/></td>
                    </tr>
                    <tr>
                        <td>Avatar:*</td>
                        <td>
                            <div class="file-upload">
                                <input type="file"
                                       name="avatar"
                                       accept="image/*"
                                       id="avatarupload"
                                       class="file-upload-input"/>
                                <label for="avatarupload">
                                    <strong>Choose a file</strong>
                                    <span class="upload-box"> or drag it here</span>.
                                </label>
                                <div id="avatarPreviewContainer" class="avatarPreviewContainer">
                                    <img id="avatarPreview" class="avatarPreview"/>
                                    <div id="removeImage" class="removeImage">
                                        <!-- <img src="icons/close.svg" title="Close by bayu wibowo from the Noun Project"> !-->
                                        <svg xmlns:dc="http://purl.org/dc/elements/1.1/"
                                            xmlns:cc="http://creativecommons.org/ns#"
                                            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                                            xmlns:svg="http://www.w3.org/2000/svg"
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                                            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                                            viewBox="0 0 8.4666665 10.583333625"
                                            version="1.1"
                                            x="0px"
                                            y="0px">
                                            <g transform="translate(0,-288.53333)">
                                                <path d="M 2.9960938 2 A 1.0001001 1.0001001 0 0 0 2.3027344 3.7207031 L 14.582031 16 L 2.3027344 28.279297 A 1.0021986 1.0021986 0 0 0 3.7207031 29.697266 L 16 17.417969 L 28.279297 29.697266 A 1.0021986 1.0021986 0 1 0 29.697266 28.279297 L 17.417969 16 L 29.697266 3.7207031 A 1.0001001 1.0001001 0 0 0 28.974609 2 A 1.0001001 1.0001001 0 0 0 28.279297 2.3027344 L 16 14.582031 L 3.7207031 2.3027344 A 1.0001001 1.0001001 0 0 0 2.9960938 2 z " transform="matrix(0.26458333,0,0,0.26458333,0,288.53333)"/>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                                <div class="outline-radius"></div>
                            </div>
                        <progress id="uploadProgress" class="uploadProgress"></progress>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            * Optional. If left empty, the current avatar of the post creator will be used
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                </table>
                <button type="submit" name="submit" class="link linkbutton ui-element">Submit</button>
            </form>
            <form id="uploadTempAvatar"
                  class="upload-form"
                  onsubmit="handleTempAvatarUpload(this); return false;"
                  method="POST"
                  action="set_temp_avatar.php">
                <table>
                    <tr>
                        <td>Avatar:</td>
                        <td>
                            <div class="file-upload">
                                <input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
                                <input type="file"
                                       name="avatar"
                                       accept="image/*"
                                       id="avatarupload2"
                                       class="file-upload-input"/>
                                <label for="avatarupload2">
                                    <strong>Choose a file</strong>
                                    <span class="upload-box"> or drag it here</span>.
                                </label>
                                <div id="avatarPreviewContainer2" class="avatarPreviewContainer">
                                      <img id="avatarPreview2" class="avatarPreview"/>
                                      <div id="removeImage2" class="removeImage">
                                          <!-- <img src="icons/close.svg" title="Close by bayu wibowo from the Noun Project"> !-->
                                          <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 8.4666665 10.583333625" version="1.1" x="0px" y="0px"><g transform="translate(0,-288.53333)"><path d="M 2.9960938 2 A 1.0001001 1.0001001 0 0 0 2.3027344 3.7207031 L 14.582031 16 L 2.3027344 28.279297 A 1.0021986 1.0021986 0 0 0 3.7207031 29.697266 L 16 17.417969 L 28.279297 29.697266 A 1.0021986 1.0021986 0 1 0 29.697266 28.279297 L 17.417969 16 L 29.697266 3.7207031 A 1.0001001 1.0001001 0 0 0 28.974609 2 A 1.0001001 1.0001001 0 0 0 28.279297 2.3027344 L 16 14.582031 L 3.7207031 2.3027344 A 1.0001001 1.0001001 0 0 0 2.9960938 2 z " transform="matrix(0.26458333,0,0,0.26458333,0,288.53333)"/></g></svg>
                                      </div>
                                  </div>
                                  <div class="outline-radius"></div>
                            </div>
                        <progress id="uploadProgress" class="uploadProgress"></progress>
                        </td>
                    </tr>
                    <tr>
                        <td>Post</td>
                        <td>
                            <label class="checkbox-container">Post about your new avatar
                              <input id="cbShouldPostAvatar"
                                     type="checkbox"
                                     checked="checked"
                                     name="shouldPostAvatar"
                                     value="true" />
                              <span class="checkmark"></span>
                            </label>
                            <textarea class="posttext"
                                      name="posttext">
                                      <?= '#' . $theme['tag'] . ' #thememonday';?>
                            </textarea>
                            <br />
                            If you post about it, include #thememonday and <?= '#' . $theme['tag']; ?>,
                            and either keyword "avatar" or "picture" your new avatar will show up in this gallery!
                        </td>
                    </tr>
                    <tr class="duration-row">
                        <td>Duration</td>
                        <td>
                            <input type="number" name="avatarDuration" value="3" /> days.
                            Your avatar will reset to the current one on
                            <span><?= (new \DateTime("+3 days"))->format('Y-m-d'); ?></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="hidden" name="theme" value="<?=$id?>" />
                            <button type="submit"
                                    name="submit"
                                    class="link linkbutton ui-element"
                                    value="submit">
                                Submit
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
            <div id="authorizeDiv" class="hidden">
                This feature requires you to log in with pnut.
                <a href="">Authorized with pnut</a>
            </div>
        </div>
        <?php
        $pics = $app->getPicturesForTheme($id);
        if (empty($pics)) {
            die('No pictures for theme selected. <a href="index.php">Overview</a>');
        }
        ?><div class="avatar-grid">
        <?php
        foreach ($pics as $pic) : ?>
        <div class="avatar-box">
            <div class="avatar-wrapper"><img class="avatar" src="<?= $pic['file'] ?>" /></div>
            <div class="post-box">
                <div class="user-box">
                    <?php
                    if (empty($pic['user_realname'])) {
                        echo '<span>@' . $pic['username'] . '<div class="loader-small"></div></span>';
                    } else {
                        echo '<span>'
                        . $pic['user_realname']
                        . '</span><span class="username">@'
                        . $pic['username']
                        . '</span>';
                    }
                    ?>
                </div>
                <div class="post-text-box"><div class="loader"></div></div>
                <div class="post-meta-box">
                    <span><a href="https://posts.pnut.io/<?=$pic['post_id']?>">#<?=$pic['post_id']?></a></span>
                    <div class="separator"></div>
                    <span class="postdate" ts="<?=$pic['postdate']->getTimestamp()?>">
                        <?=$pic['postdate']->format('F jS, H:i:s e')?>
                    </span>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
        </div>
</body>
</html>