<table id="groups_list">

                  <thead>

                      <tr>

                          <th class="left"><a href="#">${_('Group name')}</a></th>

                          <th class="left"><a href="#">${_('Description')}</a></th>

                          ##<th class="left"><a href="#">${_('Number of repositories')}</a></th>

                      </tr>

                  </thead>

                  ## REPO GROUPS

                  % for gr in c.groups:

                    <tr>

                        <td>

                            <div style="white-space: nowrap">

                            <img class="icon" alt="${_('Repositories group')}" src="${h.url('/images/icons/database_link.png')}"/>

                            ${h.link_to(gr.name,url('repos_group_home',group_name=gr.group_name))}

                            </div>

                        </td>

                        <td>${gr.group_description}</td>

                        ## this is commented out since for multi nested repos can be HEAVY!

                        ## in number of executed queries during traversing uncomment at will

                        ##<td><b>${gr.repositories_recursive_count}</b></td>

                    </tr>

                  % endfor

              </table>

            </div>

            <div style="height: 20px"></div>

            % endif

            <div id="welcome" style="display:none;text-align:center">

                <h1><a href="${h.url('home')}">${c.rhodecode_name} ${c.rhodecode_version}</a></h1>

            </div>

            <div id='repos_list_wrap' class="yui-skin-sam">

            <%cnt=0%>

            <%namespace name="dt" file="/_data_table/_dt_elements.html"/>

            <table id="repos_list">

            <thead>

                <tr>

                    <th class="left"></th>

                    <th class="left">${_('Name')}</th>

                    <th class="left">${_('Description')}</th>

                    <th class="left">${_('Last change')}</th>

                    <th class="left">${_('Tip')}</th>

                    <th class="left">${_('Owner')}</th>

                    <th class="left">${_('RSS')}</th>

                    <th class="left">${_('Atom')}</th>

                </tr>

            </thead>

            <tbody>

            %for cnt,repo in enumerate(c.repos_list):

                <tr class="parity${(cnt+1)%2}">

                    ##QUICK MENU

                    <td class="quick_repo_menu">

                      ${dt.quick_menu(repo['name'])}

                    </td>

                    ##REPO NAME AND ICONS

                    <td class="reponame">

                      ${dt.repo_name(repo['name'],repo['dbrepo']['repo_type'],repo['dbrepo']['private'],repo['dbrepo_fork'].get('repo_name'))}

                    </td>

                    ##DESCRIPTION

                    <td><span class="tooltip" title="${h.tooltip(repo['description'])}">

                       ${h.truncate(repo['description'],60)}</span>

                    </td>

                    ##LAST CHANGE DATE

                    <td>

                      <span class="tooltip" title="${repo['last_change']}">${h.age(repo['last_change'])}</span>

                    </td>

                    ##LAST REVISION

                    <td>

                        ${dt.revision(repo['name'],repo['rev'],repo['tip'],repo['author'],repo['last_msg'])}

                    </td>

                    ##

                    <td title="${repo['contact']}">${h.person(repo['contact'])}</td>

                    <td>

                      %if c.rhodecode_user.username != 'default':

                        <a title="${_('Subscribe to %s rss feed')%repo['name']}" class="rss_icon"  href="${h.url('rss_feed_home',repo_name=repo['name'],api_key=c.rhodecode_user.api_key)}"></a>

                      %else:

                        <a title="${_('Subscribe to %s rss feed')%repo['name']}" class="rss_icon"  href="${h.url('rss_feed_home',repo_name=repo['name'])}"></a>

                      %endif:

                    </td>

                    <td>

                      %if c.rhodecode_user.username != 'default':

                        <a title="${_('Subscribe to %s atom feed')%repo['name']}"  class="atom_icon" href="${h.url('atom_feed_home',repo_name=repo['name'],api_key=c.rhodecode_user.api_key)}"></a>

                      %else:

                        <a title="${_('Subscribe to %s atom feed')%repo['name']}"  class="atom_icon" href="${h.url('atom_feed_home',repo_name=repo['name'])}"></a>

                      %endif:

                    </td>

                </tr>

            %endfor

            </tbody>

            </table>

            </div>

        </div>

    </div>

    <script>

      var func = function(node){

          return node.parentNode.parentNode.parentNode.parentNode;

      }

      // groups table sorting

      var myColumnDefs = [

          {key:"name",label:"${_('Group Name')}",sortable:true,

              sortOptions: { sortFunction: groupNameSort }},

          {key:"desc",label:"${_('Description')}",sortable:true},

      ];

      var myDataSource = new YAHOO.util.DataSource(YUD.get("groups_list"));

      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;

      myDataSource.responseSchema = {

          fields: [

              {key:"name"},

              {key:"desc"},

          ]

      };

      var myDataTable = new YAHOO.widget.DataTable("groups_list_wrap", myColumnDefs, myDataSource,

              {

               sortedBy:{key:"name",dir:"asc"},

               MSG_SORTASC:"${_('Click to sort ascending')}",

               MSG_SORTDESC:"${_('Click to sort descending')}"

              }

      );

      // main table sorting

      var myColumnDefs = [

          {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"},

          {key:"name",label:"${_('Name')}",sortable:true,

              sortOptions: { sortFunction: nameSort }},

          {key:"desc",label:"${_('Description')}",sortable:true},

          {key:"last_change",label:"${_('Last Change')}",sortable:true,

              sortOptions: { sortFunction: ageSort }},

          {key:"tip",label:"${_('Tip')}",sortable:true,

        	  sortOptions: { sortFunction: revisionSort }},

          {key:"owner",label:"${_('Owner')}",sortable:true},

          {key:"rss",label:"",sortable:false},

          {key:"atom",label:"",sortable:false},

      ];

      var myDataSource = new YAHOO.util.DataSource(YUD.get("repos_list"));

      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;

      myDataSource.responseSchema = {

          fields: [

              {key:"menu"},

              {key:"name"},

              {key:"desc"},

              {key:"last_change"},

              {key:"tip"},

              {key:"owner"},

              {key:"rss"},

              {key:"atom"},

          ]

      };

      var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,

              {

               sortedBy:{key:"name",dir:"asc"},

               MSG_SORTASC:"${_('Click to sort ascending')}",

               MSG_SORTDESC:"${_('Click to sort descending')}",

               MSG_EMPTY:"${_('No records found.')}",

               MSG_ERROR:"${_('Data error.')}",

               MSG_LOADING:"${_('Loading...')}",

              }

      );

      myDataTable.subscribe('postRenderEvent',function(oArgs) {

          tooltip_activate();

          quick_repo_menu();

          q_filter('q_filter',YUQ('div.table tr td a.repo_name'),func);

      });

    </script>