@**
* Yobi, Project Hosting SW
*
* Copyright 2014 NAVER Corp.
* http://yobi.io
*
* @author Changseong Kim
*
* Licensed 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.
**@
@(organization:Organization, roles: List[Role])

@memberRole(userRole: String, loginId: String, userId: Long) = {
@for(role <- roles){
    <li data-value="@role.id" @if(role.name.equals(userRole)){ data-selected="true" class="active" }><a href="javascript:void(0)" data-action="apply" data-href="@routes.OrganizationApp.editMember(organization.name, userId)" data-loginId="@loginId">@Messages("user.role." + role.name)</a></li>
}
}

@siteLayout(organization.name, utils.MenuType.NONE) {
@header(organization)
@menu(organization)

<div class="page-wrap-outer">
    <div class="project-page-wrap">
        @partial_settingmenu(organization)
        
        <div class="inner-bubble">
            <form class="nm" action="@routes.OrganizationApp.addMember(organization.name)" method="post" id="addNewMember">
                <input type="text" class="text uname" id="loginId" name="loginId" required="required"
                data-provider="typeahead" autocomplete="off"
                placeholder="@Messages("project.members.addMember")"
                pattern="^[a-zA-Z0-9-]+([_.][a-zA-Z0-9-]+)*$" title="@Messages("user.wrongloginId.alert")" /><!--
            --><button type="submit" class="ybtn ybtn-success"><i class="yobicon-addfriend"></i> @Messages("button.add")</button>
            </form>
        </div>

        <ul class="members project row-fluid">
        @for(member <- organization.users){
            @if(member.user != null){
                <li class="member span6 span-hard-wrap">
                    <a href="@routes.UserApp.userInfo(member.user.loginId)" class="avatar-wrap mlarge pull-left mr10">
                        <img src="@User.findByLoginId(member.user.loginId).avatarUrl" width="64" height="64">
                    </a>
                    <div class="member-name">@member.user.getDisplayName</div>
                    <div class="member-id">@{"@"}@member.user.loginId</div>
                    <div class="member-setting">
                        <div class="btn-group" data-name="roleof-@member.user.loginId">
                            <button class="btn dropdown-toggle large" data-toggle="dropdown">
                                <span class="d-label">@Messages("user.role." + member.role.name)</span>
                                <span class="d-caret"><span class="caret"></span></span>
                            </button>
                            <ul class="dropdown-menu">@memberRole(member.role.name, member.user.loginId, member.user.id)</ul>
                        </div>
                        <a href="javascript:void(0)" data-action="delete" data-href="@routes.OrganizationApp.deleteMember(organization.name, member.user.id)" class="ybtn ybtn-danger ybtn-small">
                        @Messages("button.delete")
                        </a>
                    </div>
                </li>
            }
        }
        </ul>

        @** Confirm to delete member **@
        <div id="alertDeletion" class="modal hide">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>@Messages("organization.member.delete")</h3>
            </div>
            <div class="modal-body">
                <p>@Messages("organization.member.deleteConfirm")</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="ybtn ybtn-info ybtn-mini" id="deleteBtn">@Messages("button.yes")</button>
                <button type="button" class="ybtn ybtn-mini" data-dismiss="modal">@Messages("button.no")</button>
            </div>
        </div>

        @** Enrolled Users **@
        @if(organization.enrolledUsers.size > 0) {
        <legend>
            <h3>@Messages("project.member.enrollment.request") (@organization.enrolledUsers.size)</h3>
        </legend>
        <div class="row-fluid">
            @for(user <- organization.enrolledUsers) {
            <div class="span2">
                <div class="pull-left mr10">
                    <a href="@routes.UserApp.userInfo(user.loginId)">
                        <img src="@user.avatarUrl" height="65" width="65" class="img-circle"/>
                    </a>
                </div>
                <div class="pull-left" style="width: 60px;">
                    <span><a href="@routes.UserApp.userInfo(user.loginId)"><strong>@user.getDisplayName</strong></a></span>
                    <span>(@user.loginId)</span>
                    <button type="button" class="ybtn ybtn-info ybtn-mini blue enrollAcceptBtn" data-loginId="@user.loginId"><i class="yobicon-addfriend"></i>@Messages("button.add")</button>
                </div>
            </div>
            } @** -- end for -- **@
        </div>
        }
        @** -- // -- **@
    </div>
</div>

<link rel="stylesheet" type="text/css" media="screen" href="/assets/javascripts/lib/mentionjs/mention.css">
<script type="text/javascript">
$(document).ready(function(){
    $yobi.loadModule("organization.Member", {
    "sActionURL": "@routes.UserApp.users()"
    });
});
</script>
}