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

{% block localbreadcrumb %}
<li>Layers</li>
{% endblock %}

{% block projectinfomain %}
                <div class="page-header">
                    <h1>
  {% if request.GET.search and objects.paginator.count > 0  %}
      {{objects.paginator.count}} layer{{objects.paginator.count|pluralize}} found
  {%elif request.GET.search and objects.paginator.count == 0%}
      No layer found
  {%else%}
      All layers
  {%endif%}
                        <i class="icon-question-sign get-help heading-help" title="This page lists all the layers compatible with " + {{project.release.name}} + " that Toaster knows about."></i>
                     </h1>
                </div>

  <div id="zone1alerts">

  </div>


                <div id="layer-added" class="alert alert-info lead" style="display:none;"></div>


{% include "basetable_top_layers.html" %}
    {% for lv in objects %}
    <tr class="data">
            <td class="layer"><a href="{% url 'layerdetails' lv.id %}">{{lv.layer.name}}</a></td>
            <td class="description">{{lv.layer.summary}}</td>
            <td class="source"><a href="{% url 'layerdetails' lv.pk %}">{{lv.layer_source.name}}</a></td>
            <td class="git-repo"><a href="{% url 'layerdetails' lv.pk %}"><code>{{lv.layer.vcs_url}}</code></a>
            {% if lv.get_vcs_link_url %}
            <a target="_blank" href="{{ lv.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' lv.pk %}"><code>{{lv.dirpath}}</code></a>
              {% if lv.get_vcs_link_url %}
            <a target="_blank" href="{{ lv.get_vcs_link_url_dirpath }}"><i class="icon-share get-info"></i></a>
        {% endif %}
        </td>
            <td class="branch">{% if lv.branch %}{{lv.branch}}{% else %}{{lv.up_branch.name}}{% endif %}</td>
            <td class="dependencies">
        {% with lvds=lv.dependencies.all%}
            {% if lvds.count %}
                    <a class="btn"
                        title="<a href='{% url "layerdetails" lv.pk %}'>{{lv.layer.name}}</a> dependencies"
                        data-content="<ul class='unstyled'>
                          {% for i in lvds%}
                            <li><a href='{% url "layerdetails" i.depends_on.pk %}'>{{i.depends_on.layer.name}}</a></li>
                          {% endfor %}
                        </ul>">
                        {{lvds.count}}
                    </a>
            {% endif %}
        {% endwith %}
            </td>
            <td class="add-del-layers" value="{{lv.pk}}">
                <button id="layer-del-{{lv.pk}}" class="btn btn-danger btn-block remove-layer" style="display:none;" onclick="layerDel({{lv.pk}}, '{{lv.layer.name}}', '{%url 'layerdetails' lv.pk%}')">
                    <i class="icon-trash"></i>
                    Delete layer
                </button>
                <button id="layer-add-{{lv.pk}}" class="btn btn-block" style="display:none;" onclick="layerAdd({{lv.pk}}, '{{lv.layer.name}}', '{%url 'layerdetails' lv.pk%}')" >
                    <i class="icon-plus"></i>
                    Add layer
                </button>
            </td>
     </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>

<script>

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") {
                alert(_data.error);
            } else {
                updateButtons(_data.layers.map(function (e) {return e.id}));
                if (onsuccess != undefined) onsuccess(_data);
            }
        },
        error: function (_data) {
            alert("Call failed");
            console.log(_data);
        }
    });
}


function layerDel(layerId, layerName, layerURL) {
    _makeXHREditCall({ 'layerDel': layerId }, function () {
        show_alert("<strong>1</strong> layer deleted 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\"><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);

    $("#dependencies_modal_form").submit(function (e) {
        e.preventDefault();
        var selected = [layerId];
        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});

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

            $('#dependencies_modal').modal('hide');
            show_alert("<strong>"+selected.length+"</strong> layers added to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>:" + layer_link_list);
        });
    });
    $('#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") {
                    alert(_data.error);
                } else {
                    if (_data.list.length > 0) {
                        show_dependencies_modal(layerId, layerName, layerURL, _data.list);
                    }
                    else {
                        _makeXHREditCall({ 'layerAdd': layerId }, function () {
        show_alert("<strong>1</strong> layer added to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
                        });
                    }
                }
            }
    })
}

function button_set(id, state) {
    if (state == "add")
    {
        $("#layer-add-" + id).show();
        $("#layer-del-" + id).hide();
    }
    else if (state == "del")
    {
        $("#layer-add-" + id).hide();
        $("#layer-del-" + 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 (){
    updateButtons({{projectlayerset}});
});

</script>

{% endblock %}