{% extends "base_toplevel.html" %}
{% load i18n %}
{% load static %}

{% comment %}

  layerindex-web - layer list page template

  Copyright (C) 2013 Intel Corporation
  Licensed under the MIT license, see COPYING.MIT for details

{% endcomment %}


<!--
{% block title_append %} - layers{% endblock %}
-->

{% block navs %}
{% autoescape on %}
                            <li class="active"><a href="{% url 'layer_list' url_branch %}">Layers</a></li>
                            <li><a href="{% url 'recipe_search' url_branch %}">Recipes</a></li>
                            <li><a href="{% url 'machine_search' url_branch %}">Machines</a></li>
                            <li><a href="{% url 'class_search' url_branch %}">Classes</a></li>
                            <li><a href="{% url 'distro_search' url_branch %}">Distros</a></li>
{% endautoescape %}
{% endblock %}


{% block content_inner %}
{% autoescape on %}

{% if layerbranch_list %}

            <div class="row-fluid">
                <div class="span5">
                    <form id="filter-form">
                        <input type="text" class="input-xxlarge search-query" id="filter" placeholder="Search layers">
                    </form>
                </div>

                <div class="pull-right">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            Filter layers
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            {% for choice_id, choice_label in layer_type_choices %}
                            <li><a tabindex="-1" href="#">
                                <label class="checkbox">
                                    <input type="checkbox" checked value="{{ choice_id }}">{{ choice_label }}
                                </label>
                            </a></li>
                            {% endfor %}

                        </ul>

                    </div>
                </div>
            </div>

            <table class="table table-striped table-bordered layerstable">
                <thead>
                    <tr>
                        <th>Layer name</th>
                        <th class="span4">Description</th>
                        <th>Type</th>
                        <th>Repository</th>
                    </tr>
                </thead>

                <tbody>
                    {% for layerbranch in layerbranch_list %}
                    <tr class="layertype_{{ layerbranch.layer.layer_type }}">
                        <td><a href="{% url 'layer_item' url_branch layerbranch.layer.name %}">{{ layerbranch.layer.name }}</a>
                            {% if layerbranch.yp_compatible_version %}
                            <a href="{{layerbranch.yp_compatible_version.link_url}}"><img src="{{layerbranch.yp_compatible_version.image_url}}" alt="{{layerbranch.yp_compatible_version.description}}" class="yp-icon" title="{{layerbranch.yp_compatible_version.description}}" ></a>
                            {% endif %}
                        </td>
                        <td>{{ layerbranch.layer.summary }}</td>
                        <td>{{ layerbranch.layer.get_layer_type_display }}</td>
                        <td class="showRollie">
                            {{ layerbranch.layer.vcs_url }}
                                {% if layerbranch.layer.vcs_web_url %}
                                <a class="rollie" href="{{ layerbranch.layer.vcs_web_url }}">
                                <span class="label label-info">
                                    web repo
                                </span>
                                </a>
                                {% endif %}
                                {% if layerbranch.tree_url %}
                                <a class="rollie" href="{{ layerbranch.tree_url }}">
                                <span class="label label-info">
                                    tree
                                </span>
                                </a>
                                {% endif %}
                        </td>
                    </tr>
                    {% endfor %}

                </tbody>
            </table>

    {% if is_paginated %}
        {% load pagination %}
        {% pagination page_obj %}
    {% endif %}
{% else %}
    <p>No matching layers in database.</p>
{% endif %}

{% endautoescape %}

{% endblock %}


{% block scripts %}
<script src="{% static "js/uitablefilter.js" %}"></script>

<script>
    $(document).ready(function() {
        $("input:checkbox").change();

        $("input:checkbox").change(function(){
                var selectedType = $(this).val();
                if($(this).is(":checked")){
                    $(".layertype_"+selectedType).show();
                }
                else{
                    $(".layertype_"+selectedType).hide();
                }

        });

        $(function() {
            var theTable = $('table.layerstable');

            $("#filter").keyup(function() {
            $.uiTableFilter( theTable, this.value );
            })

            $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
            e.stopPropagation();
            })

            $('#filter-form').submit(function(){
            theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
            return false;
            }).focus(); //Give focus to input field
        });

    });
</script>
{% endblock %}