{namespace neos=Neos\Neos\ViewHelpers}
<div class="neos-row-fluid neos-module-container">
	<fieldset class="neos-span5">
		<legend>{neos:backend.translate(id: 'userSettings.personalData', source: 'Modules', package: 'Neos.Neos')}</legend>

		<div class="neos-control-group">
			<label class="neos-control-label" for="title">{neos:backend.translate(id: 'personName.title', source: 'Main', package: 'Neos.Party')}</label>
			<div class="neos-controls neos-controls-row">
				<f:form.textfield property="name.title" id="title" class="neos-span12" />
			</div>
		</div>
		<div class="row">
			<div class="neos-control-group neos-span7{f:validation.ifHasErrors(for: 'user.name', then: ' neos-error')}">
				<label class="neos-control-label" for="firstName">{neos:backend.translate(id: 'personName.firstName', source: 'Main', package: 'Neos.Party')}</label>
				<div class="neos-controls">
					<f:form.textfield property="name.firstName" id="firstName" placeholder="{neos:backend.translate(id: 'personName.firstName', source: 'Main', package: 'Neos.Party')}" class="neos-span12" />
					<f:render partial="Module/Shared/FieldValidationResults" arguments="{fieldname: 'user.name'}"/>
				</div>
			</div>

			<div class="neos-control-group neos-span5">
				<label class="neos-control-label" for="middleName">&nbsp;</label>
				<div class="neos-controls">
					<f:form.textfield property="name.middleName" id="middleName" placeholder="{neos:backend.translate(id: 'personName.middleName', source: 'Main', package: 'Neos.Party')}" class="neos-span12" />
				</div>
			</div>
		</div>
		<div class="row">
			<div class="neos-control-group neos-span7">
				<label class="neos-control-label" for="lastName">{neos:backend.translate(id: 'personName.lastName', source: 'Main', package: 'Neos.Party')}</label>
				<div class="neos-controls">
					<f:form.textfield property="name.lastName" id="lastName" placeholder="{neos:backend.translate(id: 'personName.lastName', source: 'Main', package: 'Neos.Party')}" class="neos-span12" />
				</div>
			</div>

			<div class="neos-control-group neos-span5">
				<label class="neos-control-label" for="otherName">&nbsp;</label>
				<div class="neos-controls">
					<f:form.textfield property="name.otherName" id="otherName" placeholder="{neos:backend.translate(id: 'personName.otherName', source: 'Main', package: 'Neos.Party')}" class="neos-span12" />
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="neos-span5 neos-offset1">
		<legend>{neos:backend.translate(id: 'userSettings.preferences', source: 'Modules', package: 'Neos.Neos')}</legend>

		<div class="neos-control-group">
			<label class="neos-control-label" for="interfaceLanguage">{neos:backend.translate(id: 'userSettings.preferences.interfaceLanguage', source: 'Modules', package: 'Neos.Neos')}</label>
			<div class="neos-controls">
				<f:form.select property="preferences.interfaceLanguage" id="interfaceLanguage" options="{settings.userInterface.availableLanguages}" prependOptionLabel="{neos:backend.translate(id: 'userSettings.preferences.useDefaultInterfaceLanguage', source: 'Modules', package: 'Neos.Neos')}" />
			</div>
		</div>
	</fieldset>
</div>
<div class="neos-row-fluid">
	<fieldset class="neos-span11">
		<legend>{neos:backend.translate(id: 'userSettings.accounts', source: 'Modules', package: 'Neos.Neos')}</legend>
		<div class="neos-control-group">
			<table class="neos-table">
				<thead>
				<tr>
					<th>{neos:backend.translate(id: 'userSettings.accounts.username', source: 'Modules', package: 'Neos.Neos')}</th>
					<th>{neos:backend.translate(id: 'userSettings.accounts.roles', source: 'Modules', package: 'Neos.Neos')}</th>
					<th>{neos:backend.translate(id: 'userSettings.accounts.authenticationProvider', source: 'Modules', package: 'Neos.Neos')}</th>
					<th></th>
				</tr>
				</thead>
				<tbody>
				<f:for each="{user.accounts}" as="account">
					<tr>
						<td><i class="fas fa-user icon-white"></i>{account.accountIdentifier}</td>
						<td><f:render partial="Module/Shared/Roles" arguments="{roles: account.roles}" /></td>
						<td><span title="{account.authenticationProviderName}"><neos:backend.authenticationProviderLabel identifier="{account.authenticationProviderName}"/></span></td>
						<td class="neos-action">
							<div class="neos-pull-right">
								<f:link.action action="editAccount" arguments="{account: account}" class="neos-button" title="{neos:backend.translate(id: 'clickToEdit', source: 'Modules', package: 'Neos.Neos')}" additionalAttributes="{data-neos-toggle: 'tooltip'}"><i class="fas fa-pencil-alt icon-white"></i></f:link.action>
							</div>
						</td>
					</tr>
				</f:for>
				</tbody>
			</table>
		</div>
	</fieldset>
</div>
<div class="neos-row-fluid">
	<fieldset class="neos-span11">
		<legend>{neos:backend.translate(id: 'userSettings.electronicAddresses', source: 'Modules',  package: 'Neos.Neos')}</legend>
		<div class="neos-control-group">
			<table class="neos-table" id="electronicAddresses">
				<thead>
				<tr>
					<th>{neos:backend.translate(id: 'electronicAddress.type', source: 'Main', package: 'Neos.Party' )}</th>
					<th>{neos:backend.translate(id: 'electronicAddress.usage', source: 'Main', package: 'Neos.Party' )}</th>
					<th>{neos:backend.translate(id: 'electronicAddress.identifier', source: 'Main', package: 'Neos.Party' )}</th>
					<th class="neos-aCenter">{neos:backend.translate(id: 'electronicAddress.primary', source: 'Main', package: 'Neos.Party')}</th>
					<th></th>
				</tr>
				</thead>
				<tbody>
				<f:for each="{user.electronicAddresses}" key="index" as="electronicAddress">
					<tr>
						<td>
							<div class="neos-select">
								<f:form.select property="electronicAddresses.{index}.type" options="{electronicAddressTypes}" />
							</div>
						</td>
						<td>
							<div class="neos-select">
								<f:form.select property="electronicAddresses.{index}.usage" options="{electronicAddressUsageTypes}" />
							</div>
						</td>
						<td class="neos-control-group{f:validation.ifHasErrors(for: 'user.electronicAddresses', then: ' neos-error')}">
							<f:form.textfield property="electronicAddresses.{index}.identifier" class="neos-input-medium" />
							<f:render partial="Module/Shared/FieldValidationResults" arguments="{fieldname: 'user.electronicAddresses.{index}.identifier'}"/>
						</td>
						<td class="neos-aCenter check">
							<label class="neos-radio">
								<f:form.radio property="primaryElectronicAddress" value="{electronicAddress}" checked="{f:if(condition: '{user.primaryElectronicAddress} === {electronicAddress}', then: 'checked')}" /><span></span>
							</label>
						</td>
						<td class="neos-action">
							<div class="neos-pull-right">
								<button type="button" class="neos-button neos-button-danger" title="{neos:backend.translate(id: 'clickToDelete', source: 'Modules', package: 'Neos.Neos')}" data-toggle="modal" href="#electronicAddress-{index}">
									<i class="fas fa-trash-alt icon-white"></i>
								</button>
								<div class="neos-hide" id="electronicAddress-{index}">
									<div class="neos-modal-centered">
										<div class="neos-modal-content">
											<div class="neos-modal-header">
												<button type="button" class="neos-close neos-button" data-dismiss="modal"></button>
												<div class="neos-header">{neos:backend.translate(id: 'userSettings.electronicAddresses.buttonDelete', source: 'Modules', package: Neos.Neos)} "{electronicAddress.type} ({electronicAddress.identifier})"?</div>
											</div>
											<div class="neos-modal-footer">
												<a href="#" class="neos-button" data-dismiss="modal">{neos:backend.translate(id: 'cancel',source: 'Modules', package: 'Neos.Neos')}</a>
												<button form="postHelper" formaction="{f:uri.action(action: 'deleteElectronicAddress', arguments: {user: user, electronicAddress: electronicAddress})}" type="submit" class="neos-button neos-button-danger" title="{neos:backend.translate(id: 'delete', value: 'delete')}">{neos:backend.translate(id: 'userSettings.electronicAddresses.buttonDelete.confirmation', source: 'Modules', package: 'Neos.Neos')}</button>
											</div>
										</div>
									</div>
									<div class="neos-modal-backdrop neos-in"></div>
								</div>
							</div>
						</td>
					</tr>
				</f:for>
				</tbody>
			</table>
			<div class="neos-pull-right">
				<f:link.action action="newElectronicAddress" arguments="{user: user}" class="neos-button" title="{neos:backend.translate(id: 'userSettings.electronicAddresses.clickAddElectronicAddress', source: 'Modules', package: 'Neos.Neos')}">{neos:backend.translate(id: 'userSettings.electronicAddresses.addElectronicAddress', source: 'Modules', package: 'Neos.Neos')}</f:link.action>
			</div>
		</div>

	</fieldset>
</div>