{namespace sg = TYPO3\CMS\Styleguide\ViewHelpers}

<f:be.container
	includeCssFiles="{
		1: '{f:uri.resource(path:\'Css/styles.css\')}'
	}"
	includeRequireJsModules="{0: 'TYPO3/CMS/Styleguide/FindIcons'}"
	loadExtJsTheme="0"
	loadJQuery="1"
>
	<div class="typo3-fullDoc">
		<div id="typo3-docheader">
			<div class="typo3-docheader-functions">
				<div class="left">
					<f:be.buttons.csh />
					<f:be.menus.actionMenu>
						<f:be.menus.actionMenuItem label="{f:translate(key: 'index')}" controller="Styleguide" action="index" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'typography')}" controller="Styleguide" action="typography" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'tca')}" controller="Styleguide" action="tca" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'trees')}" controller="Styleguide" action="trees" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'tab')}" controller="Styleguide" action="tab" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'tables')}" controller="Styleguide" action="tables" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'forms')}" controller="Styleguide" action="forms" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'avatar')}" controller="Styleguide" action="avatar" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'buttons')}" controller="Styleguide" action="buttons" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'callout')}" controller="Styleguide" action="callout" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'flashMessages')}" controller="Styleguide" action="flashMessages" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'icons')}" controller="Styleguide" action="icons" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'debug')}" controller="Styleguide" action="debug" />
						<f:be.menus.actionMenuItem label="{f:translate(key: 'helpers')}" controller="Styleguide" action="helpers" />
					</f:be.menus.actionMenu>
				</div>

				<div class="right">
				</div>
			</div>

			<div class="typo3-docheader-buttons">
				<div class="left">
					<f:render section="iconButtons" />
				</div>
				<div class="right">
					<a href="#" onClick="document.location.reload();"><sg:spriteManagerIcon iconName="actions-system-refresh" /></a>
					<f:be.buttons.shortcut />
				</div>
			</div>
		</div>

		<div id="typo3-docbody">
			<div id="typo3-inner-docbody">
				<h1><f:render section="headline" /></h1>

				<f:render section="content" />
			</div>
		</div>
	</div>
</f:be.container>