@**
* Yobi, Project Hosting SW
*
* Copyright 2012 NAVER Corp.
* http://yobi.io
*
* @author Hwi Ahn
*
* 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.
**@
@(message: String, members: List[ProjectUser], project:Project, roles: List[Role])

@import helper._

@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.ProjectApp.editMember(project.owner, project.name, userId)" data-loginId="@loginId">@Messages("user.role." + role.name)</a></li>
    }
}

@projectLayout(message, project, utils.MenuType.PROJECT_SETTING) {
@projectMenu(project, utils.MenuType.PROJECT_SETTING, "")
<div class="page-wrap-outer">
    <div class="project-page-wrap">
        @partial_settingmenu(project)

        <div class="inner-bubble">
            <form class="nm" action="@routes.ProjectApp.newMember(project.owner, project.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 <- members){
                @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 @if(member.user.isGuest){<span class="guest">GUEST</span>}</div>
                <div class="member-setting">
                @if(!project.isOwner(member.user)) {
                     <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.ProjectApp.deleteMember(project.owner, project.name, member.user.id)" class="ybtn ybtn-danger ybtn-small">
                        @Messages("button.delete")
                    </a>
                } else {
                   <span class="label owner">@Messages("user.role.owner")</span>
                }
                </div>
            </li>
                }
            }
        </ul>

        @** Enrolled Users **@
        @if(project.enrolledUsers.size > 0) {
        <legend>
            <h3>@Messages("project.member.enrollment.request") (@project.enrolledUsers.size)</h3>
        </legend>
        <div class="row-fluid">
            @for(user <- project.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("project.Member", {
           "sActionURL": "@routes.UserApp.users()"
       });
   });
</script>

}