<table width="100%" border="0" cellpadding="4" cellspacing="0">
    <tr class="header">
        <td colspan="3" valign="top">
            <div style="position:relative;">
                [l]Package Add-ons[/l]{ADDONS_TITLEPOPUP}:
                <input type="button" id="addNewAddonBtn" class="button_large" value="[lh]Add new[/lh]" onclick="editAddon(0)" style="margin-left:10px;" />
                <span style="position:absolute; top:0; right:0; bottom:0; font-weight:normal;">
                    [l]Import[/l]:
                    <select onchange="importAddon(this.value);">
                        <option value="0">[l]Select Add-on[/l]&nbsp;&nbsp;</option>
                        <!-- BEGIN DYNAMIC BLOCK: selectImport -->
                        <option value="{ADDONS_IMPORT_VALUE}" >{ADDONS_IMPORT_LABEL}&nbsp;&nbsp;</option>
                        <!-- END DYNAMIC BLOCK: selectImport -->
                    </select>
                </span>
            </div>
            <div style="margin-top:5px; font-weight:normal; position:relative">
                [l]Drag and drop the items to change the sorting order[/l]
                <span style="position:absolute; top:0; right:0; bottom:0; font-weight:normal;">
                    [l]Style[/l]:
                    <select onchange="changeStyle(this.value)">
                        <option {DROP_DOWN_SELECTED} value="0" >[l]Drop-down menus[/l]&nbsp;&nbsp;</option>
                        <option {RADIO_BUTTONS_SELECTED} value="1" >[l]Radio buttons[/l]&nbsp;&nbsp;</option>
                    </select>
                </span>
            </div>
            <div class="clearline"></div>
        </td>
    </tr>
</table>
<table id="addonsTable" width="100%" cellpadding="4" cellspacing="1" border="0" >
    <tbody id="addonsTableBody">
    <!-- BEGIN DYNAMIC BLOCK: addonItem -->
    <tr id="liAddon_{ADDONS_ID}">
        <td width="1%" class="formLabel" align="right" valign="top" nowrap="true" >
            {ADDONS_NAME}{ADDONS_DESCRIPTION}:
        </td>
        <td width="100%" class="formField">
            <!-- BEGIN DYNAMIC BLOCK: pluginVariable -->
            [l]plugin variable[/l] '{ADDONS_PLUGINVARIABLE}'
            <!-- END DYNAMIC BLOCK: pluginVariable -->
            &nbsp;&nbsp;<a href="javascript:editAddon({ADDONS_ID})" style="font-weight:bold">[l]edit[/l]</a>
            &nbsp;&nbsp;<a href="javascript:deleteAddon({ADDONS_ID})" style="font-weight:bold">[l]delete[/l]</a>
            <ul>
                <!-- BEGIN DYNAMIC BLOCK: addonPrice -->
                <li style="padding:2px 0">
                    <b>{ADDONS_PRICE_DETAIL}</b> {ADDONS_PRICE_PLUGINVARIABLEVALUE}{ADDONS_PRICE_COLON}
                    <!-- BEGIN DYNAMIC BLOCK: addonMonthly -->
                    <span class="warningtext">[l]monthly[/l]:</span>{ADDONS_PRICE_MONTHLY}&nbsp;&nbsp;
                    <!-- END DYNAMIC BLOCK: addonMonthly -->
                    <!-- BEGIN DYNAMIC BLOCK: addonQuarterly -->
                    <span class="warningtext">[l]quarterly[/l]:</span>{ADDONS_PRICE_QUARTERLY}&nbsp;&nbsp;
                    <!-- END DYNAMIC BLOCK: addonQuarterly -->
                    <!-- BEGIN DYNAMIC BLOCK: addonSemiannual -->
                    <span class="warningtext">[l]semiannual[/l]:</span>{ADDONS_PRICE_SEMIANNUAL}&nbsp;&nbsp;
                    <!-- END DYNAMIC BLOCK: addonSemiannual -->
                    <!-- BEGIN DYNAMIC BLOCK: addonAnnual -->
                    <span class="warningtext">[l]annual[/l]:</span>{ADDONS_PRICE_ANNUAL}&nbsp;&nbsp;
                    <!-- END DYNAMIC BLOCK: addonAnnual -->
                    <!-- BEGIN DYNAMIC BLOCK: addon2years -->
                    <span class="warningtext">[l]2 year[/l]:</span>{ADDONS_PRICE_2_YEAR}&nbsp;&nbsp;
                    <!-- END DYNAMIC BLOCK: addon2years -->
                    <!-- BEGIN DYNAMIC BLOCK: addonSetup -->
                    <span class="warningtext">[l]setup[/l]:</span>{ADDONS_PRICE_SETUP}
                    <!-- END DYNAMIC BLOCK: addonSetup -->
                </li>
                <!-- END DYNAMIC BLOCK: addonPrice -->
            </ul>
        </td>
    </tr>
    <!-- END DYNAMIC BLOCK: addonItem -->
    </tbody>
</table>
<br />
<script type="text/javascript">
    Sortable.create('addonsTableBody', {tag: 'tr', onUpdate: updateOrder});

    function updateOrder()
    {
        var order = Sortable.serialize('addonsTableBody');
        var ajaxCall = new Ajax.Request('index.php?fuse=admin&action=UpdateAddonsOrder',
                                        {method: 'post', parameters: 'packageid={ADDONS_PACKAGEID}&'+ order,
                                         onLoading: function(request) {resetStatus(lang('Updating'))},
                                         onComplete: function(request) {unsetStatus(lang('Order updated'), 1000)}});
    }
</script>
