---
layout: default
---

<script type="text/javascript">
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    $(document).ready(function() {
        var urlParams = getUrlVars()
        $('#querystring').text(urlParams.q)
        $('#q').val(urlParams.q)
        $.getJSON('https://cloudshot-api.labdemo.net/search?q=' + urlParams.q, null, function(msg) {
            for (let index = 0; index < msg.length; index++) {
                const result = msg[index];
                $('#results').append('<p class="h4"><a href="' + result.url + '">' + result.title + '</a></p>')
                $('#results').append('<p>' + result.extract.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') + '...</p>')
            }
        });
    })
</script>

<div>&nbsp;</div>

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1 class="display-4">{{ page.title | escape }}</h1>
            </div>
        </div>
    </div>
</div>

{{ content }}

<p class="h5" style="padding-bottom: 10px;">Showing search results for '<span id="querystring"></span>'</p>

<div id="results"></div>