{script}
{literal}

$(document).ready( function() {
$('#s1, #s2').sortable({
items: 'tr.draggable-lang-item',
helper: 'clone',
placeholder: 'lang_placeholder',
start: function (event, ui) {
$(ui.placeholder).append('<td colspan="4"></td>');
$(ui.placeholder).css('backgroundColor', 'rgb(220,220,220)');
},

stop: function (event, ui) {

switch (this) {
case $('#s1')[0]:

$('tr.draggable-lang-item:odd', this).each(function () {

if (!$(this).hasClass('ow_even')) $(this).addClass('ow_even');
});


$('tr.draggable-lang-item:even', this).each(function () {
if ($(this).hasClass('ow_even')) $(this).removeClass('ow_even');
});
break;
}
},

receive: function (event, ui) {
switch (this) {
case $('#s1')[0] :
$('tr.draggable-lang-item', this).each(function () {
$('td:nth(1) a.deact', this).show();
$('td:nth(1) a.act', this).hide();
$('td:nth(1) a.del', this).hide();

if ($(this).hasClass('ow_high2')) {
$(this).removeClass('ow_high2');
}
});

if ($('tr.draggable-lang-item', this).length == 0) {
$.alert('{text key="admin+msg_one_active_constraint"}');

$(this).sortable('cancel');
$('#s1 tr.empty').remove();
break;
}

$('tr.draggable-lang-item:odd', this).each(function () {
if (!$(this).hasClass('ow_even')) $(this).addClass('ow_even');
});


$('tr.draggable-lang-item:even', this).each(function () {
if ($(this).hasClass('ow_even')) $(this).removeClass('ow_even');
});

break;

case $('#s2')[0]:
if ($('tr.draggable-lang-item', ui.sender).length == 0) break;
$('tr.draggable-lang-item', this).each(function () {

$('td:nth(1) a.deact', this).hide();
$('td:nth(1) a.act', this).show();
$('td:nth(1) a.del', this).show();

if ($(this).hasClass('ow_even'))
$(this).removeClass('ow_even');

if (!$(this).hasClass('ow_high2'))
$(this).addClass('ow_high2');
});
break;
}
},

update: function (event, ui) {
if (ui.sender) {
if ($('tr', ui.sender[0]).length == 0) $(ui.sender[0]).append('<tr class="empty"><td colspan="4">{/literal}{text key="iistelegram+empty_row_label"}{literal}</td></tr>');
return;
}

if ($('#s1 tr.empty').length == 1 && $('#s1 tr.draggable-lang-item').length > 0)
$('#s1 tr.empty').remove();

if ($('#s2 tr.empty').length == 1 && $('#s2 tr.draggable-lang-item').length > 0)
$('#s2 tr.empty').remove();


$('tr.draggable-lang-item', '#s1').each(function () {
$('td:nth(1) a.deact', this).show();
});

$('tr.draggable-lang-item', '#s2').each(function () {
$('td:nth(1) a.act', this).show();
});

$('tr.draggable-lang-item', '#s2').each(function () {
$('td:nth(1) a.deact', this).hide();
});

$('tr.draggable-lang-item', '#s1').each(function () {
$('td:nth(1) a.act', this).hide();
});

var set = {};

$('tr.draggable-lang-item', '#s1').each(function (i) {
set['active[' + i + ']'] = parseInt($('input:hidden', this).attr('value'));
});

$('tr.draggable-lang-item', '#s2').each(function (i) {
set['inactive[' + i + ']'] = parseInt($('input:hidden', this).attr('value'));
});

$('td:nth(0) span.ow_mild_green', $('tr.draggable-lang-item', '#s1, #s2')).remove();
$.ajax({
type: "POST",
url: '{/literal}{url_for for="IISTELEGRAM_CTRL_Admin:ajaxSaveOrder"}{literal}',
data: set
});

},

connectWith: '#s1, #s2'
}).each(function () {
$('tr.draggable-lang-item', this).hover(
function () {
$('td:nth-child(4) div span', this).show()
},
function () {
$('td:nth-child(4) div span', this).hide()
}
);

if ($('tr.draggable-lang-item', this).length == 0)
$(this).append('<tr class="empty"><td colspan="4">{/literal}{text key="iistelegram+empty_row_label"}{literal}</td></tr>');
});
});

{/literal}
{/script}

<div class="ow_automargin ow_wide">
{form name="form"}
	<table class="ow_table_1 ow_form">
	    <tr class="ow_tr_first">
	        <th class="ow_name ow_txtleft" colspan="2">
	            <span class="ow_section_icon ow_ic_gear_wheel">{text key="iistelegram+settings"}</span>
	        </th>
	    </tr>
		<tr class="{cycle values='ow_alt1, ow_alt2'} ow_tr_last">
			<td style="width: 50%">
				{label name='icon_type'}
			</td>
			<td style="direction: ltr;">
				{input name='icon_type'}<br />
				{error name='icon_type'}
			</td>
		</tr>
	    <tr class="{cycle values='ow_alt1, ow_alt2'} ow_tr_last">
	    	<td style="width: 50%">
                {label name='link' }
	    	</td>
			<td style="direction: ltr;">
	    		<span style=" width: 50%;">https://telegram.me/</span>
				{input name='link' style="width: 50%;direction: ltr;"}<br />
				{error name='link'}
			</td>
	    </tr>
		<tr class="{cycle values='ow_alt1, ow_alt2'} ow_tr_last">
			<td style="width: 50%">
				{label name='results_per_page' }
			</td>
			<td>
				{input name='results_per_page'}<br />
				{error name='results_per_page'}
			</td>
		</tr>
		<tr class="{cycle values='ow_alt1, ow_alt2'} ow_tr_last">
			<td style="width: 50%">
				{label name='bot_api_key' }
			</td>
			<td style="direction: ltr;">
				{input name='bot_api_key' style="direction: ltr;"}<br />
				{error name='bot_api_key'}
			</td>
		</tr>
	</table>
    <div class="clearfix ow_submit ow_stdmargin">
    	<div class="ow_right">
    	{submit name="submit"}
    	</div>
    </div>
{/form}
</div>

<table id="langs" class="ow_table_1">
	<tr class="ow_tr_first">
		<th colspan="4" class="ow_center">{text key="iistelegram+active_items"}</th>
	</tr>
	<tr class="ow_tr_first">
		<th class="ow_center">{text key="iistelegram+id_label"}</th>
		<th class="ow_center">{text key="iistelegram+title_label"}</th>
		<th class="ow_center">{text key="iistelegram+type_label"}</th>
		<th class="ow_center" colspan="2"></th>
	</tr>

	<tbody id="s1" class="s">
	{foreach from=$activeItems item="listItem"}
	<tr class="ow_high1 draggable-lang-item ow_tr_last">
		<td><input type="hidden" value="{$listItem.id}"/>{$listItem.chatId}</td>
		<td><p class="justify">{$listItem.title}</p></td>
		<td><p class="justify">{$listItem.type}</p></td>
		<td>
			<a class="ow_lbutton ow_green" onclick="{$listItem.editUrl}" style="display: inline-block;">{text key="iistelegram+edit_item"}</a>
			<a class="ow_lbutton ow_red deact" href="{$listItem.deactivateUrl}">{text key="iistelegram+deactivate_item"}</a>
			<a class="ow_lbutton ow_green act" href="{$listItem.activateUrl}">{text key="iistelegram+activate_item"}</a>
		</td>
	</tr>
	{/foreach}
	</tbody>
	<tr class="ow_tr_delimiter">
		<td></td>
	</tr>

	<tr class="ow_tr_first ow_tr_last">
		<th colspan="4" class="ow_center">{text key="iistelegram+inactive_items"}</th>
	</tr>

	<tfoot id="s2" class="s">
	{foreach from=$inactiveItems item="listItem"}
	<tr class="ow_high1 draggable-lang-item ow_tr_last">
		<td><input type="hidden" value="{$listItem.id}"/>{$listItem.chatId}</td>
		<td><p class="justify">{$listItem.title}</p></td>
		<td><p class="justify">{$listItem.type}</p></td>
		<td>
			<a class="ow_lbutton ow_green" onclick="{$listItem.editUrl}" style="display: inline-block;">{text key="iistelegram+edit_item"}</a>
			<a class="ow_lbutton ow_red deact" href="{$listItem.deactivateUrl}">{text key="iistelegram+deactivate_item"}</a>
			<a class="ow_lbutton ow_green act" href="{$listItem.activateUrl}">{text key="iistelegram+activate_item"}</a>
		</td>
	</tr>
	{/foreach}
	<tfoot>

</table>