<!DOCTYPE html>
<html class="" lang="en">
	<head>

		{% include 'twig/common/header/include.twig' %}
		<script src="/dev/lib/jquery.form.min.js"></script>

		<script src="/dev/vendor/define-validate.js"></script>
		<script src="/dev/lib/bootstrap-select/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>
		<link
		href="/dev/lib/bootstrap-select/css/bootstrap-select.css" rel="stylesheet">

		<!-- Fine Uploader jQuery JS file-->
		<link href="/dev/lib/fine-uploader/fine-uploader.css" rel="stylesheet">
		<link href="/dev/lib/fine-uploader/fine-uploader-gallery.css" rel="stylesheet">
		<script src="/dev/lib/e-smart-zoom-jquery.min.js"></script>
		<script src="/dev/lib/fine-uploader/jquery.fine-uploader.js"></script>

		<link rel="stylesheet" href="/dev/lib/editor.md/css/editormd.css">
		<script src="/dev/lib/editor.md/editormd.js"></script>

		<style type="text/css">
			.radio-with {
				display: flex;
			}
			.radio-with .radio {
				padding: 8px 12px;
				border-radius: 2px;
				box-sizing: border-box;
				flex: 1;
			}
			.radio-with .radio:focus-within {
				background-color: #eee;
			}
			.qq-gallery.qq-uploader {
				min-height: 90px;
			}
			.qq-gallery.qq-uploader:before {
				top: 25%;
			}
		</style>
	</head>
	<body class="" data-group="" data-page="projects:issues:new" 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">
				{% include 'twig/common/body/header-content.twig' %}

				<script>
					var findFileURL = "";
				</script>
				<div class="page-with-sidebar">
					<div class="page-with-layout-nav page-with-sub-nav" style="background-color: #fff;">
						<div class="alert-wrapper">
							<div class="flash-container flash-container-page"></div>
						</div>
						<div class="container-fluid container-limited">
							<div class="content" id="content-body">
								<h3 class="page-title">
									创建项目
								</h3>
								<hr>
								<form id="form_add_action" class="form-horizontal issue-form common-note-form js-quick-submit js-requires-input gfm-form " action="/project/main/create" accept-charset="UTF-8" method="post">
									<input name="utf8" type="hidden" value="✓">
									<input type="hidden" name="authenticity_token" value="">
									<div class="form-group">
										<label class="control-label" for="">项目名称
											<i class="required">*</i>
										</label>
										<div class="col-sm-6">
											<input placeholder="请输入名称,最多<?=project_name_max_length?>字符" class="form-control" type="text" name="params[name]" id="project_name" maxlength="<?=project_name_max_length?>">
											<p id="tip-project_name" class="gl-field-error hide"></p>
										</div>
									</div>


									<div class="form-group">
										<label class="control-label" for="">
											<span>组织
												<i class="required">*</i>
											</span>
										</label>
										<div class="col-sm-6">
											<div class="select2-container">
												<select class="selectpicker js-org" data-live-search="true" name="params[org_id]">
													{% for org in org_list %}
														<option data-tokens="<?=org['name']?>" data-org_path="<?=org['path']?>" value="<?=org['id']?>"><?=org['name']?></option>
													{% endfor %}
												</select>
											</div>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="" title="必须英文字符,最大长度<?=project_key_max_length?>,创建后不可修改">
											<span>项目Key <i class="required">*</i>
											</span>
										</label>
										<div class="col-sm-6">
											<div class="input-group">
												<span class="input-group-addon" id="basic-addon3"><?=root_domain?><span class="js-org-key"></span>/
												</span>
												<input placeholder="请输入项目Key,最大长度<?=project_key_max_length?>" class="form-control" type="text" name="params[key]" id="project_key" maxlength="<?=project_key_max_length?>">
											</div>

											<p id="tip-project_key" class="gl-field-error hide"></p>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="project_avatar">
											<span>项目图标</span>
										</label>
										<div class="col-sm-2">
											<input type="hidden" name="params[avatar_relate_path]" id="avatar" value=""/>
											<div id="fine-uploader-gallery"></div>

										</div>
										<div class="col-sm-6">
											<div class="help-block">图片大小被限制为200KB.</div>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="">
											项目模板
											<i class="required">*</i>
										</label>
										<div class="col-sm-6  ">
											<select  name="params[project_tpl_id]" id="project_tpl_id" title="项目模板"  data-live-search="true"  class="selectpicker ">
												{% for category in project_tpl_group_arr %}
													<optgroup label="<?=category.name?>">
														{% for tpl in category.tpl_arr %}
															<option value="<?=tpl.id?>" ><?=tpl.name?></option>
														{% endfor %}
													</optgroup>
												{% endfor %}
											</select>
											<span  class="gray "  style="margin-left: 20px"> 项目初创建的配置将使用所选的模板，可以在管理页面自定义模板</span>
										</div>
									</div>

									<div class="row">
										<div class="col-sm-6">
											<div class="form-group issue-assignee">
												<label class="control-label col-lg-4" for="project_lead">项目负责人
													<i class="required">*</i>
												</label>
												<div class="col-lg-8 col-sm-10">
													<select  name="params[lead]" id="project_lead" title="项目负责人" class="selectpicker">
														{% for row in users %}
															{% set  display_name = row['display_name'] %}
															<option value="<?=row.uid?>"  data-content="<img width='20px' height='20px' class=' float-none' style='border-radius: 50%;' src='/attachment/avatar/<?=row.uid?>.png' > <?=display_name?>"  ><?=display_name?></option>
														{% endfor %}
													</select>
													<!--<a class="assign-to-me-link " href="#">赋予给我</a>-->
													<p id="tip-project_lead" class="gl-field-error hide"></p>
												</div>
											</div>

										</div>
										<div class="col-lg-6"></div>
									</div>

									<div class="form-group">
										<label class="control-label" for="project_description">项目简述
											<span class="light"></span>
										</label>
										<div class="col-sm-10">
											<textarea placeholder="几句话概述你的项目" class="form-control" rows="3" maxlength="250" name="params[description]" id="project_description"></textarea>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="project_detail">项目详情</label>
										<div class="col-sm-10">
											<div id="editor_md">
												<textarea style="display:none;" name="params[detail]" id="project_detail"></textarea>
											</div>
											<div class="help-block">
												<a href="https://www.runoob.com/markdown/md-tutorial.html" target="_blank">Markdown写作帮助</a>
											</div>
										</div>
									</div>

									<hr>

									<div class="form-group hide">
										<label class="control-label" for="project_url">
											<span>URL</span>
										</label>
										<div class="col-sm-10">
											<input placeholder="URL" class="form-control" type="text" name="params[url]" id="projectUrl">
										</div>
									</div>

									<div class="form-actions text-right" style="position: relative; z-index: 10;">
										<input type="submit" name="commit" value="创建项目" class="btn btn-create disabled js-key-enter">
										<a class="btn btn-cancel" href="javascript:history.go(-1)" style="float: none">取消</a>
									</div>
								</form>


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

			</div>
		</section>


		<!-- Fine Uploader Gallery template
				    ====================================================================== -->
		<script type="text/template" id="qq-template-gallery">
			<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="">
				<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
					<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
				</div>
				<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
					<span class="qq-upload-drop-area-text-selector"></span>
				</div>
				<div class="qq-upload-button-selector qq-upload-button">
					<div>点击上传</div>
				</div>
				<span class="qq-drop-processing-selector qq-drop-processing">
					<span>Processing dropped files...</span>
					<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
				</span>
				<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
					<li>
						<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
						<div class="qq-progress-bar-container-selector qq-progress-bar-container">
							<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
						</div>
						<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
						<div class="qq-thumbnail-wrapper">
							<a href="javascript:;" class="qq-file-link qq-upload-file-url">
								<img class="qq-thumbnail-selector" qq-max-size="198" qq-server-scale>
							</a>
						</div>
						<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
						<button type="button" class="qq-upload-retry-selector qq-upload-retry">
							<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
							重试
						</button>

						<div class="qq-file-info">
							<div class="qq-file-name">
								<span class="qq-upload-file-selector qq-upload-file"></span>
								<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
							</div>
							<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
							<span class="qq-upload-size-selector qq-upload-size"></span>
							<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
								<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
							</button>
							<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
								<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
							</button>
							<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
								<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
							</button>
						</div>
					</li>
				</ul>

				<dialog class="qq-alert-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">Close</button>
					</div>
				</dialog>

				<dialog class="qq-confirm-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">否</button>
						<button type="button" class="qq-ok-button-selector">是</button>
					</div>
				</dialog>

				<dialog class="qq-prompt-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<input type="text">
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">取消</button>
						<button type="button" class="qq-ok-button-selector">好的</button>
					</div>
				</dialog>
			</div>
		</script>


		<script>


			$(function () {
				var editor = editormd({
					id: "editor_md",
					placeholder: "这里可以填写项目的详细说明,以便于其他新成员快速了解项目.",
					width: "100%",
					height: 240,
					markdown: "",
					path: '/dev/lib/editor.md/lib/',
					imageUpload: true,
					imageFormats: [
						"jpg",
						"jpeg",
						"gif",
						"png",
						"bmp",
						"webp"
					],
					imageUploadURL: "/issue/detail/editormd_upload",
					tocm: true, // Using [TOCM]
					emoji: true,
					saveHTMLToTextarea: true,
					toolbarIcons: "custom",
					autoFocus: false
				});

				$('#fine-uploader-gallery').fineUploader({
					template: 'qq-template-gallery',
					multiple: false,
					request: {
						endpoint: '/projects/upload' + '?_csrftoken=' + encodeURIComponent(document.getElementById('csrf_token').value)
					},
					deleteFile: {
						enabled: false
					},
					retry: {
						enableAuto: true
					},
					validation: {
						allowedExtensions: [
							'jpeg', 'jpg', 'gif', 'png'
						],
						sizeLimit: 1024 * 200
					},
					callbacks: {
						onComplete: function (id, fileName, responseJSON) { // console.log(responseJSON);
							if (responseJSON.error == '') {
								$('#avatar').val(responseJSON.relate_path);
							}
						}
					}
				});

				var add_options = {
					beforeSubmit: function (arr, $form, options) {
						return true;
					},
					success: function (resp, textStatus, jqXHR, $form) {
						if (!form_check(resp)) {
							return;
						}
						if (resp.ret == '200') {
							// console.log(resp)
							// notify_error(resp.msg);
							location.href = '/' + resp.data.path;
						} else {
							notify_error(resp.msg);
						}
					},
					type: "post",
					dataType: "json",
					clearForm: false,
					resetForm: false,
					timeout: 3000
				};

				$('#form_add_action').submit(function () {
					$(this).ajaxSubmit(add_options);
					return false;
				});

				$('#project_name').bind('input propertychange', function () {
					if ($(this).val().length > 0) {
						$("input[name='commit']").removeClass("disabled");
					} else {
						$("input[name='commit']").addClass("disabled");
					}
				});
				var defaultPath = $($(".js-org").find("option")[0]).attr("data-org_path");
				$('.js-org-key').text(defaultPath);
				$(".js-org").on("changed.bs.select", function (ev, v) {
					var path = $(".js-org").find("option:selected").attr("data-org_path");
					$(".js-org-key").text(path);
				})
			});
		</script>
	</body>

</html>
