{{!
  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="User Management"}}

{{#zone "breadcrumbs"}}
    <li>
        <a href="{{@app.context}}/">
            <i class="icon fw fw-home"></i>
        </a>
    </li>
    <li>
        <a href="{{@app.context}}/users">
            Users
        </a>
    </li>
    <li>
        <a href="#">
            {{user.username}}
        </a>
    </li>
{{/zone}}

{{#zone "navbarActions"}}
    {{#if canEdit}}
        <li>
            <a href="{{@app.context}}/user/edit?username={{user.username}}" data-username="{{user.username}}"
               data-click-event="edit-form" class="btn padding-reduce-on-grid-view edit-user-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>
                Edit
            </a>
        </li>
    {{/if}}
{{/zone}}

{{#zone "content"}}
    {{#if canView}}
        {{#if exists}}
            {{#zone "contentTitle"}}
                <div class="row wr-device-board">
                    <div class="col-lg-12 wr-secondary-bar">
                        <label class="device-id device-select" data-username="{{user.username}}">
                            {{#if user.firstname}}
                                {{user.firstname}} {{user.lastname}}
                            {{else}}
                                {{user.username}}
                            {{/if}}
                        </label>
                    </div>
                </div>
            {{/zone}}

            <div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
                <div class="media">
                    <div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <div class="thumbnail icon" style="margin-bottom: 43px"><i
                                class="square-element text fw fw-user"></i>
                        </div>
                        <div class="media">

                            {{#unless isCloud}}
                                {{#if editPermitted}}
                                    <button class="wr-btn"
                                            onclick="location.href='{{@app.context}}/users/edit-user?username={{user.username}}';"
                                            id="sortUpdateBtn"
                                            style="width: 100%; vertical-align: bottom; background-color: #7fa030;"><span><i
                                            class="fw fw-edit"></i> Edit</span></button>
                                {{/if}}
                            {{/unless}}
                        </div>
                    </div>
                    <div class="media-body asset-desc add-padding-left-5x">
                        <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Profile Overview
                        </div>
                        {{#defineZone "user-detail-properties"}}
                            <table class="table table-responsive table-striped" id="members">
                                <tbody>
                                <tr role="row" class="even">
                                    <td class="sorting_1" style="padding:10px 15px; width: 7%;">Username</td>
                                    <td style="padding:10px 15px;">{{user.username}}</td>
                                </tr>
                                <tr role="row" class="odd">
                                    <td class="sorting_1" style="padding:10px 15px;">First Name</td>
                                    <td style="padding:10px 15px;">{{user.firstname}}</td>
                                </tr>
                                <tr role="row" class="even">
                                    <td class="sorting_1" style="padding:10px 15px;">Last Name</td>
                                    <td style="padding:10px 15px;">{{user.lastname}}</td>
                                </tr>
                                <tr role="row" class="even">
                                    <td class="sorting_1" style="padding:10px 15px;">Email</td>
                                    <td style="padding:10px 15px;">{{user.emailAddress}}</td>
                                </tr>
                                <tr role="row" class="even">
                                    <td class="sorting_1" style="padding:10px 15px;">Roles</td>
                                    <td style="padding:10px 15px;">
                                        {{#each userRoles}}
                                            <option selected="selected">{{this}}</option>
                                        {{/each}}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        {{/defineZone}}
                    </div>
                </div>
                <div class="media">
                    <div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
                        <ul class="list-group" role="tablist">
                            <li class="active"><a class="list-group-item" href="#enrolled_devices" role="tab"
                                                  data-toggle="tab" aria-controls="enrolled_devices">Enrolled Devices</a>
                            </li>
                        </ul>
                    </div>
                    {{#defineZone "user-enrolled-devices"}}
                        <div class="media-body add-padding-left-5x remove-padding-xs tab-content">
                            <div class="panel-group tab-content">
                                <div class="panel panel-default tab-pane active" id="enrolled_devices"
                                     role="tabpanel" aria-labelledby="enrolled_devices">
                                    <div class="panel-heading">Enrolled Devices by
                                        {{#if user.firstname}}
                                            {{user.firstname}} {{user.lastname}}
                                        {{else}}
                                            {{user.username}}
                                        {{/if}}
                                    </div>
                                    <div class="panel-body">
                                        <div id="enrolled_devices-container">
                                            <div class="panel-body">
                                                {{#each devices}}
                                                    <div class="wr-list-group wr-sortable policy-list">
                                            <span class="list-group-item" id="{{id}}">
                                                <div class="row">
                                                    <div class="col-lg-3 clearfix">
                                                        <span class="wr-list-icon">
                                                            <div class="thumbnail icon">
                                                                <img class="square-element text fw "
                                                                     src="{{thumb}}"/>
                                                            </div>
                                                        </span>
                                                        <span class="wr-list-desc">
                                                            <h3 class="wr-list-name">{{name}}</h3>
                                                        </span>
                                                    </div>
                                                    <div class="col-lg-6">
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <span class="list-group-item-actions">
                                                            <a href="{{@app.context}}/device/{{type}}?id={{deviceIdentifier}}"
                                                               class="cu-btn-inner policy-view-link"
                                                               data-id="{{deviceIdentifier}}">
                                                                <span class="fw-stack">
                                                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                                    <i class="fw fw-view fw-stack-1x"></i>
                                                                </span>
                                                                View
                                                            </a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </span>
                                                    </div>
                                                {{/each}}
                                            </div>
                                            <br class="c-both"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/defineZone}}
                </div>
            </div>
        {{else}}
            <div id="user-created-msg" class="container col-centered wr-content">
                <div class="wr-form">
                    <p class="page-sub-title">User not found.</p>
                    <br>Please click <b>"Add A New User"</b>, if you wish to add user or click
                    <b>"View User List"</b> to navigate to the user list.
                    <hr/>
                    <button class="wr-btn" onclick="window.location.href='{{@app.context}}/users'">View User List
                    </button>
                    <a href="{{@app.context}}/user/add" class="cu-btn-inner">
                        <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 Another User
                    </a>
                </div>
            </div>
        {{/if}}
    {{else}}
        <h1 class="page-sub-title">
            Permission Denied
        </h1>
        <br>
        You not authorized to enter User Management Section.
        <br>
    {{/if}}
{{/zone}}
