<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div class="page-header">
    <button class="btn btn-primary btn-sm" ng-if="userService.hasRole('ROLE_ADMIN')" ng-click="toCreateProj()"><i class="fa fa-plus"></i> Project</button>
</div>

<div ng-if="!loading && projects.length == 0">
    <div no-result text="No Project."></div>
</div>
<loading ng-if="loading" text="Loading Projects..."></loading>

<div ng-if="projects.length > 0" class="dataTables_wrapper form-inline no-footer">
    <div class="row">
        <div class="col-xs-12"><label class="table-header-text">Projects</label></div>
    </div>
    <table class="table table-striped table-bordered table-hover dataTable no-footer">
        <thead>
            <tr style="cursor: pointer">
                <th ng-repeat="theaditem in projectConfig.theaditems"
                    ng-click="state.filterAttr= theaditem.attr;state.reverseColumn=theaditem.attr;state.filterReverse=!state.filterReverse;">
                    {{theaditem.name}}
                    <i ng-if="state.reverseColumn!= theaditem.attr"
                       class="fa fa-unsorted"></i>
                    <i ng-if="state.reverseColumn== theaditem.attr && !state.filterReverse"
                       class="fa fa-sort-desc"></i>
                    <i ng-if="state.reverseColumn== theaditem.attr && state.filterReverse"
                       class="fa fa-sort-asc"></i>
                </th>
                <th>Actions</th>
            </tr>
        </thead>

        <tbody ng-repeat="project in projects | orderObjectBy:state.filterAttr:state.filterReverse">
            <tr ng-class="{accordion:true}" style="cursor: pointer">
                <td  ng-click="project.showDetail=!project.showDetail;">
                    <i ng-show="!project.showDetail" class="fa fa-chevron-circle-right blue"></i>
                    <i ng-show="project.showDetail" class="fa fa-chevron-circle-down blue"></i>
                    {{ project.name}}
                </td>
                <td>{{ project.owner}}</td>
                <td>{{ project.description}}</td>
                <td>{{ project.create_time_utc | utcToConfigTimeZone}}</td>
                <td>
                    <button class="btn btn-xs btn-info" ng-click="toEdit(project)" tooltip="Edit"
                            ng-disabled="!(userService.hasRole('ROLE_ADMIN') || hasPermission('project',project, permissions.ADMINISTRATION.mask))">
                        <i class="fa fa-pencil"></i></button>
                    <button class="btn btn-xs btn-danger" ng-click="delete(project)" tooltip="Delete"
                            ng-disabled="!userService.hasRole('ROLE_ADMIN')"
                            ><i class="fa fa-trash-o"></i></button>
                </td>
            </tr>
        <tr ng-show="project.showDetail">
            <td colspan="9" style="padding: 10px 30px 10px 30px;">
                <div ng-include src="'partials/projects/project_detail.html'"
                     ng-init="project.visiblePage='cubes'"></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="row">
    <div class="col-xs-12">
        <kylin-pagination data="projects" load-func="list"/>
    </div>
</div>

<div ng-include="'partials/projects/project_create.html'"></div>
