<div class="data-grid">{{ data_table.render }}</div>
{% if js_buttons %}
    <button type="button" id="node-add" class="btn btn-small">Add node</button>
    <button type="button" id="node-remove" class="btn btn-small">Remove node</button>
    <script>
        $(function() {
            var MAX_NODES, MIN_NODES, MAX_SYNC;

            if ( {{ max_value }} )
                MAX_NODES = {{ max_value }};
            else
                MAX_NODES = Infinity;

            if ( {{ min_value }} )
                MIN_NODES = {{ min_value }};
            else
                MIN_NODES = -Infinity;

            if ( {{ max_sync }} )
                MAX_SYNC = {{ max_sync }};
            else
                MAX_SYNC = Infinity;

            function trimLabel(label) {
                return $.trim(label.replace(/(\r\n|\r|\n|↵)/gm, ''));
            }

            function getMaxLabel() {
                var labels = [],
                        max = 0,
                        base = '';
                $('.data-grid table tbody tr td:first-child').each(function(i, td) {
                    labels.push(trimLabel($(td).text()));
                });
                labels.forEach(function(label) {
                    var match = /([a-zA-z]+)-([0-9]+)/.exec(label),
                            n = +match[2];
                    base = match[1];
                    if ( n > max )
                        max = n;
                });
                return [base, max]
            }

            function getNextLabel() {
                var baseMax = getMaxLabel();
                return baseMax[0]+'-'+(+baseMax[1]+1);
            }

            function getNumOfSync() {
                var checked = 0;
                $('.data-grid table tbody td input:checkbox').each(function(index, cb) {
                    if ( $(cb).attr('checked') )
                        checked++;
                });
                return checked;
            }

            function validate_sync(event) {
                var checkbox = $(event.target);

                if ( checkbox.attr('checked') ) {
                    if ( getNumOfSync() > MAX_SYNC ) {
                        alert('No more than ' + MAX_SYNC + ' nodes can be in sync-mode!')
                        checkbox.attr('checked', false);
                    }
                } else if ( checkbox.parents().eq(1).find('input:radio').attr('checked') ) {
                    alert('Primary node is always in sync-mode!');
                    checkbox.attr('checked', true);
                }
            }

            var primary = $('.data-grid table tbody input:radio[checked="checked"]').parents().eq(1);

            function validate_primary(event) {
                var radio = $(event.target),
                        checkbox = radio.parents().eq(1).find('input:checkbox');
                if ( !checkbox.attr('checked') ) {
                    if ( getNumOfSync() == MAX_SYNC )
                        primary.find('input:checkbox').attr('checked', false);
                    checkbox.attr('checked', true);
                }
                primary = radio.parents().eq(1);
            }

            $('.data-grid table tbody td input:checkbox').click(validate_sync);
            $('.data-grid table tbody td input:radio').click(validate_primary);

            $('button#node-add').click(function() {
                debugger;
                if ( $('.data-grid table tbody tr').length >= MAX_NODES ) {
                    alert('Maximum number of nodes ('+MAX_NODES+') already reached.');
                    return;
                }
                var lastRow = $('.data-grid table tbody tr:last-child'),
                        clone = lastRow.clone(),
                        nameCell = clone.find('td:first-child'),
                        hidden = nameCell.find('input:hidden'),
                        match = /([^@]+)@@([0-9]+)@@(.+)/.exec(hidden.attr('name')),
                        index = +match[2]+1,
                        nextLabel = getNextLabel();
                nameCell.text(nextLabel);
                hidden.val(nextLabel);
                hidden.attr('name', match[1]+'@@'+index+'@@'+match[3]);
                nameCell.append(hidden);
                // toggle of sync and primary buttons of clone
                clone.find('input:checkbox').attr('checked', false);
                clone.find('input:checkbox').click(validate_sync);
                clone.find('input:radio').attr('checked', false);
                clone.find('input:radio').click(validate_primary);
                lastRow.after(clone);
            });

            $('button#node-remove').click(function() {
                if ( $('.data-grid table tbody tr').length <= MIN_NODES ) {
                    alert('There cannot be less than ' + MIN_NODES + ' nodes');
                    return;
                }
                var labelNum = getMaxLabel(),
                        label = labelNum.join('-'),
                        rowRef = '.data-grid table tbody tr:contains('+label+')';
                if ( $(rowRef + ' :radio[checked="checked"]') ) {
                    label = labelNum[0] + '-' + (labelNum[1] - 1);
                    $('.data-grid table tbody tr:contains('+label+') :radio').attr(
                            'checked', 'checked');
                }
                $(rowRef).remove();
            });
        });
    </script>
{% endif %}
<script>
    $('.data-grid .table_caption').remove()
</script>
