@**
* 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, currentPage: com.avaje.ebean.Page[User], userState: UserState, query: String)

@import utils.JodaDateUtil._
@import utils.TemplateHelper._

@isActiveTabMenu(state: UserState) =@{
    if(state==userState) {"active"}
}

@numberOfSiteAdmin = {
    <span class="num-badge">@(SiteAdmin.find.all().size() - 1)</span>
}

@siteMngLayout(message) {
    <div class="title_area">

        <h2 class="pull-left">@Messages("site.sidebar.userList")</h2>
        <form class="form-search pull-right" action="@routes.SiteApp.userList()">
            <input type="hidden" name="state" value="@userState" />
            <div class="search-bar">
                <input class="textbox" name="query" type="text" placeholder="@Messages("site.userList.search")" value="@query">
                <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
            </div>
        </form>
    </div>
    <ul class="nav nav-tabs">
      <li class="@isActiveTabMenu(UserState.ACTIVE)"><a href="@routes.SiteApp.userList()?state=@UserState.ACTIVE.name">@Messages("site.userList.unlocked")</a></li>
      <li class="@isActiveTabMenu(UserState.LOCKED)"><a href="@routes.SiteApp.userList()?state=@UserState.LOCKED.name">@Messages("site.userList.locked")</a></li>
      <li class="@isActiveTabMenu(UserState.DELETED)"><a href="@routes.SiteApp.userList()?state=@UserState.DELETED.name">@Messages("site.userList.deleted")</a></li>
      <li class="@isActiveTabMenu(UserState.GUEST)"><a href="@routes.SiteApp.userList()?state=@UserState.GUEST.name">@Messages("site.userList.guest")</a></li>
      <li class="@isActiveTabMenu(UserState.SITE_ADMIN)"><a href="@routes.SiteApp.userList()?state=@UserState.SITE_ADMIN.name">@Messages("site.userList.siteAdmin")@numberOfSiteAdmin</a></li>
    </ul>
    <div class="row-fluid listhead">
        <div class="span3 listhead-title">
            <strong>@Messages("user.name")</strong>
        </div>
        <div class="span3 listhead-title">
            <strong>@Messages("user.email")</strong>
        </div>
        <div class="span2 listhead-title">
            <strong>@Messages("userinfo.since")</strong>
        </div>
        @if(userState != UserState.DELETED) {
        <div class="span4 listhead-title">
            <strong>&nbsp;</strong>
        </div>
        } else {
        <div class="span4 listhead-title">
            <strong>@Messages("userinfo.leave")</strong>
        </div>
        }
    </div>
    <ul class="user-list-wrap">
        @for(user <- currentPage.getList) {
        <li class="row-fluid listitem">
            <div class="span3 listitem-col">
                <a href="@routes.UserApp.userInfo(user.loginId)" class="avatar-wrap list-avatar">
                    @if(user.avatarUrl == UserApp.DEFAULT_AVATAR_URL){
                        <img src="@urlToPicture(user.email, 32)">
                    } else {
                        <img src="@user.avatarUrl" alt="@user.name" width="32" height="32"/>
                    }
                </a>
                <a href="@routes.UserApp.userInfo(user.loginId)" class="user-name">
                    @user.name
                </a>
                <a href="@routes.UserApp.userInfo(user.loginId)" class="user-id">
                    @{"@"}@user.loginId
                </a>
            </div>
            <div class="span3 listitem-col">
                <span class="email">@user.email</span>
            </div>
            <div class="span2 listitem-col created-date">
                <span>@socialDate(user.createdDate)</span>
            </div>
            @if(userState != UserState.DELETED) {
            <div class="span5 listitem-col action-buttons">
                    <a class="ybtn ybtn-small @if(user.isGuest){ybtn-success}" data-request-method="post" data-request-uri="@routes.SiteApp.toggleGuestMode(user.loginId, user.state.name(), query)">
                    @if(user.isGuest){
                        @Messages("button.user.make.normal.mode")
                    } else {
                        @Messages("button.user.make.guest.mode")
                    }
                    </a>
                <a class="ybtn ybtn-small" data-request-method="post" data-request-uri="@routes.SiteApp.toggleAccountLock(user.loginId, user.state.name(), query)">
                    @Messages("button" +".user.makeAccountUnlock."+ (user.state == UserState.LOCKED))
                </a>
                <button id="@user.loginId" class="ybtn ybtn-small" data-toggle="reset-password" data-href="@routes.UserApp.userInfo(user.loginId)?action=resetPassword"> @Messages("title.resetPassword")</button>
                <a class="ybtn ybtn-small @if(user.isSiteManager){ybtn-info}else{label-info}" data-request-method="post" data-request-uri="@routes.SiteApp.toggleSiteAdminRole(user.loginId)">
                @if(user.isSiteManager){
                    @Messages("button.user.revoke.site.admin.role")
                } else {
                    @Messages("button.user.upgrade.to.site.admin")
                }
                </a>
                <button class="ybtn ybtn-small ybtn-danger" data-toggle="account-delete" data-href="@routes.SiteApp.deleteUser(user.id)" data-user-id="@user.loginId" data-user-name="@user.name">
                    @Messages("button.delete")
                </button>
            </div>
            } else {
            <div class="span4 listitem-col">
                @user.lastStateModifiedDate
            </div>
            }
        </li>
        }
    </ul>

    <div id="pagination"></div>

    <div id="alertDeletionWrap" class="modal fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <span id="userInfo"></span>
            <span>@Messages("site.user.delete")</span>
        </div>
        <div class="modal-body">
            <p>@Messages("site.user.deleteConfirm")</p>
        </div>
        <div class="modal-footer">
            <a id="accountToggleBtn" class="ybtn ybtn-danger">
                @Messages("button.yes")
            </a>
            <button type="button" class="ybtn" data-dismiss="modal">@Messages("button.no")</button>
        </div>
    </div>

    <script type="text/javascript">
    $(function(){
        function _showRequestWaitingMessage(that){
            $(".alert").remove();
            $.tmpl (document.getElementById("dismissable-alerts-request" ).text, {}).appendTo(that.parent());
        }

        $('.user-list-wrap').on('click','[data-toggle="account-delete"]',function(){
            $('#accountToggleBtn')
                .data("requestUri", $(this).data('href'))
                .data("requestMethod","delete")
                .requestAs({
                        "fOnError": function(oRes) {
                            if (oRes.oXHR.status == 403) {
                                document.location.reload();
                            }
                        }
                    });
            $('#userInfo').html($(this).data('userName')+'('+$(this).data('userId')+')');
            $('#alertDeletionWrap').modal('show');
        })
        .on('click','[data-toggle="reset-password"]',function(){
            var that = $(this);
            _showRequestWaitingMessage(that);
            $.post(that.data("href"))
                .done(function(data){
                    $(".alert").remove();
                    if(data && data.isSuccess === true){
                        $.tmpl($('#dismissable-alerts').text(), data).appendTo(that.parent());
                    } else {
                        $yobi.alert("password change failed: " + data.reason);
                    }
                })
                .fail(function(data){
                    $yobi.alert("password change failed: " + JSON.parse(data.responseText).reason);
                });

        });

        yobi.Pagination.update($("#pagination"), @currentPage.getTotalPageCount);
    });
    </script>
    <script type="text/x-jquery-tmpl" id="dismissable-alerts">
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <h4>@Messages("user.newPassword"): ${newPassword}</h4>
        </div>
    </script>
    <script type="text/x-jquery-tmpl" id="dismissable-alerts-request">
        <div class="alert alert-fail">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <h4>sending requestHeader...</h4>
        </div>
    </script>

}