{% load lookup %}

<div class="container-fluid">
<table class="table table-hover">
<thead>
	<tr>
		<th style="text-align: left">Мета информация</th>
        <th style="text-align: right">Действия</th>
	</tr>
</thead>
<tbody class="tableBody">
{% for job in jobs %}

<tr class="mobilejob_tr" id="tr_{{ job.id }}" data-job="{{ job.id }}">
	<td data-job="{{ job.id }}" class="mobile_table_td" style="cursor: pointer;">
		<span>{{ job.id }} -- {{ job.name }}</span>
	</td>
    <td>
    	<div style="float: right;">
			{% if is_in_compare|lookup:job.id %}
	            <i style="cursor: pointer;" class="fa fa-bar-chart mobilejob__action text-bs4success" data-action="compare" data-actiondetail="remove" data-job="{{ job.id }}" title="Убрать из сравнения" aria-hidden="true"></i>
	        {% else %}
	            <i style="cursor: pointer;" class="fa fa-bar-chart mobilejob__action text-muted" data-action="compare" data-actiondetail="add" data-job="{{ job.id }}" title="К сравнению" aria-hidden="true"></i>
	        {% endif %}
            <i style="cursor: pointer; margin-left: 4px; margin-right: 0;" class="fa fa-star b-lunapark-offlinepage__action {% if job.flag %}text-warning{% else %}text-muted{% endif %}" aria-hidden="true" data-action="star" data-task="{{ task }}" data-job="{{ job.id }}" title="Favorite"></i>
	        <i style="cursor: pointer; margin-left: 4px; margin-right: 0;" class="fa fa-pencil b-lunapark-offlinepage__action text-warning" data-action="edit" data-job="{{ job.id }}" title="Редактировать" aria-hidden="true"></i>
	        <i style="cursor: pointer; margin-left: 4px; margin-right: 0;" class="fa fa-trash b-lunapark-offlinepage__action text-danger" data-action="remove" data-job="{{ job.id }}" title="Удалить" data-task="{{ task }}" aria-hidden="true"></i>
	    </div>
	</td>
</tr>

{% endfor %}
</tbody>
</table>
</div>

<style nonce='{{ common.CSP_STYLE_NONCE }}'>
.text-bs4success {
	color: #5cb85c;
}
</style>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="mobileJobTemplate">
    <tr class="mobilejob_tr" id="tr_<%= job.n %>" data-job="<%= job.n %>">
        <td data-job="<%= job.n %>" class="mobile_table_td" style="cursor: pointer;">
            <span><%= job.n %> -- <%= job.name %></span>
        </td>
        <td>
            <div style="float: right;">
                <% if (job.is_in_compare) { %>
                    <i style="cursor: pointer;" class="fa fa-bar-chart mobilejob__action text-bs4success" data-action="compare" data-actiondetail="remove" data-job="<%= job.n %>" title="Убрать из сравнения" aria-hidden="true"></i>
                <% } else { %>
                    <i style="cursor: pointer;" class="fa fa-bar-chart mobilejob__action text-muted" data-action="compare" data-actiondetail="add" data-job="<%= job.n %>" title="К сравнению" aria-hidden="true"></i>
                <% } %>
                <i style="cursor: pointer; margin-left: 4px; margin-right: 0;" class="fa fa-star b-lunapark-offlinepage__action <% if (job.flag) { %>text-warning<% } else { %>text-muted<% } %>" aria-hidden="true" data-action="star" data-task="<%= job.task %>" data-job="<%= job.n %>" title="Favorite"></i>
                <i style="cursor: pointer; margin-left: 4px; margin-right: 0;" class="fa fa-pencil b-lunapark-offlinepage__action text-warning" data-action="edit" data-job="<%= job.n %>" title="Редактировать" aria-hidden="true"></i>
                <i style="cursor: pointer; margin-left: 4px; margin-right: 0;" class="fa fa-trash b-lunapark-offlinepage__action text-danger" data-action="remove" data-job="<%= job.n %>" title="Удалить" data-task="<%= job.task %>" aria-hidden="true"></i>
            </div>
        </td>
    </tr>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>

    $(window).scroll(function() {
       if($(window).scrollTop() + window.innerHeight > ($(document).height()-1)) {
           showMore();
       }
    });

    var mobileJobTemplate = _.template($('#mobileJobTemplate').text());

    function showMore() {
        var url = '/'+ $('#globalTask').data('task') + '/more_mobilejobs.json?limit=30&before=' + $('.tableBody tr:last-child').data('job');
        $.get(url, function(jobs) {
        	if (!jobs.length) {
        		console.info('No more jobs');
        	}
            for (var n in jobs) {
                $('.tableBody').append(mobileJobTemplate({
                	job: jobs[n],
                	}));
            }
            bindActions();
        }, "json");
    }
    function bindActions() {
        var $buttons = $('.mobilejob__action');
        $buttons.off();
        $buttons.on('click', function () {
            var button = $(this);
            var action = button.data('action'),
                job = button.data('job');

            switch (action) {
                case 'remove':
                    if (!confirm("Таки удалить эту стрельбу или нет?")) {
                        return false;
                    }

                    $.post('/mass_delete.json', {
                        "type": "mobile",
                        "fire_ids[]" : job
                    }).success(function(data) {
                        if (data.status === "1") {
                            $("#tr_job").remove()
                            //window.location.href = "/" + button.data("task") + "#mobile";
                        }
                    });
                    break;
                case 'compare':
                    console.log('1');
                    var actiond = button.data('actiondetail');
                    $.post('/mass_compare.json', {
                        "type": "mobile",
                        "action" : actiond,
                        "fire_ids[]" : job
                    }).success(function(data) {
                        if (actiond === 'add') {
                            button.data('actiondetail', 'remove')
                        }
                        else {
                            button.data('actiondetail', 'add')
                        }
                        button.toggleClass('text-muted');
                        button.toggleClass('text-bs4success'); // text-success
                        console.log('1');
                        if (data) {
                            if (data.status === "1") {
                                $(".b_mobilecompare_count").html(data.count);
                                if (data.count > 0) {
                                    $(".b_mobilecompare_count__delete").show();
                                } else {
                                    $(".b_mobilecompare_count__delete").hide();
                                }
                            }
                        }
                    });
                    break;
                case 'edit':
                    window.location.href = "/mobile/" + job + "/edit";
                    break;
                case 'star':
                    // the star
                    var isFav = button.hasClass('text-warning');
                    $.ajax('/' + button.data('task') + '/addtofav.json', {
                        type : 'POST',
                        dataType : 'json',
                        data : {
                            type: "mobile",
                            action : isFav ? 'remove' : 'add',
                            job_id : job
                        },
                    }).success(function(data) {
                        if (data.status === 1) {
                            button.toggleClass('text-muted');
                            button.toggleClass('text-warning');
                        }
                    });
                    break;
                default:
                    break;
            }
        });

        var $cells = $('.mobile_table_td');
        $cells.off();
        $cells.on('click', function(event){
            var job = $(this).data('job');
            if( event.which === 2 ) {
                var win = window.open('/mobile/' + job, '_blank');
                win.focus();
                event.stopPropagation();
            } else {
                window.location.href = '/mobile/' + job;
                event.stopPropagation();
            }
        })
    }

    bindActions();

</script>