<div class="form">

    <div class="fields">

      % for hook in c.custom_hooks:

      <div class="field"  id="${'id%s' % hook.ui_id }">

        <div class="label label">

            <label for="${hook.ui_key}">${hook.ui_key}</label>

        </div>

        <div class="input" style="margin-left:280px">

            ${h.hidden('hook_ui_key',hook.ui_key)}

            ${h.hidden('hook_ui_value',hook.ui_value)}

            ${h.text('hook_ui_value_new',hook.ui_value,size=60)}

            <span class="action_button"

            onclick="ajaxActionHook(${hook.ui_id},'${'id%s' % hook.ui_id }')">

            <i class="icon-minus-circled" style="color:#FF4444"></i>

            ${_('delete')}

            </span>

        </div>

      </div>

      % endfor

      <div class="field">

        <div class="input" style="margin-left:-135px;position: absolute;">

          <div class="input">

          </div>

        </div>

        <div class="input" style="margin-left:280px">

            ${h.text('new_hook_ui_value',size=60)}

        </div>

      </div>

      <div class="buttons" style="margin-left:280px">

         ${h.submit('save',_('Save'),class_="btn")}

      </div>

    </div>

</div>

${h.end_form()}

% endif

<script type="text/javascript">

function ajaxActionHook(hook_id,field_id) {

    var sUrl = "${h.url('admin_settings_hooks')}";

    var callback = {

        success: function (o) {

            var elem = YUD.get(""+field_id);

            elem.parentNode.removeChild(elem);

        },

        failure: function (o) {

            alert("${_('Failed to remove hook')}");