<xf:title>{{ phrase('transmogrification_reset_control') }}</xf:title>

<xf:css>
	.transmogrifier
	{
		border: none;
		padding: 10px 0;
		width: 310px;
		margin: 30px auto;

		background-color: yellow;
		background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgb(0,0,0) 15px, rgb(0,0,0) 30px);
	}

	.transmogrifier div
	{
		padding: 20px 0;
		background-color: #f0f0f0;
		border: 1px solid black;
		width: 280px;
		text-align: center;
		margin: auto;
	}

	.transmogrifier button
	{
		width: 240px;
		background-color: white;
		border: 2px outset black;
		color: red;
		font-size: 12pt;
		font-weight: bold;
		text-transform: uppercase;
		padding: 10px;
		box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
	}

	.transmogrifier button:active
	{
		background-color: #ffff33;
		-webkit-box-shadow: 0 0 0 0 transparent;
		-moz-box-shadow: 0 0 0 0 transparent;
		-khtml-box-shadow: 0 0 0 0 transparent;
		box-shadow: 0 0 0 0 transparent;
		text-shadow: 0 0 0 transparent, 0 0 10px white;
	}

	.transmogrifier button:hover
	{
		background-color: #ffff77;
	}
</xf:css>

<xf:form action="{{ link('tools/transmogrifier-reset') }}" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:inforow rowtype="confirm">
				{{ phrase('you_sure_you_want_to_issue_transmogrification_reset_imperative') }}
				<div class="transmogrifier">
					<div><xf:button type="submit" icon="confirm">{{ phrase('reset_transmogrifier') }}</xf:button></div>
				</div>
			</xf:inforow>
		</div>
	</div>
</xf:form>