<table listing-table class="listing-ct projects-listing">
    <thead>
        <tr>
            <td colspan="4">
                <a class="pull-right" id="add-project" ng-click="createProject(settings.currentUser)">
                    <i translate class="pficon pficon-add-circle-o"></i>
                    <span translate>New Project</span>
                </a>
                <h3 translate>Projects</h3>
            </td>
        </tr>
        <tr>
            <th class="listing-ct-toggle"></th>
            <th translate>Name</th>
            <th translate>Description</th>
            <th translate>Members</th>
        </tr>
    </thead>
    <tbody ng-repeat-start="item in projects() track by item.metadata.name"  ng-init="sid = item.metadata.name" 
           data-id="{{ sid }}" ng-class="{ open: listing.expanded('/projects/' + sid) }">
        <tr ng-click="listing.activate('/projects/' + sid)" class="listing-ct-item">
            <td ng-click="listing.toggle('/projects/' + sid, $event)"
                class="listing-ct-toggle">
                <i class="fa fa-fw"></i>
            </td>
            <td>{{ item.metadata.name }}</td>
            <td>{{ item.metadata.annotations["openshift.io/description"] }}</td>
            <td></td>
        </tr>
        <tr class="listing-ct-panel" ng-if="listing.expanded('/projects/' + sid)" ng-init="id = sid">
            <td project-panel colspan="4"></td>
        </tr>
    </tbody>
    <tbody data-ng-rubbish="" ng-if="0" ng-repeat-end></tbody>
    <thead class="listing-ct-empty">
        <tr>
            <td colspan="4" ng-if="!failure" translate>No projects are present.</td>
            <td colspan="4" ng-if="failure">{{failure}}</td>
        </tr>
    </thead>
    <thead>
        <tr>
            <td colspan="4">
                <a class="pull-right" id="add-group" ng-click="createGroup()">
                    <i translate class="pficon pficon-add-circle-o"></i>
                    <span translate>New Group</span>
                </a>
                <h3 translate>Groups</h3>
            </td>
        </tr>
        <tr>
            <th class="listing-ct-toggle"></th>
            <th translate>Name</th>
            <th translate>Description</th>
            <th translate>Members</th>
        </tr>
    </thead>
    <tbody ng-repeat="item in groups() track by item.metadata.name"  ng-init="gid = item.metadata.name"  class="active"
        data-id="{{ gid }}" class="active" ng-class="{ open: listing.expanded('/groups/' + gid) }">
        <tr ng-click="listing.activate('/groups/' + gid)" class="listing-ct-item">
            <td ng-click="listing.toggle('/groups/' + gid, $event)"
                class="listing-ct-toggle">
                <i class="fa fa-fw"></i>
            </td>
	    <td>{{ item.metadata.name }}</td>
            <td></td>
            <td>{{ formatMembers(item.users, 'Users') }}</td>
        </tr>
        <tr class="listing-ct-panel" ng-if="listing.expanded('/groups/' + gid)" ng-init="id = gid">
            <td group-panel colspan="4"></td></tr>
    </tbody>
    <thead class="listing-ct-empty">
        <tr>
            <td colspan="4" ng-if="!failure" translate>No groups are present.</td>
            <td colspan="4" ng-if="failure">{{failure}}</td>
        </tr>
    </thead>
    <thead>
        <tr>
            <td colspan="4">
                <a class="pull-right" id="add-user" ng-click="createUser()">
                    <i translate class="pficon pficon-add-circle-o"></i>
                    <span translate>Add User</span>
                </a>
                <h3 translate>Users</h3>
            </td>
        </tr>
        <tr>
            <th class="listing-ct-toggle"></th>
            <th translate>Name</th>
            <th translate>Identity</th>
            <th translate>Member of</th>
        </tr>
    </thead>
    <tbody ng-repeat="item in users() track by item.metadata.name"  ng-init="sid = item.metadata.name" 
           data-id="{{ sid }}" ng-class="{ open: listing.expanded('/users/' + sid) }">
        <tr ng-click="listing.activate('/users/' + sid)" class="listing-ct-item">
            <td ng-click="listing.toggle('/users/' + sid, $event)"
                class="listing-ct-toggle">
                <i class="fa fa-fw"></i>
            </td>
            <td>{{ item.metadata.name }}</td>
            <td>{{ formatMembers(item.identities, 'Identities') }}</td>
            <td>{{ formatMembers(getMembershipOfUser(projects(),groups(),item.metadata.name), 'Groups') }}</td>
        </tr>
        <tr class="listing-ct-panel" ng-if="listing.expanded('/users/' + sid)" ng-init="id = sid">
            <td user-panel colspan="4"></td>
        </tr>
    </tbody>
    <thead class="listing-ct-empty">
        <tr>
            <td colspan="4" ng-if="!failure" translate>No users are present.</td>
            <td colspan="4" ng-if="failure">{{failure}}</td>
        </tr>
    </thead>
</table>
