{$context->oPage->requireJSResource('resources/js/jsonlookup.js')}
{capture assign=sJavascript}addLoadEvent(initJSONLookup('{$name}','{addQS}action=json&json_action={$options.action}{/addQS}')){/capture}
{$context->oPage->requireJSStandalone($sJavascript)}

<div class="field {if ($has_errors)}error{/if}">
  
  <p class="descriptiveText">{$description}</p>

  {if ($has_errors)}
      {foreach item=sError from=$errors}
          <p class="errorMessage">{$sError}</p>
      {/foreach}
  {else}
      <p class="errorMessage"></p>
  {/if}
      
<table>

<thead>
    <tr>
        <td style="width:45%"><label for="select_{$name}_avail">{i18n}Available{/i18n} {$label}</label></td>
        <td style="width:10%">&nbsp;</td>
        <td style="width:45%"><label for="select_{$name}_assigned">{i18n}Assigned{/i18n} {$label}</label></td>
    </tr>
</thead>

<tbody>
    <tr>
    <td style="vertical-align: top">

  <select name="{$name}" id="select_{$name}_avail" {if $options.multi}multiple="true"{/if} {if $options.size}size="{$options.size}"{/if}>
  {foreach item=lookup key=lookup_key from=$options.vocab}
       <option value="{$lookup_key}" {if ($value == $lookup_key)}selected="selected"{/if}>{$lookup}</option>
  {/foreach}
  </select>

  <div><label for="filter_{$name}_avail">{i18n}Filter{/i18n}</label><input type="text" id="filter_{$name}_avail" /><br/><a href="#" id="{$name}_show_all">{i18n}Show All{/i18n}</a></div>
    </td>

    <td>
    
    <input type="button" id="{$name}_add" value="&raquo;" />
    <br /><br/>
    <input type="button" id="{$name}_remove" value="&laquo;" />
    
    </td>

    <td style="vertical-align: top">

  <select name="{$name}" id="select_{$name}_assigned" {if $options.multi}multiple="true"{/if} {if $options.size}size="{$options.size}"{/if}>
  {foreach item=lookup key=lookup_key from=$options.assigned}
       <option value="{$lookup_key}" {if ($value == $lookup_key)}selected="selected"{/if}>{$lookup->getName()}</option>
  {/foreach}
  </select>
  <div><label for="filter_{$name}_assigned">{i18n}Filter{/i18n}</label><input type="text" id="filter_{$name}_assigned" /></div>
    </td>
    </tr>
</tbody>
</table>

  <input name="{$name}_items_added" id="{$name}_items_added" type="hidden" />
  <input name="{$name}_items_removed" id="{$name}_items_removed" type="hidden" />
  
  <input type="hidden" name="kt_core_fieldsets_expect[{$name}]" value ="1" />
</div>