{% extends "wooey/base.html" %}
{% load i18n %}
{% load wooey_tags %}

{% block extra_style %}
    {{ block.super }}
    .wooey-script-dropdown {
        display: inline-block;
    }

{% endblock extra_style %}

{% block outer_content %}
    {{ block.super }}
    {% if not request.user.is_authenticated %}
        <div class="jumbotron frontpage">
          <h1 class="wooey">{% get_wooey_setting "WOOEY_SITE_NAME" %}</h1>
          <p>{% get_wooey_setting "WOOEY_SITE_TAG" %}</p>
        </div>
    {% endif %}
{% endblock %}

{% block left_sidebar %}{% endblock left_sidebar %}
{% block center_content_class %}col-md-12 col-xs-12{% endblock center_content_class %}

{% block center_content %}
    {{ block.super }}
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <form>
             <div class="form-group">
                <input type="text" class="form-control" id="searchform" placeholder="{% trans "Search for scripts..." %}">
              </div>
            </form>
        </div>
    </div>

    <div class="row" id="script-list">

    {% for script in scripts %}
        {% include 'wooey/scripts/script_panel.html' %}
    {% endfor %}

</div>



{% endblock center_content %}

{% block inline_js %}
{{ block.super }}
<script  type="text/javascript">

    $(document).ready(function(){
        $("#searchform").bindWithDelay("keyup", function(event){
            var query = $('#searchform').val();
            $.ajax({
                url: '{% url 'wooey:wooey_search_script_jsonhtml' %}',
                method: 'GET',
                data: {q: query},
                dataType: 'json',
                async: true,
                cache: false,
                contentType: false,
                success: function(data){
                    $("#script-list").empty()
                    for (var i in data['results']) {
                        $("#script-list").append(data['results'][i]);
                    }
                    $("a[data-favorite]").click(toggleFavorite);
                }
            });


        }, 100);
    });
</script>
{% endblock inline_js %}
