<div class="content-filter">
    <filter-project></filter-project>
    <div class="btn-group bootstrap-select type-filter" dropdown>
        <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
            <span class="pull-left">
                <span ng-if="showAll" translate>All Types</span>
                <span ng-if="name"><span class="namespace-meta" translate>Type:</span> {{ name }}</span>
            </span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li ng-class="{ checked: !type }">
                <a ng-click="navigate()" value="">All Types</a>
            </li>
            <li ng-repeat="(k, v) in names"
                ng-class="{ checked: type == k }"
                ng-if="!v.flavor || v.flavor == settings.flavor">
                <a ng-click="navigate(k)">{{ v.name }}</a>
            </li>
        </ul>
    </div>
</div>

<div>
    <table listing-table class="listing-ct details-listing">
        <thead id="services" ng-if="showAll || services">
            <tr>
                <td colspan="5">
                    <h3 translate>Services</h3>
                </td>
            </tr>
            <tr>
                <th></th>
                <th translate>Name</th>
                <th translate ng-if="settings.flavor == 'openshift'">Project</th>
                <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
                <th translate>Addresses</th>
                <th translate>State</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in services | orderObjectBy:['metadata.namespace', 'metadata.name'] as filtered_result track by itemIdentifier(item)" ng-init="id = itemIdentifier(item)"
            data-id="{{id}}" ng-class="{open: listing.expanded(id)}">
            <tr ng-click="listing.activate(id)" class="listing-ct-item">
                <td ng-click="listing.toggle(id, $event)"
                    class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>{{item.metadata.name}}</th>
                <td>{{item.metadata.namespace}}</td>
                <td><kubernetes-service-cluster></td>
                <td>
                    <span ng-if="serviceEndpoint(item).subsets.length !== 0" translate>Ready</span>
                    <span ng-if="serviceEndpoint(item).subsets.length === 0" translate>Not Ready</span>
                </td>
            </tr>
            <tr class="listing-ct-panel" ng-if="listing.expanded(id)">
                <td listing-panel kind="Service" colspan="5">
                </td>
            </tr>
        </tbody>

        <thead id="routes" ng-if="(showAll || routes) && settings.flavor == 'openshift'">
            <tr>
                <td colspan="5">
                    <h3 translate>Routes</h3>
                </td>
            </tr>
            <tr>
                <th></th>
                <th translate>Name</th>
                <th translate ng-if="settings.flavor == 'openshift'">Project</th>
                <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
                <th translate>Host</th>
                <th translate></th>
            </tr>
        </thead>
        <tbody ng-repeat="item in routes | orderObjectBy:['metadata.namespace', 'metadata.name']  as filtered_result track by itemIdentifier(item)"
            ng-init="id = itemIdentifier(item)" data-id="{{id}}"
            ng-class="{open: listing.expanded(id)}">
            <tr ng-click="listing.activate(id)" class="listing-ct-item">
                <td ng-click="listing.toggle(id, $event)"
                    class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>{{item.metadata.name}}</th>
                <td>{{item.metadata.namespace}}</td>
                <td>{{item.spec.host}}</td>
                <td></td>
            </tr>
            <tr class="listing-ct-panel" ng-if="listing.expanded(id)">
                <td listing-panel kind="Route" colspan="5"></td>
            </tr>
        </tbody>

        <thead id="deployment-configs" ng-if="(showAll || deploymentconfigs) && settings.flavor == 'openshift'">
            <tr>
                <td colspan="5">
                    <h3 translate>Deployment Configs</h3>
                </td>
            </tr>
            <tr>
                <th></th>
                <th translate>Name</th>
                <th translate ng-if="settings.flavor == 'openshift'">Project</th>
                <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
                <th translate></th>
                <th translate>Latest Version</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in deploymentconfigs | orderObjectBy:['metadata.namespace', 'metadata.name'] as filtered_result track by itemIdentifier(item)"
            ng-init="id = itemIdentifier(item)" data-id="{{id}}"
            ng-class="{open: listing.expanded(id)}">
            <tr ng-click="listing.activate(id)" class="listing-ct-item">
                <td ng-click="listing.toggle(id, $event)"
                    class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>{{item.metadata.name}}</th>
                <td>{{item.metadata.namespace}}</td>
                <td></td>
                <td ng-if="item.status.latestVersion">{{ item.status.latestVersion }}</td>
                <td ng-if="!item.status.latestVersion" translate>Not deployed</td>
            </tr>
            <tr class="listing-ct-panel" ng-if="listing.expanded(id)">
                <td listing-panel kind="DeploymentConfig" colspan="5"></td>
            </tr>
        </tbody>

        <thead id="replication-controllers" ng-if="showAll || replicationcontrollers">
            <tr>
                <td colspan="5">
                    <h3 translate>Replication Controllers</h3>
                </td>
            </tr>
            <tr>
                <th></th>
                <th translate>Name</th>
                <th translate ng-if="settings.flavor == 'openshift'">Project</th>
                <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
                <th translate></th>
                <th translate>Replicas</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in replicationcontrollers | orderObjectBy:['metadata.namespace', 'metadata.name'] as filtered_result track by itemIdentifier(item)"
            ng-init="id = itemIdentifier(item)" data-id="{{id}}"
            ng-class="{open: listing.expanded(id)}">
            <tr ng-click="listing.activate(id)" class="listing-ct-item">
                <td ng-click="listing.toggle(id, $event)"
                    class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>{{item.metadata.name}}</th>
                <td>{{item.metadata.namespace}}</td>
                <td></td>
                <td ng-if="item.spec.replicas == item.status.replicas">{{ item.spec.replicas }}</td>
                <td ng-if="item.spec.replicas != item.status.replicas">{{ item.status.replicas }} of {{ item.spec.replicas }}</td>
            </tr>
            <tr class="listing-ct-panel" ng-if="listing.expanded(id)">
                <td listing-panel kind="ReplicationController" colspan="5"></td>
            </tr>
        </tbody>

        <thead id="pods" ng-if="showAll || pods">
            <tr>
                <td colspan="5">
                    <h3 translate>Pods</h3>
                </td>
            </tr>
            <tr>
                <th></th>
                <th translate>Name</th>
                <th translate ng-if="settings.flavor == 'openshift'">Project</th>
                <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
                <th translate>Address</th>
                <th translate>State</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in pods | orderObjectBy:['metadata.namespace', 'metadata.name'] as filtered_result track by itemIdentifier(item)"
            ng-init="id = itemIdentifier(item)" data-id="{{id}}"
            ng-class="{open: listing.expanded(id)}">
            <tr ng-click="listing.activate(id)" class="listing-ct-item">
                <td ng-click="listing.toggle(id, $event)"
                    class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>{{item.metadata.name}}</th>
                <td>{{item.metadata.namespace}}</td>
                <td>{{item.status.podIP}}</td>
                <td>{{ podStatus(item) }}</td>
            </tr>
            <tr class="listing-ct-panel" ng-if="listing.expanded(id)">
                <td listing-panel kind="Pod" colspan="5"></td>
            </tr>
        </tbody>
    </table>
</div>
