<!--
  ~ Isomer Application Framework
  ~ ============================
  ~ Copyright (C) 2011 - 2018 riot <riot@c-base.org> and others.
  ~
  ~ This program is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU Affero General Public License as published by
  ~ the Free Software Foundation, either version 3 of the License, or
  ~ (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License
  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div class="container">
    <div class="well">
        <H1><span translate>List:</span> <a href="#!/list/{{$ctrl.schemaname}}">{{$ctrl.schemascreenname}}</a></H1>
        <a href="#!/editor/{{$ctrl.schemaname}}//create" translate>Create new</a>
        <div class="panel-group hidden" id="objectlistdetails" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="filterHeading">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                           aria-expanded="true" aria-controls="filterCollapse" translate>
                            Filters
                        </a>
                    </h4>
                </div>
                <div id="filterCollapse" class="panel-collapse collapse" role="tabpanel"
                     aria-labelledby="filterHeading">
                    <div class="panel-body">
                        Not yet :)
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="fieldsHeading">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                           aria-expanded="true" aria-controls="fieldsCollapse" translate>
                            Fields
                        </a>
                    </h4>
                </div>
                <div id="fieldsCollapse" class="panel-collapse collapse" role="tabpanel"
                     aria-labelledby="fieldsHeading">
                    <div class="panel-body">
                        <ul>
                            <li translate>No</li>
                            <li translate>Checkbox</li>
                            <li translate>Name</li>
                            <li translate>Controls</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="well" id="ObjectList">
            <div class="row">
                <div class="col-md-3">
                    <span ng-if="$ctrl.selected_objects.length > 0" translate>
                        With {{$ctrl.selected_objects.length}} selected, do:
                    </span>
                    <span ng-if="$ctrl.selected_objects.length === 0" translate>
                        Select multiple objects to:
                    </span>
                </div>
                <div class="btn-group" uib-dropdown is-open="dropdownOpen">
                    <a type="button" ng-click="$ctrl.del($ctrl.selected_objects)" class="btn btn-xs btn-danger" translate>Delete</a>
                    <button id="all-button" type="button" class="btn btn-primary btn-xs"
                            ng-click="$ctrl.update_select_permissions()" uib-dropdown-toggle>
                        <span translate>Change Permissions</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Write</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Revoke</a>
                                    <ul class="dropdown-menu">
                                        <li ng-repeat="role in $ctrl.selected_permissions.write">
                                            <a ng-click="$ctrl.remove_role($ctrl.selected_objects, 'write', role)"
                                               ng-class="{'disabled': role === 'admin' || role === 'owner'}">
                                                <span class="fa fa-times"></span> {{role}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu keepopen">
                                    <a class="dropdown-toggle keepopen" data-toggle="dropdown" translate>Add</a>
                                    <ul class="dropdown-menu keepopen">
                                        <li>
                                            <input type="text" ng-model="role_all_write" ng-click="$event.stopPropagation()">
                                        </li>
                                        <li>
                                            <a ng-click="$ctrl.add_role($ctrl.selected_objects, 'write', role_all_write)">
                                                <span class="fa fa-plus"></span> <span translate>Add</span> {{role_all_write}}
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                            </ul>
                        </li>
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Read</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Revoke</a>
                                    <ul class="dropdown-menu">
                                        <li ng-repeat="role in $ctrl.selected_permissions.read">
                                            <a ng-click="$ctrl.remove_role($ctrl.selected_objects, 'read', role)"
                                               ng-class="{'disabled': role === 'admin' || role === 'owner'}">
                                                <span class="fa fa-times"></span> {{role}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu keepopen">
                                    <a class="dropdown-toggle keepopen" data-toggle="dropdown" translate>Add</a>
                                    <ul class="dropdown-menu keepopen">
                                        <li>
                                            <input type="text" ng-model="role_all_read" ng-click="$event.stopPropagation()">
                                        </li>
                                        <li>
                                            <a ng-click="$ctrl.add_role($ctrl.selected_objects, 'read', role_all_read)">
                                                <span class="fa fa-plus"></span><span translate>Add</span> {{role_all_read}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>List</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Revoke</a>
                                    <ul class="dropdown-menu">
                                        <li ng-repeat="role in $ctrl.selected_permissions.list">
                                            <a ng-click="$ctrl.remove_role($ctrl.selected_objects, 'list', role)"
                                               ng-class="{'disabled': role === 'admin' || role === 'owner'}">
                                                <span class="fa fa-times"></span> {{role}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu keepopen">
                                    <a class="dropdown-toggle keepopen" data-toggle="dropdown" translate>Add</a>
                                    <ul class="dropdown-menu keepopen">
                                        <li>
                                            <input type="text" ng-model="role_all_list" ng-click="$event.stopPropagation()">
                                        </li>
                                        <li>
                                            <a ng-click="$ctrl.add_role($ctrl.selected_objects, 'list', role_all_list)">
                                                <span class="fa fa-plus"></span><span translate>Add</span> {{role_all_list}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <table class="table table-striped">
                <tr>
                    <th>#</th>
                    <th><span class="fa fa-check" ng-click="$ctrl.select_all()"></span></th>
                    <th translate>Name</th>
                    <th translate>Actions</th>
                </tr>
                <tr ng-repeat="(uuid, item) in $ctrl.objectlistdata">
                    <td>{{$index+1}}</td>
                    <td><input type="checkbox" ng-model="$ctrl.objectlisttoggles[item.uuid]"
                               ng-change="$ctrl.select_objects()"/></td>
                    <td><a href="#!/editor/{{$ctrl.schemaname}}/{{item.uuid}}/edit">{{item.name}}</a></td>
                    <td>
                        <a type="button" href="#!/editor/{{$ctrl.schemaname}}/{{item.uuid}}/edit"
                           class="btn btn-xs btn-success" translate>Edit</a>
                        <a type="button" href="#!/editor/{{$ctrl.schemaname}}/{{item.uuid}}/view"
                           class="btn btn-xs btn-default" translate>View</a>
                        <a type="button" ng-click="$ctrl.del(item.uuid)" class="btn btn-xs btn-danger" translate>Delete</a>
                        <div class="btn-group" uib-dropdown is-open="dropdownOpen">
                            <button id="single-button" type="button" class="btn btn-primary btn-xs" uib-dropdown-toggle>
                                <span translate>Permissions</span> <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Write</a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item dropdown dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Revoke</a>
                                            <ul class="dropdown-menu">
                                                <li ng-repeat="role in item.perms.write">
                                                    <a ng-click="$ctrl.remove_role(item.uuid, 'write', role)"
                                                       ng-class="{'disabled': role === 'admin' || role === 'owner'}">
                                                        <span class="fa fa-times"></span> {{role}}
                                                    </a>
                                                </li>
                                            </ul>

                                        </li>
                                        <li class="menu-item dropdown dropdown-submenu keepopen">
                                            <a class="dropdown-toggle keepopen" data-toggle="dropdown" translate>Add</a>
                                            <ul class="dropdown-menu keepopen">
                                                <li>
                                                    <input type="text" ng-model="role"
                                                           ng-click="$event.stopPropagation()">
                                                </li>
                                                <li>
                                                    <a ng-click="$ctrl.add_role(item.uuid, 'write', role)">
                                                        <span class="fa fa-plus"></span><span translate>Add</span> {{role}}
                                                    </a>
                                                </li>
                                            </ul>

                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Read</a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item dropdown dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Revoke</a>
                                            <ul class="dropdown-menu">
                                                <li ng-repeat="role in item.perms.read">
                                                    <a ng-click="$ctrl.remove_role(item.uuid, 'read', role)"
                                                       ng-class="{'disabled': role === 'admin' || role === 'owner'}">
                                                        <span class="fa fa-times"></span> {{role}}
                                                    </a>
                                                </li>
                                            </ul>

                                        </li>
                                        <li class="menu-item dropdown dropdown-submenu keepopen">
                                            <a class="dropdown-toggle keepopen" data-toggle="dropdown" translate>Add</a>
                                            <ul class="dropdown-menu keepopen">
                                                <li>
                                                    <input type="text" ng-model="role"
                                                           ng-click="$event.stopPropagation()">
                                                </li>
                                                <li>
                                                    <a ng-click="$ctrl.add_role(item.uuid, 'read', role)">
                                                        <span class="fa fa-plus"></span><span translate>Add</span> {{role}}
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>List</a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item dropdown dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" translate>Revoke</a>
                                            <ul class="dropdown-menu">
                                                <li ng-repeat="role in item.perms.list">
                                                    <a ng-click="$ctrl.remove_role(item.uuid, 'list', role)"
                                                       ng-class="{'disabled': role === 'admin' || role === 'owner'}">
                                                        <span class="fa fa-times"></span> {{role}}
                                                    </a>
                                                </li>
                                            </ul>

                                        </li>
                                        <li class="menu-item dropdown dropdown-submenu keepopen">
                                            <a class="dropdown-toggle keepopen" data-toggle="dropdown" translate>Add</a>
                                            <ul class="dropdown-menu keepopen">
                                                <li>
                                                    <input type="text" ng-model="role"
                                                           ng-click="$event.stopPropagation()">
                                                </li>
                                                <li>
                                                    <a ng-click="$ctrl.add_role(item.uuid, 'list', role)">
                                                        <span class="fa fa-plus"></span><span translate>Add</span> {{role}}
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <!--
                    <tr ng-repeat="(key, item) in $ctrl.objectlistdata | orderBy:'-key':true">
                        <td>{{key+1}}</td>
                        <td><input type="checkbox" value=""/></td>
                        <td><a href="#!/obj/{{$ctrl.schemaname}}/{{item.uuid}}/edit">{{item.name}}</a></td>
                        <td>
                            <a type="button" href="#!/obj/{{$ctrl.schemaname}}/{{item.uuid}}/edit"
                               class="btn btn-xs btn-success">Edit</a>
                            <a type="button" ng-click="delete(item.uuid)" class="btn btn-xs btn-danger">Delete</a>
                        </td>
                    </tr> -->
            </table>
        </div>

        <div class="debug">
            {{$ctrl.schemadata}}
            Schema: {{$ctrl.schemaname}}
            <br>
            <ol class="breadcrumb">
                <li ng-repeat="schema in $ctrl.schemadata">{{schema}}</li>
            </ol>
            <a role="button" ng-click="$ctrl.reveal()">Reveal</a>
            {{$ctrl.objectlistdata}}
        </div>
    </div>
</div>
