<div class="form">
    <div class="form-horizontal">
      <div class="form-group">
      <h4>${_('Built-in Mercurial Hooks (Read-Only)')}</h4>
      % for hook in c.hooks:
        <% input_id = hook.ui_key.replace('.', '_') %>
            <label class="control-label" for="${input_id}">${hook.ui_key}</label>
            <div style="margin-left:280px">
              ${h.text(hook.ui_key,hook.ui_value,id=input_id,size=60,readonly="readonly",class_='form-control')}
            </div>
      % endfor
      <span class="help-block">${_('Hooks can be used to trigger actions on certain events such as push / pull. They can trigger Python functions or external applications.')}</span>
      </div>
    </div>
</div>

% if c.visual.allow_custom_hooks_settings:
${h.form(url('admin_settings_hooks'), method='post')}
<div class="form">
    <div class="form-horizontal">
        <div class="form-group form-inline" id="${'id%s' % hook.ui_id }">
        <h4>${_('Custom Hooks')}</h4>
        %for hook in c.custom_hooks:
            <% input_id = hook.ui_key.replace('.', '_') %>
                <label class="control-label" for="${input_id}">${hook.ui_key}</label>
                <div style="margin-left:280px">
                    ${h.hidden('hook_ui_key',hook.ui_key,id='hook_ui_key_'+input_id)}
                    ${h.hidden('hook_ui_value',hook.ui_value,id='hook_ui_value_'+input_id)}
                    ${h.text('hook_ui_value_new',hook.ui_value,id=input_id,size=60,class_='form-control')}
                    <span class="btn btn-default btn-xs"
                        onclick="delete_hook(${hook.ui_id},'${'id%s' % hook.ui_id }')">
                        <i class="icon-minus-circled" style="color:#FF4444"></i>
                        ${_('Delete')}
                    </span>
                </div>
        %endfor
        </div>

        <div class="form-group form-inline">
            <label>
                ${h.text('new_hook_ui_key',size=15,class_='form-control')}
            </label>
            <div style="margin-left:280px">
                ${h.text('new_hook_ui_value',size=60,class_='form-control')}
            </div>
        </div>
        <div class="form-group">
            <div class="buttons" style="margin-left:280px">
                ${h.submit('save',_('Save'),class_="btn btn-default")}
            </div>
        </div>
    </div>
</div>
${h.end_form()}
% endif

<script type="text/javascript">
function delete_hook(hook_id, field_id) {
    var sUrl = ${h.js(h.url('admin_settings_hooks_delete'))};
    var success = function (o) {
            $('#' + field_id).remove();
        };
    var failure = function (o) {
            alert(${h.js(_('Failed to remove hook'))});
        };
    var postData = {'hook_id': hook_id};
    ajaxPOST(sUrl, postData, success, failure);
};
</script>