{% load i18n %}
<script type="text/javascript">
    var remove_btn_label = '{% trans "Remove" %}';
    var lib_template = '<tr id_attr="$id">' +
            '<td>' +
            '<div class="input form-group"  id="lib-name"><input disabled value="$lib_name" class="form-control" /></div>' +
            '</td>' +
            '<td>' +
            '<div class="input form-group" id="btn-remove-lib">' +
            '<input type="button" class="btn btn-danger" id="delete_btn_$id" data-toggle="dropdown" onclick="delete_lib(this)" value="' + remove_btn_label +'" />' +
            '</div>' +
            '</td>' +
            '<td>' +
            '<div class="input form-group" id="lib-name-hidden">' +
            '<input id="lib_name_$id" value="$lib_name" type="hidden" name="lib_name_$id">' +
            '</div>' +
            '</td>' +
            '</tr>';

    function get_next_lib_id() {
        var max = -1;
        $("#libs tbody tr").each(function () {
            max = Math.max(max, parseInt($(this).attr("id_attr")));
        });
        return max + 1;
    }

    function set_lib_ids() {
        var ids = [];
        $("#libs tbody tr").each(function () {
            ids.push($(this).attr("id_attr"));
        });
        $("#lib_ids").val(JSON.stringify(ids));
    }

    function add_lib_node(lib_name, id) {
        var tmp = lib_template.
                replace(/\$id/g, id).
                replace(/\$lib_name/g, lib_name);
        $("#libs tbody").append(tmp);
        $("#libs").show();
        set_lib_ids();
    }

    function add_lib() {
        var select_elem = $("#id_lib_binaries");
        var lib_id = select_elem.val();
        var chosen = select_elem.find('option[value="' + lib_id + '"]');
        var lib_val = chosen.val();
        if (lib_val == "") {
            return;
        }
        add_lib_node(chosen.html(), chosen.val());
    }
    function delete_lib(el) {
        var tr = $(el).parents("tr")[0];
        tr.parentNode.removeChild(tr);
        var id = get_next_lib_id();
        if (id == 0) {
            $("#libs").hide();
        }
        set_lib_ids();
    }

    $("#id_lib_binaries").on('change', change_selected_lib);

    function change_selected_lib() {
        var select_elem = $("#id_lib_binaries");
        var lib_id = select_elem.val();
        var chosen = select_elem.find('option[value="' + lib_id + '"]');
        var lib_val = chosen.val();
        if (lib_val == "") {
            $("#add_lib_button").addClass("disabled");
        } else {
            $("#add_lib_button").removeClass("disabled");
        }
    }

    $("#libs").hide();

</script>

<div class="lib-input-div">
  {% include "horizon/common/_form_fields.html" %}
  <div class="input">
    <a id="add_lib_button" class="btn btn-default disabled btn-inline" onclick="add_lib();">{% trans "Choose" %}</a>
  </div>
</div>
<div class="form-help-block">
  {{ step.get_help_text }}
</div>
<input type="hidden" value="[]" name="lib_ids" id="lib_ids">
<br/>
<div id="libs" class="job-libs-display">
    <table>
        <thead>
        <tr>
            <td><label style="padding-bottom:5px">{% trans "Chosen Libraries" %}</label></td>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
