<%inherit file="/base/base.mako"/>

<%def name="title()">
    ${_('Add repository group')}
    %if c.rhodecode_name:
        &middot; ${h.branding(c.rhodecode_name)}
    %endif
</%def>

<%def name="breadcrumbs_links()">
    ${h.link_to(_('Admin'),h.route_path('admin_home'))}
    &raquo;
    ${h.link_to(_('Repository groups'),h.route_path('repo_groups'))}
    &raquo;
    ${_('Add Repository Group')}
</%def>

<%def name="menu_bar_nav()">
    ${self.menu_items(active='admin')}
</%def>

<%def name="menu_bar_subnav()">
    ${self.admin_menu(active='repository_groups')}
</%def>

<%def name="main()">

<div class="box">
    ${h.secure_form(h.route_path('repo_group_create'), request=request)}
    <div class="form">
        <!-- fields -->
        <div class="fields">
             <div class="field">
                <div class="label">
                    <label for="group_name">${_('Group name')}:</label>
                </div>
                <div class="input">
                    <div class="full-repo-name-container">
                        % if c.personal_repo_group:
                        <a class="btn" href="#" id="select_my_group" data-personal-group-id="${c.personal_repo_group.group_id}">
                            <i class="icon-repo-group tooltip"
                               title="${_('Select my personal group ({})').format(c.personal_repo_group.group_name)}"></i>
                        </a>
                        % endif
                        ${h.select('group_parent_id', request.GET.get('parent_group'), c.repo_groups,class_="medium")}
                        <div class="repo-create-spacer"> / </div>
                        <div class="repo-name-input-container">
                            ${h.text('group_name', class_="medium")}
                            <div class="repo-check-container check-progress" id="group_check" style="display: none"></div>
                        </div>
                    </div>
                    <div class="repo-header-row">
                        <span class="help-block-repo-create">
                            ${_('Parent Repository Group / Repository Group Name')}.
                        </span>
                    </div>

                    ## COPY PERMS
                    <div id="copy_perms">
                        <div id="checkbox-span">
                                ${h.checkbox('group_copy_permissions', value="True", checked="checked")}
                        </div>

                        <div class="help-block-inline">
                                ${_('Copy permissions from parent repository group.')}
                        </div>
                    </div>

                </div>
             </div>

            <div class="field">
                <div class="label">
                    <label for="group_description">${_('Description')}:</label>
                </div>
                <div class="textarea editor">
                    ${h.textarea('group_description',cols=23,rows=5,class_="medium")}
                    <% metatags_url = h.literal('''<a href="#metatagsShow" onclick="$('#meta-tags-desc').toggle();return false">meta-tags</a>''') %>
                    <span class="help-block">
                        % if c.visual.stylify_metatags:
                            ${_('Plain text format with {metatags} support.').format(metatags=metatags_url)|n}
                        % else:
                            ${_('Plain text format.')}
                        % endif
                    </span>
                    <span id="meta-tags-desc" style="display: none">
                        <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
                        ${dt.metatags_help()}
                    </span>
                </div>
            </div>

            <div class="buttons">
              ${h.submit('save',_('Create Repository Group'),class_="btn")}
            </div>
        </div>
    </div>
    ${h.end_form()}
</div>
<script>
    $(document).ready(function () {
        let setCopyPermsOption = function (group_val) {
            if (group_val !== "-1") {
                $('#copy_perms').show()
            } else {
                $('#copy_perms').hide();
            }
        };

        $("#group_parent_id").select2({
            'containerCssClass': "drop-menu",
            'dropdownCssClass': "drop-menu-dropdown",
            'dropdownAutoWidth': true
        });

        setCopyPermsOption($('#group_parent_id').val());

        $("#group_parent_id").on("change", function (e) {
            setCopyPermsOption(e.val);
            $('#group_name').trigger('input');
        });

        $('#group_name').focus();

        $('#select_my_group').on('click', function (e) {
            e.preventDefault();
            $("#group_parent_id").val($(this).data('personalGroupId')).trigger("change");
        });

        let debounceTimer;

        $('#group_name').on('input paste', function () {
            let groupName = $(this).val();

            if (groupName.length > 0) {
                $('#group_check').text(_gettext('checking availability...'))
                        .show()
                        .removeClass('check-error check-success')
                        .addClass('check-progress');
            } else {
                $('#group_check').hide();
                clearTimeout(debounceTimer);
                return;
            }

            clearTimeout(debounceTimer); // Cancel the previous timer
            debounceTimer = setTimeout(function () {
                performRepoGroupLookup(groupName);
            }, 200);

            function performRepoGroupLookup(groupName) {
                self = this;
                let repoGroup = $('#group_parent_id').val();

                $.ajax({
                    url: pyroutes.url('repo_group_name_check'),
                    data: {"repo_group_name": groupName, "repo_group": repoGroup},
                    dataType: 'json',
                    type: 'POST',
                    success: function (data) {
                        let result = data.result;
                        if (result.check_error === true) {
                            $('#group_check')
                                    .text(result.errors)
                                    .removeClass('check-progress check-success')
                                    .addClass('check-error');
                        } else {
                            let text = "Repository group `{0}` is available".format(result.repo_group_name);
                            $('#group_check')
                                    .text(text)
                                    .removeClass('check-progress check-error')
                                    .addClass('check-success');
                        }

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        var prefix = "Error while checking name.\n"
                        var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                        alert(message)
                    }
                })
            }

        });
    })
</script>
</%def>
