{capture assign=sCSS}
{literal}
/* inactivity */
.active .inactivity_message { display: none; }

/* fixed status */
.active .fixed_message { display: none; }
.active.fixed .fixed_message { display: block; }
.active.fixed .unassigned_items { display: none; }

.inactive { background: #ccc; }
.inactive .fixed_message, 
.inactive .unassigned_items,
.inactive .available_behaviours,
.inactive .behaviour_edit_options 
{ display: none; }

.inactive .assigned_items { display: none; }

.assigned_items.empty select { display: none; }
.assigned_items.empty .assigned_items_message { display: block; color: #666; }
.assigned_items_message { display: none; }

.helpText { color: #666; }


/*   logging support */
#brad-log .severity-INFO { color: blue; font-weight: bold; }
#brad-log .severity-DEBUG { color: green; font-weight: bold; }
#brad-log .severity-ERROR { color: red; font-weight: bold; }
#brad-log .explanation { font-family: monospace; white-space: pre; }


{/literal}
{/capture}
{$context->oPage->requireCSSStandalone($sCSS)}

{$context->oPage->requireJSResource("resources/js/taillog.js")}
{$context->oPage->requireJSResource("resources/js/conditional_complex_edit.js")}

{capture assign=sJS}
addLoadEvent(updateActiveFields);
{/capture}
{$context->oPage->requireJSStandalone($sJS)}

<h2>{i18n}Edit Complex Conditional Metadata{/i18n}</h2>

<p class="descriptiveText">{i18n}Complex Conditional Metadata depends on what are 
called "behaviours".  Essentially, behaviours are assigned to a <strong>single</strong>
field, and can contain any number of values that are available in that field.  Each field
can have multiple behaviours assigned to it.{/i18n}</p>

<p class="descriptiveText important">{i18n}Each behaviour can cause a number of other behaviours &mdash; in
the field's <strong>child</strong> fields &mdash; to become available.  By assigning values
to behaviours, and creating relationships between behaviours, you can create extremely complex 
relationships between available lookup values.{/i18n}</p>

<p class="descriptiveText important">{i18n}Changes made here are stored immediately, without you needing to
refresh the page.{/i18n}</p>


<form method="POST" action="{$smarty.server.PHP_SELF}">
<input type="hidden" name="fieldset_id" id="global-fieldset-id" value="{$fieldset_id}" />

<table>
<!--
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
</tr> -->
<tbody>
<tr valign="top">
{foreach from=$aFields item=oField}
  <td class="inactive" id="md_{$oField->getId()}">
	<h3>{$oField->getName()}</h3>
     <p class="inactivity_message">{i18n}This column is not active.{/i18n}</p>
     <p class="fixed_message">{i18n}Editing behaviour <strong>Jack</strong>{/i18n}</p>
	 <div class="assigned_items">
	 <h3>{i18n}Assigned Items{/i18n}</h3>
	     <select class="assigned_item_list" multiple="true">
		  <!--     These are orphaned - we fire a "activate" command on load / available.
            <option value="-1">Test 1</option>
            <option value="-2">Test 2</option>
            <option value="-3">Test 3</option>
            <option value="-4">Test 4</option>
		  -->
         </select>	 
		 <br /><input class="assigned_item_list" type="button" value="{i18n}remove behaviour{/i18n}" onclick="removeFromBehaviour({$oField->getId()});" />
		 <p class="assigned_items_message">{i18n}No items have been assigned with the current
		 parent behaviour.{/i18n}</p>
	 </div>
	 
     <div class="unassigned_items">
     <h3>{i18n}Unassigned/Unavailable{/i18n}</h3>
         <select class="item_list" multiple="true">
		  <!--     These are orphaned - we fire a "activate" command on load / available.
            <option value="-1">Test 1</option>
            <option value="-2">Test 2</option>
            <option value="-3">Test 3</option>
            <option value="-4">Test 4</option>
		  -->
         </select>
     <p><strong>{i18n}Assign to behaviour{/i18n}</strong></p>
     <select class="available_behaviours" onchange="assignToBehaviour(this, {$oField->getId()});">
         <option>{i18n}Select a behaviour{/i18n}</option>
	     <!-- ditto 
		 <option value="1">Behaviour 1</option>
         <option value="2">Behaviour 2</option>
         <option value="3">Behaviour 3</option>
         <option value="4">Behaviour 4</option>
		 -->
     </select> <br />
     {i18n}<strong>or</strong> to a new behaviour called{/i18n} <br />
     <input type="text" name="new_behaviour" class="new_behaviour" />
     <input type="button" value="{i18n}create behaviour{/i18n}" onclick="assignToNewBehaviour({$oField->getId()});" />
     </div>
     <div class="behaviour_edit_options">
     <h3>{i18n}Edit Behaviour{/i18n}</h3>
     <p class="helpText">
        {i18n}Select a behaviour from this list to change the
        items which are available.{/i18n}
     </p>
         <select class="edit_behaviours" onchange="editBehaviour(this, {$oField->getId()});">
         <option>{i18n}Select a behaviour{/i18n}</option>
		 <!--
         <option value="1">Behaviour 1</option>
         <option value="2">Behaviour 2</option>
         <option value="3">Behaviour 3</option>
         <option value="4">Behaviour 4</option>
		 -->
         </select>

     </div>
  </td>
{/foreach}
</tr>
</tbody>
</table>

<!--
<table id="brad-log">
<thead>
<tr>
    <th>Severity</th>
    <th>Time</th>
    <th>Entry</th>
</tr>
</thead>
<tbody  >

</tbody>
</table>
-->