{% extends "baseprojectpage.html" %}
{% load projecttags %}
{% load humanize %}

{% block localbreadcrumb %}
<li>All compatible layers</li>
{% endblock %}

{% block projectinfomain %}
                <div class="page-header">
                    <h1>
  {% if request.GET.filter and total_count >  0 or request.GET.search and total_count >  0 %}
      {{total_count}} layer{{total_count|pluralize}} found
  {% elif request.GET.filter and total_count ==  0 or request.GET.search and total_count == 0 %}
      No layers found
  {%else%}
      All compatible layers
  {%endif%}
                        <i class="icon-question-sign get-help heading-help" title="This page lists all the layers compatible with the release selected for this project, which is {{project.release.description}}"></i>
                     </h1>
                </div>

  <div id="zone1alerts">
  </div>

{% if objects.paginator.count == 0 %}
  <div class="row-fluid">
      <div class="alert">
        <form class="no-results input-append" id="searchform">
            <input id="search" name="search" class="input-xxlarge" type="text" value="{{request.GET.search}}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="add-on btn" tabindex="-1"><i class="icon-remove"></i></a>{% endif %}
            <button class="btn" type="submit" value="Search">Search</button>
            <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all layers</button>
        </form>
      </div>
  </div>

{% else %}

{% include "basetable_top_layers.html" %}
    {% for o in objects %}
    <tr class="data">
            <td class="layer"><a href="{% url 'layerdetails' o.id %}">{{o.layer.name}}</a></td>
            <td class="description">{% if o.layer.summary %}{{o.layer.summary}}{%endif%}</td>
            <td class="git-repo"><a href="{% url 'layerdetails' o.pk %}"><code>{{o.layer.vcs_url}}</code></a>
            {% if o.get_vcs_link_url %}
            <a target="_blank" href="{{ o.get_vcs_link_url }}"><i class="icon-share get-info"></i></a>
        {% endif %}
        </td>
            <td class="git-subdir" style="display: table-cell;"><a href="{% url 'layerdetails' o.pk %}"><code>{{o.dirpath}}</code></a>
                {% if o.dirpath and o.get_vcs_dirpath_link_url %}
            <a target="_blank" href="{{ o.get_vcs_dirpath_link_url }}"><i class="icon-share get-info"></i></a>
                {% endif %}
        </td>
            <td class="branch">
                {% with vcs_ref=o.get_vcs_reference %}
                  {% if vcs_ref|is_shaid %}
                    <a class="btn" data-content="<ul class='unstyled'> <li>{{vcs_ref}}</li> </ul>">
                      {{vcs_ref|truncatechars:10}}
                    </a>
                  {% else %}
                    {{vcs_ref}}
                  {% endif %}
                {% endwith %}
            </td>
            <td class="dependencies">
        {% with ods=o.dependencies.all%}
            {% if ods.count %}
                    <a class="btn"
                        title="<a href='{% url "layerdetails" o.pk %}'>{{o.layer.name}}</a> dependencies"
                        data-content="<ul class='unstyled'>
                          {% for i in ods%}
                            <li><a href='{% url "layerdetails" i.depends_on.pk %}'>{{i.depends_on.layer.name}}</a></li>
                          {% endfor %}
                        </ul>">
                        {{ods.count}}
                    </a>
            {% endif %}
        {% endwith %}
            </td>
            {% if project %}
            <td class="add-del-layers" value="{{o.pk}}">
                <div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
                <button id="layer-del-{{o.pk}}" class="btn btn-danger btn-block remove-layer layerbtn" style="display:none;" onclick="layerDel({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" >
                    <i class="icon-trash"></i>
                    Delete layer
                </button>
                <button id="layer-add-{{o.pk}}" class="btn btn-block layerbtn" style="display:none;" onclick="layerAdd({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" title="layer added">
                    <i class="icon-plus"></i>
                    Add layer
                </button>
            </td>
            {% endif %}
     </tr>
    {% endfor %}
{% include "basetable_bottom.html" %}

    <!-- Modals -->

    <!-- 'Layer dependencies modal' -->
    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
        <form id="dependencies_modal_form">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3><span class="layer-name"></span> dependencies</h3>
        </div>
        <div class="modal-body">
            <p><strong class="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
            <ul class="unstyled" id="dependencies_list">
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="submit">Add layers</button>
            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
        </div>
        </form>
    </div>

{% if project %}
<script>

var tooltipUpdateText;

/* ensure csrf cookie exists {% csrf_token %} */
function _makeXHREditCall(data, onsuccess, onfail) {
    $.ajax( {
        type: "POST",
        url: "{% url 'xhr_projectedit' project.id %}",
        data: data,
        headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
        success: function (_data) {
            if (_data.error != "ok") {
                console.warn(_data.error);
            } else {
                updateButtons(_data.layers.map(function (e) {return e.id}));
                if (onsuccess != undefined) onsuccess(_data);
            }
        },
        error: function (_data) {
            console.warn("Call failed");
            console.warn(_data);
        }
    });
}

function updateLayerCountLabels (amount) {
    /* Update the filter labels */
    var countLabel = $("#projectlayer__project\\:{{project.id}}_count");
    countLabel.text(Number(countLabel.text())+amount);

    var countLabelRemaining = $("#projectlayer__project\\:NOT{{project.id}}_count");
    countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
}


function layerDel(layerId, layerName, layerURL) {
    tooltipUpdateText = "1 layer deleted";
    _makeXHREditCall({ 'layerDel': layerId }, function () {
        updateLayerCountLabels(-1);

        show_alert("You have deleted <strong>1</strong> layer from <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
    });
}

function show_alert(text, cls) {
    $("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
}

function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
    // update layer name
    $('.layer-name').text(layerName);
    var deplistHtml = "";
    for (var i = 0; i < dependencies.length; i++) {
        deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\""
        deplistHtml += dependencies[i].id;
        deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
        deplistHtml += dependencies[i].name;
        deplistHtml += "</label></li>";
    }
    $('#dependencies_list').html(deplistHtml);

    var selected = [layerId];
    var layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";

    $("#dependencies_modal_form").submit(function (e) {
        e.preventDefault();
        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
        if (selected.length > 1) {
            tooltipUpdateText = "" + selected.length + " layers added";
        } else {
            tooltipUpdateText = "1 layer added";
        }

        for (var i = 0; i < selected.length; i++) {
            for (var j = 0; j < dependencies.length; j++) {
                if (dependencies[j].id == selected[i]) {
                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
                    break;
                }
            }
        }

        $('#dependencies_modal').modal('hide');

    {% if project %}
        _makeXHREditCall({ 'layerAdd': selected.join(",") }, function () {
            show_alert("You have added <strong>"+selected.length+"</strong> layers to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
        });
    {% endif %}

    });
    $('#dependencies_modal').modal('show');
}


function layerAdd(layerId, layerName, layerURL) {
    $.ajax({
        url: '{% url "xhr_datatypeahead" %}',
        data: {'type': 'layerdeps','value':layerId},
        success: function(_data) {
                if (_data.error != "ok") {
                    console.warn(_data.error);
                } else {
                    updateLayerCountLabels(_data.list.length+1);

                    if (_data.list.length > 0) {
                        show_dependencies_modal(layerId, layerName, layerURL, _data.list);
                    }
                    else {
                        tooltipUpdateText = "1 layer added";
                        _makeXHREditCall({ 'layerAdd': layerId }, function () {
        show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
                        });
                    }
                }
            }
    })
}

function button_set(id, state) {
    var tohide, toshow;
    if (state == "add")
    {
        tohide = "#layer-del-";
        toshow = "#layer-add-";
    }
    else if (state == "del")
    {
        tohide = "#layer-add-";
        toshow = "#layer-del-";
    }


    var previouslyvisible = $(tohide + id).is(":visible");
    if (previouslyvisible) {
        $(tohide + id).fadeOut( function() {
            $("#layer-tooltip-" + id).text(tooltipUpdateText);
            $("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
                $(toshow + id).delay(300).fadeIn();
            });
        });
    } else {
        $(tohide + id).hide();
        $("#layer-tooltip-" + id).hide();
        $(toshow + id).show();
    }
};

function updateButtons(projectLayers) {
    var displayedLayers = [];
    $(".add-del-layers").map(function () { displayedLayers.push(parseInt($(this).attr('value')))});
    for (var i=0; i < displayedLayers.length; i++) {
        if (projectLayers.indexOf(displayedLayers[i]) > -1) {
            button_set(displayedLayers[i], "del");
        }
        else {
            button_set(displayedLayers[i], "add");
        }
    }
}

$(document).ready(function (){
    $('.layerbtn').tooltip({ trigger: 'manual' });
    updateButtons({{projectlayerset}});
});

</script>
{%endif%}

{%endif%}

{% endblock %}