{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js" }
{known_script id="jquery.ui.sortable" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.sortable.packed.js" }

{html_head}
{literal}
<style type="text/css">
#categoryOrdering li {
  height: 60px;
}
#categoryOrdering p {
  margin-bottom: 0 !important;
  margin-top: 0.5em !important;
}
.stuffs_line {
  margin: 0 10px;
}
.MainBlock {
  color: #ff3363;
}
</style>
{/literal}
{/html_head}

<script type="text/javascript">
  jQuery().ready(function(){ldelim}
    jQuery(".catPos").hide();
    jQuery(".drag_button").show();
    jQuery(".categoryLi").css("cursor","move");
    jQuery(".categoryUl").sortable({ldelim}
      axis: "y",
      opacity: 0.8
    });
    jQuery("#categoryOrdering").submit(function(){ldelim}
      ar = jQuery('.categoryUl').sortable('toArray');
      for(i=0;i<ar.length;i++) {ldelim}
        module = ar[i].split('module_');
        document.getElementsByName('position[' + module[1] + ']')[0].value = i;
      }
    });
  });
</script>

<div class="titrePage">
  <h2>PWG Stuffs</h2>
</div>

<form id="categoryOrdering" method="post" action="">

	<ul class="categoryUl">
  {foreach from=$modules item=module}

    <li class="categoryLi virtual_cat" id="module_{$module.ID}">
      {if $module.TYPE != 'MainBlock'}
      <ul class="categoryActions">
        {if $module.TYPE != 'MainBlock'}
        <li class="stuffs_line">
          {'stuffs_id_ligne'|@translate}&nbsp;
          <select name="id_line[{$module.ID}]">
          {html_options options=$module.ID_LINE_OPTIONS selected=$module.ID_LINE_SELECTED}
          </select>
        </li>
        <li class="stuffs_line">
          {'stuffs_width'|@translate}&nbsp;
          <input type="text" size="2" maxlength="2" value="{$module.WIDTH}" name="width[{$module.ID}]" > %
        </li>
        {/if}
        <li><a href="{$module.U_EDIT}" title="{'stuffs_edit'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_edit.png" class="button" alt="{'stuffs_edit'|@translate}"/></a></li>
        {if !empty($module.U_DELETE) }
        <li><a href="{$module.U_DELETE}" title="{'stuffs_delete'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"><img src="{$themeconf.admin_icon_dir}/category_delete.png" class="button" alt="{'stuffs_delete'|@translate}" /></a></li>
        {/if}
      </ul>
      {/if}

      <p>
      <img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" style="display:none;" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}"/>
      <strong>{if $module.TYPE == 'MainBlock'}<span class="MainBlock">{$module.NAME}</span>{else}<a href="{$module.U_EDIT}">{$module.NAME}</a>{/if}</strong>
      {if $module.TYPE != 'MainBlock'}&nbsp;-  &nbsp;{$module.TYPE_NAME}{/if}
      </p>

      {if !empty($module.DESC)}
      <p style="margin-left: 30px;"><i>{$module.DESC}</i></p>
      {/if}

      <p class="catPos">
        <label>
          {'Position'|@translate}
          <input type="text" size="4" name="position[{$module.ID}]" maxlength="4" value="{$module.POS}" />
        </label>
      </p>
    </li>
    {/foreach}
  </ul>

  <p style="text-align: center;">
  <br />
    <input class="submit" name="submitOrder" type="submit" value="{'Save order'|@translate}" {$TAG_INPUT_ENABLED} />
  </p>
</form>



{*
	<legend>{'stuffs_mods_management'|@translate}</legend>
	<table class="table2">
	<thead>
		<tr class="throw">
  		<td>{'stuffs_module_title'|@translate}</td>
  		<td>{'stuffs_desc'|@translate}</td>
 			<td>{'stuffs_type'|@translate}</td>
 			<td>{'stuffs_position'|@translate}</td>
 			<td>{'stuffs_id_ligne'|@translate}</td>
			<td>{'stuffs_width'|@translate}</td>
 			<td>{'stuffs_action'|@translate}</td>
		</tr>
	</thead>

	{foreach from=$modules item=module}
	<tr class="{$module.CLASS}" height="28">
  		<td align="center">{$module.NAME}</td>
  		<td align="center">{$module.DESC}</td>
  		<td align="center">{$module.TYPE}</td>
  		<td align="center"><input type="text" size="2" maxlength="2" value="{$module.POS}" name="position[{$module.ID}]"/></td>
  		<td align="center">{$module.ID_LINE}</td>
		<td align="center">{$module.WIDTH}</td>
  		<td align="center">{$module.ACTION}</td>
	</tr>
	{/foreach}
*}