.row
    .col-xs-12
        h2 We are retiring Camper News in favor of our 
            a(href='http://reddit.com/r/freecodecamp') Subreddit
            | .
        h3 Thank you to all of the campers who have contributed links over the past year. We will keep Camper News accessible until May. Our 
            a(href='http://reddit.com/r/freecodecamp') Subreddit
            | &thinsp; is now the best place to share coding-related links.
    .spacer
    hr
    .spacer
    .col-xs-12.col-sm-3
        span
            a.btn.btn-primary.btn-bigger.btn-block.btn-responsive(href='/stories/submit' class="#{ page === 'hot' ? '' : 'hidden' }") Submit a link
        span
            a.btn.btn-success.btn-bigger.btn-block.btn-responsive(href='/news/' class="#{ (page !== 'hot') ? '' : 'hidden' }") All
        .visible-xs
            .button-spacer
    .col-xs-12.col-sm-9
        .input-group
            input#searchArea.big-text-field.field-responsive.form-control(type='text', placeholder='Search term or @username')
            span.input-group-btn
                button#searchbutton.btn.btn-bigger.btn-primary.btn-responsive(type='button') Search
        .spacer

#search-results

.spacer
#story-list
    ul#stories
script.
    $('#searchArea').keypress(function (event) {
        if (event.keyCode === 13 || event.which === 13) {
            executeSearch();
            $('#searchArea').focus();
            event.preventDefault();
        }
    });
    $('#searchbutton').on('click', function () {
        executeSearch();
    });
    function executeSearch() {
        $('#stories').empty();
        var searchTerm = $('#searchArea').val(),
        url = '/stories/search';
        if (searchTerm.match(/^\@\w+$/)) {
            url = '/news/userstories';
            searchTerm = searchTerm.match(/^\@\w+$/)[0].split('@')[1];
        }
        var getLinkedName = function getLinkedName(name) {
            return name.toLowerCase().replace(/\s/g, '-');
        }
        $.post(url, { search: searchTerm })
                .fail(function(xhr, textStatus, errorThrown) {
                    $('#search-results').empty();
                    var div = document.createElement("div");
                    $(div).html("<h3 class='text-center text-warning dotted-underline'><em>No Results Found</em></h3>");
                    $(div).appendTo($('#search-results'));
                })
                .done(function(data, textStatus, xhr) {
                    $('#search-results').empty();
                    var spacer = document.createElement('div');
                    $(spacer).html("<div class='spacer'></div>");
                    $(spacer).appendTo($('#search-results'));
                    for (var i = 0; i < data.length; i++) {
                        var div = document.createElement('div');
                        var linkedName = getLinkedName(data[i].storyLink);
                        var rank = data[i].rank;
                        $(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='visible-xs'>" +
                                    "<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>" +
                                        "<a class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost' href='/news/" + linkedName + "'>more info</a>" +
                                    "</div>" +
                                "</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'>" +
                                                "<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-search')
                        $(div).appendTo($('#search-results'));
                    }
                    var hr = document.createElement("div");
                    $(hr).html("<h3 class='text-center text-success dotted-underline'><em>End search results</em></h3>")
                    $(hr).appendTo($('#search-results'));
                });
    }
