{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings custom-fields")}}
<h4 class="ui top attached header">
	{{ctx.Locale.Tr "org.settings.custom_fields"}}
</h4>
<div class="ui attached segment">
	<p class="text grey">{{ctx.Locale.Tr "org.settings.custom_fields_desc"}}</p>

	{{if .CustomFields}}
	<table class="ui compact table">
		<thead>
			<tr>
				<th>{{ctx.Locale.Tr "org.settings.custom_field_name"}}</th>
				<th>{{ctx.Locale.Tr "org.settings.custom_field_scope"}}</th>
				<th>{{ctx.Locale.Tr "org.settings.custom_field_type"}}</th>
				<th>{{ctx.Locale.Tr "org.settings.custom_field_options"}}</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			{{range .CustomFields}}
			<tr>
				<td><strong>{{.Name}}</strong>{{if .Required}} <span class="tw-text-red" data-tooltip-content="Required">*</span>{{end}}{{if .Description}}<br><small class="text grey">{{.Description}}</small>{{end}}</td>
				<td>{{if eq .Scope "issue"}}{{svg "octicon-issue-opened" 14}} Issue{{else}}{{svg "octicon-repo" 14}} Repo{{end}}</td>
				<td><code>{{.FieldType}}</code></td>
				<td>{{if .Options}}<code class="tw-text-xs">{{.Options}}</code>{{else}}<span class="text grey">-</span>{{end}}</td>
				<td class="tw-text-right">
					<form method="post" action="{{$.OrgLink}}/settings/custom-fields/{{.ID}}/delete" class="tw-inline">
						{{$.CsrfTokenHtml}}
						<button class="ui tiny red icon button" type="submit" title="{{ctx.Locale.Tr "remove"}}">{{svg "octicon-trash" 14}}</button>
					</form>
				</td>
			</tr>
			{{end}}
		</tbody>
	</table>
	{{else}}
	<div class="empty-placeholder">
		<p>{{ctx.Locale.Tr "org.settings.custom_fields_empty"}}</p>
	</div>
	{{end}}

	<div class="divider"></div>

	<h5>{{ctx.Locale.Tr "org.settings.custom_field_add"}}</h5>
	<form class="ui form" method="post" action="{{.OrgLink}}/settings/custom-fields">
		{{.CsrfTokenHtml}}
		<div class="three fields">
			<div class="required field">
				<label>{{ctx.Locale.Tr "org.settings.custom_field_name"}}</label>
				<input name="name" required placeholder="e.g. Status, Platform, Priority">
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.custom_field_scope"}}</label>
				<select name="scope" class="ui dropdown">
					<option value="issue">{{svg "octicon-issue-opened" 14}} Issue (sidebar)</option>
					<option value="repo">{{svg "octicon-repo" 14}} Repo (metadata)</option>
				</select>
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.custom_field_type"}}</label>
				<select name="field_type" class="ui dropdown">
					<option value="dropdown">Dropdown</option>
					<option value="text">Text</option>
					<option value="number">Number</option>
					<option value="date">Date</option>
					<option value="checkbox">Checkbox</option>
					<option value="url">URL</option>
				</select>
			</div>
		</div>
		<div class="two fields">
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.custom_field_options"}}</label>
				<input name="options" placeholder='["Option 1","Option 2","Option 3"]'>
				<p class="help">{{ctx.Locale.Tr "org.settings.custom_field_options_help"}}</p>
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.custom_field_description"}}</label>
				<input name="description" placeholder="Help text shown to users">
			</div>
		</div>
		<div class="field">
			<div class="ui checkbox">
				<input type="checkbox" name="required">
				<label>{{ctx.Locale.Tr "org.settings.custom_field_required"}}</label>
			</div>
			<p class="help">{{ctx.Locale.Tr "org.settings.custom_field_required_help"}}</p>
		</div>
		<button class="ui primary button" type="submit">{{ctx.Locale.Tr "org.settings.custom_field_add"}}</button>
	</form>
</div>
{{template "org/settings/layout_footer" .}}
