!!!
%html{ lang: I18n.locale.to_s }
	%head
		%meta{ charset: 'utf-8' }
		%meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
		%title= (yield :title) + (content_for?(:title) ? (_!' | ') : '') + (_!'Bike!Bike!')
		%meta{ name: 'description', content: (yield_or_default :description, I18n.t('page_descriptions.home')) }
		= csrf_meta_tags
		= inject_css!
		- (@stylesheets || []).each do |css|
			= inject_css! css
		%link{ href: asset_path('favicon.ico'), rel: 'shortcut icon', type: 'image/x-icon' }
		%link{ href: asset_path('favicon.ico'), rel: 'icon', type: 'image/x-icon' }
		%link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
		%link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' }
		%link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
		%link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
		= yield :head

	%body{ class: page_style }
		= render 'shared/navbar'
		%main#main
			- flash.each do |key, msg|
				= content_tag :div, msg, :id => key
			%header#banner
				= yield :banner
			- if @submenu
				=row do
					= columns(medium: 12) do
						%nav.sub-menu
							- @submenu.each do |href,key|
								%a{href: href, class: request.fullpath.start_with?(href) ? 'current' : nil}=_"menu.submenu.#{key}"
			- if content_for?(:side_bar)
				%aside#side-bar
					= yield :side_bar
			- if has_content?
				#content=yield
			- else
				= yield
		= yield :garbage
		#footer
			%footer= render 'shared/footer'
		- if content_for?(:footer_scripts)
			= yield :footer_scripts
			-# if content_for?(:scripts) || content_for?(:dom_ready)
			-#	#{content_for?(:scripts) ? "#{yield :scripts}" : ''}#{content_for?(:dom_ready) ? "$(function(){#{yield :dom_ready}});" : ''}
		:javascript
			(function() {
				if (!String.prototype.trim) {
					(function() {
						var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
						String.prototype.trim = function() {
							return this.replace(rtrim, '');
						};
					})();
				}

				function classExists(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));}
				function addClass(elem,className){if(classExists(elem,className)){return true;}elem.className += ' '+className;}
				function removeClass(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c.trim();}

				[].slice.call(document.querySelectorAll('.input-field input')).forEach(function(inputEl) {
					if (inputEl.value.trim() === '') {
						inputEl.parentNode.className = inputEl.parentNode.className + ' empty';
					}

					inputEl.addEventListener('focus', onInputFocus);
					inputEl.addEventListener('blur', onInputBlur);
				});

				function onInputFocus(ev) {
					removeClass(ev.target.parentNode, 'empty')
				}

				function onInputBlur(ev) {
					if (ev.target.value.trim() === '') {
						addClass(ev.target.parentNode, 'empty');
					}
				}
			})();