{% load static %}
{% load i18n %}
{% load template_tags %}
<div id="related-resources-drag-panel" style="height: calc(100vh - 102px);" class="related-resources-container">


    <!-- Target -->
    <!--ko if: openEditor() === false -->
    <div id="rr-manager-content-id" class="rr-drag-panel-target">

        <div id="rr-splash" class="rr-splash">

            <!-- Image -->
            <div class="img-lg img-circle rr-splash-img-container">
                <i class="fa fa-lock"></i>
            </div>

            <!-- Splash Title -->
            <div class="rr-splash-title">
                <span data-bind="text: $root.translations.resourceInstancePermissions"></span>
            </div>


            <button class="btn btn-shim btn-rr btn-labeled btn-lg fa fa-link" data-bind="click: function(){setInstancePermissions()}">
                <span data-bind="text: $root.translations.configureAccessToThisInstance"></span>
            </button>

            <!-- Splash Instructions -->
            <div class="rr-splash-description">
                <span data-bind="text: $root.translations.defineInstanceAccessPrivileges"></span>
            </div>

            <!-- Help Hyperlink -->
        </div>
    </div>
    <!--/ko-->
    <!--ko if: openEditor() -->
        <div class="permission-grid">
            <div class="permission-header">
                <h4>
                    <span data-bind="text: $root.translations.setPermissionsForThisInstance"></span>
                </h4>
                <h5>
                    <span data-bind="text: $root.translations.setInstancePermissionsText"></span>
                </h5>
            </div>
            <div class="permission-control">
                <div class="list-filter">
                    <input type="text" class="form-control" style="width: 250px;" placeholder="filter table" data-bind="textInput: filter">
                    <div class="clear-node-search" data-bind="visible: filter().length > 0, click: function() { filter(''); }"><i class="fa fa-times-circle"></i></div>
                </div>
            </div>
            <div class="permission-list">
            <div class="applied-permissions">
            <div style="padding: 5px 0px">
                <input data-bind="checked: showPeople" type="checkbox" /> 
                <span data-bind="text: $root.translations.showPersonGroup"></span>
            </div>
            <div></div>
            <!--ko if: filteredPermissions()  -->
            <div class="permission-list-table">
                <div class="permissions-list-header">
                    <div class="identities-column">
                        <span data-bind="visible: showPeople"><span data-bind="text: $root.translations.person"></span> / </span><span data-bind="text: $root.translations.group"></span>
                    </div>
                    <div class="permissions-column">
                        <span data-bind="text: $root.translations.permissions"></span>
                    </div>
                </div>
                <div class="permissions-list-table-body">
                     <!--ko foreach: filteredPermissions() -->
                        <!--ko if: $data.creatorOrSuperUser && $parent.showPeople() -->
                        <div class="permissions-table-row" data-bind="css: {disabled: $data.creatorOrSuperUser}">
                            <div style="display: inline-flex">
                                <div class="identities-column"><i style="color: #579ddb; padding: 0 5px" class="fa" data-bind="class: function(){return $data['type']==='user' ? 'fa-user' : 'fa-users'}()"></i><span data-bind="text: $data['name']"></span></div>
                                <div class="permissions-column" data-bind="text: [$parent.permissionLabelLookup.view_resourceinstance,$parent.permissionLabelLookup.change_resourceinstance,$parent.permissionLabelLookup.delete_resourceinstance].join(', ')"></div>
                            </div>
                        </div>
                         <!--/ko-->
                     <!--/ko-->
                    <!--ko foreach: filteredPermissions() -->
                    <!--ko if: !$data.creatorOrSuperUser && (($data.type=="user" && $parent.showPeople()) || ($data.type != "user")) -->
                    <div class="permissions-table-row" data-bind = "css: {disabled: $data.disabled(), selected: $data.selected()}">
                        <div data-bind="click: function(){if(!$data.disabled()){$data.selected(!$data.selected())}}" style="display: inline-flex">
                            <div class="identities-column"><i style="color: #579ddb; padding: 0 5px" class="fa" data-bind="class: function(){return $data['type']==='user' ? 'fa-user' : 'fa-users'}()"></i><span data-bind="text: $data['name']"></span></div>
                            <div class="permissions-column"><span data-bind="text: $data.availablePermissions.filter(function(a){return !!a.selected()}).map(function(p){return $parent.permissionLabelLookup[p.codename]}).join(', ')"></span> <span data-bind="visible:$data.disabled()">(<span data-bind="text:$root.translations.disabledByDefaultPermissions"></span>)</span></div>
                        </div>
                        <!--ko if: selected-->
                        <div class="permission-selection-panel">
                            <div class="identities-column"></div>
                            <!--ko if: $parent.instancePermissions()  -->
                            <div class="permissions-column">
                                <div class="permissions-options">
                                    <!--ko foreach: $data.availablePermissions -->
                                    <div>
                                    <label class="form-checkbox form-normal form-primary permission-option active" data-bind="css: {
                                            'active': $data.selected
                                        }, click: $data.selected.bind($data, !$data.selected())">
                                        <input type="checkbox" data-bind="checked: $data.selected">
                                        <i data-bind="css: $data.icon"></i> <span data-bind="text: $data.name.replace(' resource', '')"></span>
                                    </label>
                                    </div>
                                    <!--/ko-->
                                </div>
                            </div>
                            <!--/ko-->
                        </div>
                        <!--/ko-->
                    </div>
                    <!--/ko-->
                    <!--/ko-->
                </div>
            </div>
            <!--/ko-->
            </div>
            </div>
            <div class="permissions-buttons mar-btm">
                <button id="cc-delete-btn" class="btn btn-shim btn-danger btn-labeled btn-lg fa fa-times mar-rgt" data-bind="click: function(){revertPermissions()}, css: {'disabled': !dirty()}">
                    <span data-bind="text: $root.translations.cancel"></span>
                </button>
                <button id="cc-save-btn" class="btn btn-shim btn-primary btn-labeled btn-lg fa fa-check" data-bind="click: function(){updatePermissions()}, css: {'disabled': !dirty()}">
                    <span data-bind="text: $root.translations.apply"></span>
                </button>
            </div>
            <div class="remove-permissions-btn mar-btm" style="align-self: end">
        </div>
        </div>


    <!--/ko-->
</div>
