{{!
  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.

  WSO2 Inc. 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.
}}
{{unit "cdmf.unit.ui.title" pageTitle="Policy Management"}}
{{unit "cdmf.unit.data-tables-extended"}}
{{unit "cdmf.unit.ui.modal"}}

{{#zone "topCss"}}
    <style>
        .thumbnail.icon:before {
            padding-top: 0;
        }
    </style>
{{/zone}}

{{#zone "breadcrumbs"}}
    <li>
        <a href="{{@app.context}}/">
            <i class="icon fw fw-home"></i>
        </a>
    </li>
    <li>
        <!--suppress HtmlUnknownTarget -->
        <a href="{{@app.context}}/policies">
            Policies
        </a>
    </li>
{{/zone}}

{{#zone "navbarActions"}}
    {{#if permissions.ADD_ADMIN_POLICY}}
        {{#equal noPolicy false}}
            <li>
                <!--suppress HtmlUnknownTarget -->
                <a href="{{@app.context}}/policy/add" class="cu-btn">
                    <span class="icon fw-stack">
                        <i class="fw fw-add fw-stack-1x"></i>
                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                    </span>
                    Add New Policy
                </a>
            </li>
        {{/equal}}
    {{/if}}
    {{#if permissions.CHANGE_POLICY_PRIORITY}}
        {{#equal noPolicy false}}
            <li>
                <!--suppress HtmlUnknownTarget -->
                <a href="{{@app.context}}/policy/priority" class="cu-btn">
                    <span class="icon fw-stack">
                        <i class="fw fw-throttling-policy fw-stack-1x"></i>
                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                    </span>
                    Policy Priority
                </a>
            </li>
        {{/equal}}
    {{/if}}
    <li>
        <a href="#" class="cu-btn" id="appbar-btn-apply-changes">
            <span class="icon fw-stack">
                <i class="fw fw-check fw-stack-1x"></i>
                <i class="fw fw-circle-outline fw-stack-2x"></i>
            </span>
            Apply Changes To Devices
        </a>
    </li>
{{/zone}}

{{#zone "content"}}
    {{#equal isUpdated true}}
        <input type="hidden" id="is-updated" value="UPDATED">
    {{/equal}}
    {{#equal noPolicy true}}
        <div id="ast-container" class="ast-container list-view">
            <div class="ctrl-info-panel col-centered text-center wr-login">
                <h3 class="text-muted">
                    <i class="fw fw-policy fw-3x"></i>
                </h3>
                <h3 class="text-muted">You don't have any device policies. Let's add a new policy!</h3>
                {{#if permissions.ADD_ADMIN_POLICY}}
                    <h3>
                        <!--suppress HtmlUnknownTarget -->
                        <a href="{{@app.context}}/policy/add" class="btn-operations btn-default">
                            <span class="fw-stack">
                                <i class="fw fw-circle-outline fw-stack-2x"></i>
                                <i class="fw fw-add fw-stack-1x"></i>
                            </span>
                            Add New Policy
                        </a>
                    </h3>
                {{/if}}
            </div>
        </div>
    {{/equal}}
    {{#equal noPolicy false}}
        <div id="loading-content" class="col-centered">
            <i class="fw fw-settings fw-spin fw-2x"></i>
            Loading policies . . .
            <br>
        </div>
        <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view hidden"
               id="policy-grid">
            <thead>
            <tr class="sort-row">
                <th class="no-sort"></th>
                <th class="no-sort"></th>
                <th>By Platform</th>
                <th>By Ownership Type</th>
                <th>By Role</th>
                <th>By User</th>
                <th>By Compliance Type</th>
                <th>By Status</th>
                <th class="no-sort"></th>
            </tr>
            <tr class="filter-row filter-box">
                <th class="no-sort"></th>
                <th class="no-sort"></th>
                <th data-for="By Platform" class="select-filter data-platform"></th>
                <th data-for="By Ownership Type" class="select-filter data-ownership"></th>
                <th data-for="By Role" class="text-filter"></th>
                <th data-for="By User" class="text-filter"></th>
                <th data-for="By Compliance Type" class="select-filter data-compliance"></th>
                <th data-for="By Status" class="select-filter data-status"></th>
                <th class="no-sort"></th>
            </tr>
            <tr class="bulk-action-row hidden">
                <th colspan="9">
                    <ul class="tiles">
                        {{#if removePermitted}}
                            <li class="square">
                                <a href="#" data-click-event="remove-form" class="btn square-element policy-remove-link"
                                   data-toggle="modal" data-target="#modalDemo">
                                            <span class="icon fw-stack">
                                                <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                <i class="fw fw-delete fw-stack-1x"></i>
                                            </span>
                                    Remove
                                </a>
                            </li>
                        {{/if}}
                        <li class="square">
                            <a href="#" data-click-event="remove-form" class="btn square-element policy-publish-link"
                               data-toggle="modal" data-target="#modalDemo">
                                        <span class="icon fw-stack">
                                            <i class="fw fw-circle-outline fw-stack-2x"></i>
                                            <i class="glyphicon glyphicon-floppy-saved"></i>
                                        </span>
                                Publish
                            </a>
                        </li>
                        <li class="square">
                            <a href="#" data-click-event="remove-form" class="btn square-element policy-unpublish-link"
                               data-toggle="modal" data-target="#modalDemo">
                                        <span class="icon fw-stack">
                                            <i class="fw fw-circle-outline fw-stack-2x"></i>
                                            <i class="glyphicon glyphicon-floppy-remove"></i>
                                        </span>
                                Unpublish
                            </a>
                        </li>
                    </ul>
                </th>
            </tr>
            </thead>

            <tbody>
            {{#each policyListToView}}
                <tr data-type="selectable" data-id="{{id}}" data-status="{{status}}">
                    <td class="remove-padding icon-only content-fill viewEnabledIcon"
                        data-url="{{@app.context}}/policy/view?id={{id}}&deviceType={{platform}}" data-id="{{id}}">
                        <div class="thumbnail icon">
                            <img src="{{icon}}">
                        </div>
                    </td>
                    <td
                        data-search="{{name}}"
                        data-display="{{name}}">
                        <h4>{{name}}</h4>
                        <div>({{platform}})</div>
                        {{#equal status "Active/Updated"}}
                            <span><i class="fw fw-warning icon-success"></i> Active/Updated</span>
                        {{/equal}}
                        {{#equal status "Active"}}
                            <span><i class="fw fw-success icon-success"></i> Active</span>
                        {{/equal}}
                        {{#equal status "Inactive/Updated"}}
                            <span><i class="fw fw-warning icon-warning"></i> Inactive/Updated</span>
                        {{/equal}}
                        {{#equal status "Inactive"}}
                            <span><i class="fw fw-error icon-danger"></i> Inactive</span>
                        {{/equal}}
                    </td>
                    <td class="remove-padding-top"
                        data-search="{{platform}}"
                        data-display="{{platform}}">
                    </td>
                    <td class="remove-padding-top hidden"
                        data-search="{{ownershipType}}"
                        data-display="{{ownershipType}}"
                        data-grid-label="Ownership">
                        {{ownershipType}}
                    </td>
                    <td id="policy-roles" class="remove-padding-top"
                        data-search="{{roles}}"
                        data-display="{{roles}}"
                        data-grid-label="Role(s)">
                        {{roles}}
                    </td>
                    <td id="policy-users" class="remove-padding-top"
                        data-search="{{users}}"
                        data-display="{{users}}"
                        data-grid-label="User(s)">
                        {{users}}
                    </td>
                    <td class="remove-padding-top"
                        data-search="{{compliance}}"
                        data-display="{{compliance}}"
                        data-grid-label="Compliance">
                        {{compliance}}
                    </td>
                    <td id="policy-status" class="remove-padding-top"
                        data-search="{{status}}"
                        data-display="{{status}}">
                    </td>
                    <td class="text-right content-fill text-left-on-grid-view no-wrap tooltip-overflow-fix">
                        <!--suppress HtmlUnknownTarget -->
                        <a href="{{@app.context}}/policy/edit?id={{id}}&deviceType={{platform}}"
                           data-id="{{id}}"
                           data-toggle="tooltip"
                           data-original-title="Edit"
                           data-click-event="remove-form"
                           class="btn padding-reduce-on-grid-view policy-update-link">
                                <span class="fw-stack">
                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
                                    <i class="fw fw-edit fw-stack-1x"></i>
                                </span>
                            <span class="hidden-xs hidden-on-grid-view">Re-Configure</span>
                        </a>
                    </td>
                </tr>
            {{/each}}
            <br class="c-both"/>
            </tbody>
        </table>
    {{/equal}}
    <br class="c-both"/>

    <div id="content-filter-types" style="display: none">
        <div class="sort-title">Sort By</div>
        <div class="sort-options">
            <a href="#">By Platform<span class="ico-sort-asc"></span></a>
            <a href="#">By Ownership Type</a>
            <a href="#">By Role</a>
            <a href="#">By User</a>
            <a href="#">By Compliance Type</a>
            <a href="#">By Status</a>
        </div>
    </div>
{{/zone}}

{{#zone "bottomJs"}}
    {{js "js/policy-list.js"}}
{{/zone}}