{{template "repo/settings/layout_head" (dict "pageClass" "repository settings custom-fields")}}
	<div class="user-main-content twelve wide column">
		<h4 class="ui top attached header tw-flex tw-items-center tw-justify-between">
			<span>{{svg "octicon-list-unordered" 16}} {{ctx.Locale.Tr "repo.settings.custom_fields"}}</span>
			<button class="ui primary small button show-modal" data-modal="#custom-field-create-modal">
				{{svg "octicon-plus" 14}} {{ctx.Locale.Tr "repo.settings.custom_field_new"}}
			</button>
		</h4>
		<div class="ui attached segment">
			{{if .CustomFields}}
				<table class="ui compact table">
					<thead>
						<tr>
							<th>{{ctx.Locale.Tr "repo.settings.custom_field_name"}}</th>
							<th>{{ctx.Locale.Tr "repo.settings.custom_field_type"}}</th>
							<th>{{ctx.Locale.Tr "repo.settings.custom_field_required"}}</th>
							<th>{{ctx.Locale.Tr "repo.licenses.status"}}</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{{range .CustomFields}}
						<tr>
							<td>
								<strong>{{.Name}}</strong>
								{{if .Description}}<br><small class="text grey">{{.Description}}</small>{{end}}
							</td>
							<td><code>{{.FieldType}}</code></td>
							<td>{{if .Required}}{{svg "octicon-check" 14}}{{end}}</td>
							<td>
								{{if .IsActive}}<span class="ui green label">{{ctx.Locale.Tr "repo.licenses.active"}}</span>
								{{else}}<span class="ui grey label">{{ctx.Locale.Tr "repo.licenses.inactive"}}</span>{{end}}
							</td>
							<td class="tw-text-right tw-flex tw-gap-1 tw-justify-end">
								<button class="ui tiny button show-modal"
									data-modal="#custom-field-edit-modal"
									data-modal-custom-field-edit-modal-field-id="{{.ID}}"
									data-modal-custom-field-edit-modal-field-name="{{.Name}}"
									data-modal-custom-field-edit-modal-field-type="{{.FieldType}}"
									data-modal-custom-field-edit-modal-field-desc="{{.Description}}"
									data-modal-custom-field-edit-modal-field-options="{{.Options}}"
									data-modal-custom-field-edit-modal-field-required="{{.Required}}"
									data-modal-custom-field-edit-modal-field-active="{{.IsActive}}"
									data-modal-custom-field-edit-modal-field-order="{{.SortOrder}}"
									title="{{ctx.Locale.Tr "edit"}}">
									{{svg "octicon-pencil" 14}}
								</button>
								<button class="ui tiny red button link-action"
									data-url="{{$.RepoLink}}/settings/custom-fields/{{.ID}}/delete"
									data-modal-confirm="{{ctx.Locale.Tr "repo.settings.custom_field_confirm_delete"}}"
									title="{{ctx.Locale.Tr "delete"}}">
									{{svg "octicon-trash" 14}}
								</button>
							</td>
						</tr>
						{{end}}
					</tbody>
				</table>
			{{else}}
				<div class="empty-placeholder">
					{{svg "octicon-list-unordered" 48}}
					<h2>{{ctx.Locale.Tr "repo.settings.custom_fields_none"}}</h2>
					<p>{{ctx.Locale.Tr "repo.settings.custom_fields_none_desc"}}</p>
				</div>
			{{end}}
		</div>
	</div>

{{/* ── Create Custom Field Modal ── */}}
<div class="ui small modal" id="custom-field-create-modal">
	<div class="header">{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.settings.custom_field_new"}}</div>
	<div class="content">
		<form class="ui form" method="post" action="{{.RepoLink}}/settings/custom-fields">
			{{$.CsrfTokenHtml}}
			<div class="required field">
				<label>{{ctx.Locale.Tr "repo.settings.custom_field_name"}}</label>
				<input name="name" required placeholder="e.g. Priority, Sprint, Client Name">
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "repo.settings.custom_field_type"}}</label>
				<select name="field_type" class="ui dropdown">
					<option value="text">Text</option>
					<option value="number">Number</option>
					<option value="date">Date</option>
					<option value="dropdown">Dropdown</option>
					<option value="checkbox">Checkbox</option>
					<option value="url">URL</option>
				</select>
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "repo.settings.custom_field_description"}}</label>
				<input name="description" placeholder="Help text shown below the field">
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "repo.settings.custom_field_options"}}</label>
				<input name="options" placeholder='["Option A","Option B","Option C"]'>
				<p class="help">{{ctx.Locale.Tr "repo.settings.custom_field_options_help"}}</p>
			</div>
			<div class="two fields">
				<div class="field">
					<div class="ui checkbox">
						<input name="required" type="checkbox">
						<label>{{ctx.Locale.Tr "repo.settings.custom_field_required"}}</label>
					</div>
				</div>
				<div class="field">
					<label>{{ctx.Locale.Tr "repo.settings.custom_field_sort_order"}}</label>
					<input name="sort_order" type="number" value="0" min="0">
				</div>
			</div>
			{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" (ctx.Locale.Tr "repo.settings.custom_field_create"))}}
		</form>
	</div>
</div>

{{template "repo/settings/layout_footer" .}}
