include "pages/page.wl"

let posts = $query("SELECT U.username, P.title, P.content FROM Posts as P, Users as U WHERE P.id=? AND U.id=P.author", $post_id)
let comments = $query("SELECT C.id, U.username, C.content, C.parent_post, C.parent_comment FROM Comments as C, Users as U WHERE C.parent_post=? AND U.id=C.author", $post_id)

let lookup = {}

for comment in comments: {
    comment.child = []
    lookup[comment.id] = comment
}

let root_comments = []

for comment in comments: {
    if comment.parent_comment == none:
        root_comments << comment
    else
        lookup[comment.parent_comment].child << comment
}

let post = posts[0]

let style =
    <style>
    .thread-header {
        padding: 15px 0;
        border-bottom: 2px solid #E8D4A9;
        margin-bottom: 20px;
    }
    .thread-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
    }
    .thread-title a {
        color: #1D2B42;
        text-decoration: none;
    }
    .thread-title a:hover {
        text-decoration: underline;
    }
    .thread-meta {
        font-size: 12px;
        color: #7A5F2A;
        margin-bottom: 10px;
    }
    .thread-meta a {
        color: #7A5F2A;
    }
    .thread-text {
        font-size: 14px;
        color: #1D2B42;
        line-height: 160%;
        margin-bottom: 10px;
    }
    .thread-actions {
        font-size: 12px;
    }
    .thread-actions a {
        color: #7A5F2A;
        margin-right: 10px;
    }
    
    /* Comment styles */
    .comment {
        margin-bottom: 15px;
        border-left: 1px solid #E8D4A9;
        padding-left: 10px;
    }
    
    .comment-meta {
        font-size: 11px;
        color: #7A5F2A;
        margin-bottom: 5px;
    }
    .comment-meta a {
        color: #7A5F2A;
    }
    .comment-text {
        font-size: 13px;
        color: #1D2B42;
        line-height: 150%;
        margin-bottom: 5px;
    }
    .comment-actions {
        font-size: 11px;
    }
    .comment-actions a {
        color: #7A5F2A;
        margin-right: 8px;
    }
    .comment-actions a:hover {
        color: #1D2B42;
    }
    
    .vote-buttons {
        float: left;
        width: 15px;
        margin-right: 8px;
        font-size: 10px;
        text-align: center;
    }
    .vote-buttons a {
        display: block;
        color: #7A5F2A;
        text-decoration: none;
        line-height: 100%;
    }
    .vote-buttons a:hover {
        color: #1D2B42;
    }
    .comment-content {
        margin-left: 23px;
    }
    .comment-child {
        margin-top: 10px;
        margin-left: 10px;
    }
    .add-comment {
    }
    .add-comment form {
        margin: 0;
        overflow: auto;
    }
    .add-comment form textarea {
        width: 100%;
        height: 80px;
        font-family: monospace;
        font-size: 12px;
        background: white;
        border: 1px solid #D4C298;
        border-radius: 3px;
        padding: 8px;
        box-sizing: border-box;
        resize: vertical;
    }
    .add-comment form input[type=submit] {
        background: #5780C9;
        color: white;
        border: none;
        border-radius: 3px;
        padding: 6px 12px;
        font-family: monospace;
        font-size: 12px;
        cursor: pointer;
        margin-top: 8px;
        float: right;
    }
    .add-comment input[type=submit]:hover {
        background: #1D2B42;
    }
    summary {
        list-style: none;
        text-decoration: underline;
        color: #7A5F2A;
        cursor: pointer;
    }
    ::-webkit-details-marker {
        display: none;
    }

    #no-comments {
        margin: 30px 0;
        width: 100%;
        text-align: center;
        color: #7A5F2A;
    }
    pre {
        white-space: pre-wrap;       /* Since CSS 2.1 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }
    </style>

let main =
    <main>
        <div class="thread-header">
            <div class="thread-title">
                <span>\post.title</span>
            </div>
            <div class="thread-meta">
                submitted 3 hours ago by <a href="">\post.username</a> | <a href="">\len comments</a>
            </div>
            <div class="thread-text">
                <pre>\post.content</pre>
            </div>
            <details>
                <summary>
                    reply
                </summary>
                <div class="add-comment">
                    <form action="/api/comment" method="POST">
                        <input type="hidden" name="parent_post" value=\'"'\$post_id\'"' />
                        <textarea name="content" placeholder="Add a comment..."></textarea>
                        <input type="submit" vaue="Publish" />
                    </form>
                </div>
            </details>
        </div>

        \procedure render_comment(comment)
            <div class="comment">
                <div class="vote-buttons">
                    <a href="">▲</a>
                    <a href="">▼</a>
                </div>
                <div class="comment-content">
                    <div class="comment-meta">
                        <a href="">\comment.username</a> 2 hours ago
                    </div>
                    <div class="comment-text">
                        <pre>\comment.content</pre>
                    </div>
                    \if $login_user_id != none:
                        <details>
                            <summary>
                                reply
                            </summary>
                            <div class="add-comment">
                                <form action="/api/comment" method="POST">
                                    <input type="hidden" name="parent_post"    value=\'"'\$post_id\'"' />
                                    <input type="hidden" name="parent_comment" value=\'"'\comment.id\'"' />
                                    <textarea name="content" placeholder="Add a comment..."></textarea>
                                    <input type="submit" vaue="Publish" />
                                </form>
                            </div>
                        </details>
                </div>
                <div class="comment-child">
                \for child in comment.child:
                    render_comment(child)
                </div>
            </div>

        \if len root_comments == 0:
            <div id="no-comments">
                No comments
            </div>
        else for comment in root_comments:
            render_comment(comment)
    </main>

page(post.title, $login_user_id, style, main)