const inputFields = {};

function constructUI() {
	return new OO.ui.FieldsetLayout({
		label: "Ask a question at the Articles for Creation Help Desk",
		classes: [ "container" ],
		items: [
			inputFields.titleLayout = new OO.ui.FieldLayout(inputFields.titleInput = new mw.widgets.TitleInputWidget({
				value: (mw.util.getParamValue("page") || "").replace(/_/g, " "),
				placeholder: "Enter the draft title, usually begins with \"Draft:\""
			}), {
				label: "Draft title",
				align: "top",
				help: "This should be pre-filled if you clicked the link while on the draft page",
				helpInline: true
			}),
			
			inputFields.textLayout = new OO.ui.FieldLayout(inputFields.textInput = new OO.ui.MultilineTextInputWidget({
				placeholder: "Enter your question here",
				multiline: true,
				autosize: true,
				maxRows: 5
			}), {
				label: "Question",
				align: "top",
				help: "Please explain exactly what you would like help with. Blank posts may be removed.",
				helpInline: true
			}),
			
			inputFields.submitLayout = new OO.ui.FieldLayout(inputFields.submitButton = new OO.ui.ButtonWidget({
				label: "Submit",
				flags: [ "progressive", "primary" ]
			}))
		]
	});
}

function init() {
	const ui = constructUI();
	
	$("#bodyContent").empty().append(ui.$element);
	$("#firstHeading").text("Submitting a question ...");
}

$.when($.ready).then(init);