{% extends 'base.html' %}
{% block head_title %}Competitions{% endblock head_title %}
{% block page_title %}Competitions{% endblock page_title %}
{% block content %}

{% load static %}
<div class="row">
    <div class="col-md-6">
        {% comment commenting out until we have sorting %}
            <div class="sort margin-bottom">
                Sort by:
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default btn-sm active">
                        <input type="radio" name="sortby" id="recent"> Most Recent
                    </label>
                    <label class="btn btn-default btn-sm">
                        <input type="radio" name="sortby" id="active"> Most Active
                    </label>
                </div>
            </div>
        {% endcomment %}
        <form id="search_form" action="." method="GET">
            <div class="input-group margin-bottom">
                <input id="search_query_input" class="form-control" type="search" name="q" placeholder="Search...">
                <span class="input-group-btn">
                    <input class="btn btn-primary" type="submit" value="Search">
                </span>
            </div>
            <!--
            <div class="checkbox-inline">
                <label>
                    <input name="is_active" type="checkbox"> Is active
                </label>
            </div>
            <div class="checkbox-inline">
                <label>
                    <input name="is_finished" type="checkbox"> Is finished
                </label>
            </div>
            <div class="checkbox-inline">
                <label>
                    <input name="medical_image_viewer" type="checkbox"> Medical image viewer
                </label>
            </div>
            -->
        </form>
    </div>
</div>

<div class="row pad-top">
    <div class="col-md-12 competition-list">
        {% if not competitions %}
            <p><em>There are no competitions.</em></p>
        {% else %}
            {% for competition in competitions %}
                {% include "web/my/_competition_tile.html" with competition=competition %}
            {% endfor %}
        {% endif %}
    </div>
</div>
<a href="https://github.com/codalab/codalab/wiki/User_Competition-Roadmap">Learn how to create your own competition.</a>
{% endblock content%}

{% block js %}
    function populate(frm, data) {
        $.each(data, function(key, value){
            var $ctrl = $('[name='+key+']', frm);
            switch($ctrl.attr("type"))
            {
                case "text":
                case "hidden":
                    $ctrl.val(value);
                    break;
                case "radio":
                case "checkbox":
                    $ctrl.each(function(){
                        if(value=='on') {
                            $(this).attr("checked",value);
                        }
                    });
                    break;
                default:
                    $ctrl.val(value);
            }
        });
    }
    $('.competition-tile').on('click',function(){
        var competitionID = $(this).find('#competitionID').val();
        window.location.href = '/competitions/' + competitionID;
    });

    var params = {}
    location.search.substr(1).split("&").forEach(function(item) {params[item.split("=")[0]] = item.split("=")[1]})

    populate('#search_form', params);
{% endblock js %}