<!DOCTYPE html>
<html class="" lang="en">
	<head>
		{% include 'twig/common/header/include.twig' %}
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
		<script src="/dev/lib/handlebars-v4.0.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="/dev/js/handlebars.helper.js?v=<?=_version?>" type="text/javascript" charset="utf-8"></script>
		<script src="/dev/js/admin/project_roles.js?v=<?=_version?>" type="text/javascript" charset="utf-8"></script>
		<script src="/dev/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
		<script src="/dev/lib/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
		<link href="/dev/lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

	</head>
	<body class="" data-group="" data-page="projects:issues:index" data-project="xphp">
		{% include 'twig/common/body/script.twig' %}

		<section class="has-sidebar page-layout max-sidebar">
			{% include 'twig/common/body/page-left.twig' %}

			<div class="page-layout page-content-body system-page">
				{% include 'twig/common/body/header-content.twig' %}

				<script>
					var findFileURL = "";
				</script>
				<div class="page-with-sidebar">

					{% include 'twig/admin/common-page-nav-admin.twig' %}

					<div class="content-wrapper page-with-layout-nav page-with-sub-nav">
						<div class="alert-wrapper">

							<div class="flash-container flash-container-page"></div>

						</div>
						<div class="container-fluid">
							<div class="content" id="content-body">
								{% include 'twig/admin/common_user_left_nav.twig' %}
								<div class="row has-side-margin-left">
									<div class="col-lg-12">
										<div class="top-area">
											<ul class="nav-links">
												<li class="active">
													<a href="#">项目角色</a>
												</li>
											</ul>
											<div class="nav-controls">

											</div>
										</div>
										<div class="content-list">
											<div class="table-holder">
												<table class="table">
													<thead>
													<tr>
														<th  width="20%" class=" ">名称</th>
														<th  width="60%" class=" ">角色成员</th>
														<th width="20%" class=" ">操作</th>
													</tr>
													</thead>
													<tbody id="render_id">
													{% for project in project_roles %}
														<tr>
															<td  width="20%" class=" " style="font-weight: bold">
																<?=project.name?>
															</td>
															<td  width="60%" class=" ">

															</td>
															<td width="20%" class=" ">

															</td>
														</tr>
														{% for role in project.roles %}
															<tr>
																<td  width="20%" class=" ">
																	&nbsp;&nbsp;&nbsp;&nbsp;|___<?=role.name?>
																</td>
																<td  width="60%" class=" ">
																	<div class="users-list">
																		{% for user in role.users %}
																			<div class="user-item">
																				<a data-hovercard-type="user" href="#">
																					<img class="avatar avatar-small"
																						 style="width:24px; height: 24px;"
																						 title="<?=user.display_name?>"
																						 alt="<?=user.username?>"
																						 src="/attachment/<?=user.avatar?>">
																				</a>
																			</div>
																		{% endfor %}
																	</div>
																</td>
																<td width="20%" class=" ">
																	<a class="btn btn-transparent list_add_user" href="#" data-id="<?=role.id?>" >成员管理</a>
																</td>
															</tr>
														{% endfor %}
													{% endfor %}
													</tbody>
												</table>
											</div>
										</div>
									</div>


								</div>
							</div>
						</div>

					</div>
				</div>

			</div>
		</section>

		<div class="modal" id="modal-role_user">
			<form class="js-quick-submit js-upload-blob-form form-horizontal" id="form-role_user"
				  action="#"
				  accept-charset="UTF-8"
				  method="post">
				<input type="hidden" name="role_id" id="role_user-role_id" value="">
				<input type="hidden" name="project_id" id="role_user-project_id" value="<?=project_id?>">
				<input type="hidden" name="format" id="format" value="json">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<a class="close" data-dismiss="modal" href="#">×</a>
							<h3 class="modal-header-title">角色用户</h3>
						</div>

						<div class="modal-body min-height400">

							<div class="form-group">
								<label class="control-label" >请选择用户:</label>
								<div class="row">
									<div class="col-md-6">

										<div class="issuable-form-select-holder">
											<select id="role_user_selected_user_id" name="params[select_user]"
													class="selectpicker"  data-live-search="true"
													data-project-id="<?=project_id?>"
											>
												<option value="">选择成员</option>
												{% for user in  users %}
													<option  data-content="<img width='26px' height='26px' class=' float-none' style='border-radius: 50%;' src='<?=user.avatar?>'> <?=user.display_name?>" value="<?=user.uid?>"><?=user.display_name?></option>
												{% endfor %}
											</select>
										</div>
										<a id="a-assign-to-me-link" class="assign-to-me-link" href="#">选择自己</a>

									</div>
									<!--<div class="col-md-3">
                                        <button id="btn-role_user_save" name="btn-role_user_save" type="button" class="btn " >添 加</button>
                                    </div>-->
								</div>
							</div>

							<div class="role-table">
								<div class="form-group">
									<table class="table ci-table">
										<tbody id="role_user_list_render_id">

										</tbody>
									</table>
								</div>
							</div>
						</div>

						<div class="modal-footer">
							<a class="btn btn-cancel" data-dismiss="modal" href="#">关 闭</a>
						</div>
					</div>
				</div>
			</form>
		</div>

{% verbatim %}
<script type="text/html"  id="role_user_list_tpl">
    {{#role_users}}
    <tr class="commit" id="role_user_id_{{id}}">
        <td></td>
        <td>{{user_html user_id}} {{user_account_str user_id}}</td>
        <td>
            <a class="role_user_remove btn btn-transparent "
               href="javascript:;"
               data-id="{{id}}"
               data-user_id="{{user_id}}"
               data-project_id="{{project_id}}"
               data-role_id="{{role_id}}"
               data-value="{{user_id}}">
                <i class="fa fa-trash"></i><span class="sr-only">移除</span>
            </a>
        </td>
    </tr>
    {{/role_users}}
</script>
{% endverbatim %}


<script>
	var _issueConfig = {
		users:<?=users|json_encode()|raw?>,
		"projects":<?=projects|json_encode()|raw?>,

	};
	var projectRoles = null;
	var options = {
		filter_url:'/admin/project_roles/gets',
		role_user_fetch_url:"/admin/project_roles/fetchRoleUser",
		role_user_add_url:"/project/role/addRoleUser",
		delete_role_user_url:"/project/role/deleteRoleUser"
	};
	var isChanged = false;
	$(function () {
		projectRoles = new ProjectRoles(options);
		//projectRoles.fetchProjectRoles();

		$(".list_add_user").click(function () {
			projectRoles.editProjectRolesUser($(this).data("id"));
		});

		$('#role_user_selected_user_id').bind('change',function (e) {
			//alert($(this).val())
			projectRoles.addRoleUser();
		});

		$('#a-assign-to-me-link').bind('click',function (e) {
			//alert($(this).val())
			$('#role_user_selected_user_id').val(window.current_uid);
			$('.selectpicker').selectpicker('refresh');
			projectRoles.addRoleUser();
		});

		$("#modal-role_user").on('hidden.bs.modal', function (e) {
			if(isChanged){
				window.location.reload();
			}
		})

	});
</script>


	</body>
</html>
