.spacer
.spacer
#story-list.story-list

    script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
    script.

        var getLinkedName = function getLinkedName(name) {
            return name.trim().toLowerCase().replace(/\s/g, '-');
        }
        $.ajax({
            url: '/news/hot',
            type: 'GET'
        })
                .success(
                function(data) {
                    for (var i = 0; i < data.length; i++) {
                        var div  = document.createElement('div');
                        var linkedName = getLinkedName(data[i].storyLink);
                        var rank = data[i].rank;
                        var alreadyUpvoted = false;
                        if (typeof username !== 'undefined') {
                          alreadyUpvoted = data[i].upVotes.some(function(vote) {
                            return vote.upVotedByUsername === username
                          });
                        }

                        $(div)
                        .html(
                            "<div class='visible-xs row'>" +
                                "<div class='visible-xs col-sm-1 col-md-1'>" +
                                    "<a href='" + data[i].link + "'>" +
                                        "<img class='mobile-story-image img-responsive' src='" + (!!data[i].image ? data[i].image : data[i].author.picture) + "'/>" +
                                    "</a>" +
                                "</div>" +
                                "<div class='col-xs-12 mobile-story-headline text-center'>" +
                                    "<a href='" + data[i].link + "' target='_blank'>" +
                                        data[i].headline +
                                    "</a>" +
                                "</div>" +
                                "<div class='col-xs-12 text-center'>" +
                                    rank + (rank > 1 ? " points" : " point") + " · posted " +
                                    moment(data[i].timePosted).fromNow() +
                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
                                "</div>" +
                                "<div class='col-xs-12'>" +
                                  "<br>" +
                                  (typeof username !== 'undefined' ?
                                    "<button id='" + data[i].id + "' class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost btn-upvote'>upvote</button>" :
                                    "<a href='/signup' class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost btn-upvote'>upvote</a>") +
                                    "<a class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost' href='/news/" + linkedName + "'>more info</a>" +
                                "</div>" +
                            "</div>" +
                            "<div class='hidden-xs row media-stories'>" +
                                "<div class='media'>" +
                                    "<div class='media-left'>" +
                                        "<a href='/" + data[i].author.username + "'>" +
                                            "<img class='img-news' src='" + data[i].author.picture + "'/>" +
                                        "</a>" +
                                    "</div>" +
                                    "<h2 class='media-body'>" +
                                        "<div class='media-body-wrapper'>" +
                                            "<div class='story-headline'>" +
                                                "<a href='" + data[i].link + "' target='_blank'>" +
                                                    data[i].headline +
                                                "</a>" +
                                            "</div>" +
                                            "<div class='story-byline col-xs-12 wrappable'>" +
                                                (typeof username !== 'undefined' ?
                                                  "<button id='" + data[i].id + "' class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost btn-upvote'>upvote</button>" :
                                                  "<a href='/signin' class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost'>upvote</a>") +
                                                " · <a class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost' href='/news/" + linkedName + "'>more info</a> · " +
                                                rank + (rank > 1 ? " points" : " point") + " · posted " +
                                                moment(data[i].timePosted).fromNow() +
                                                " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
                                            "</div>" +
                                        "</div>" +
                                    "</h2>" +
                                "</div>" +
                            "</div>"
                        );
                        $(div).addClass('story-list news-box')
                        $(div).appendTo($('#story-list'));
                        $(div).find('.btn-upvote').each(function(idx, btn) {
                          var $btn = $(btn);
                          if (alreadyUpvoted) {
                            $btn.addClass('disabled');
                            $btn.text('upvoted!');
                          }
                          $btn.data('upVotes', data[i].upVotes);
                        });
                    }
                });