doctype html 
html
	head
		title Tron Interactive Demo	
		link(rel='stylesheet', type='text/css', href='dist/index.min.css')
		script(type='text/javascript', src='dist/tron.js')
	body
		div(class='row')
			div(class='col-md-8 col-md-offset-2')
				div(class='row')
						div(class='jumbotron', style='padding: 30px')
							h1 Tron 
								small interactive demo
							p Chart and metrics display component
							a(class='btn btn-primary' href='doc') Documentation
							a(class='btn btn-primary' href='doc/example.js.html' style='margin-left: 10px') Examples
				div(class='row')
					div(class='col-xs-6')
						h4 Remote placement data with id
						p This shows data returned from a call to remote server with id. It also features a dismissable overlay message
						div(class='input-group input-group-sm', style='width: 300px')
							input(id='tron-remote-input' type='text', class='form-control', placeholder='Provide an id for the request')
							span(class='input-group-btn')
								button(class='btn btn-primary', id='tron-update') Update						
						div(class='tron')
					div(class='col-xs-6')
						h4 Placeholder
						p This placeholder has metrics section, info and chart disabled and messages still enabled. You can show messages by clicking the change and save buttons
						div(class='btn-group', role='group', aria-label='...')
							button(class='btn btn-primary btn-sm', id='tron-placeholder-change') Change
							button(class='btn btn-primary btn-sm', id='tron-placeholder-save') Save
						div(id='tron-placeholder')
				div(class='row')
					div(class='col-xs-6')
						h4 Remote placement data with POST function
						button(class='btn btn-primary btn-sm', id='tron-post-update') Update
						div(id='tron-post')
					div(class='col-xs-6')
						h4 Post data
						textarea(id='tron-post-data', style='width: 100%; min-height: 350px') 
				div(class='row')
					div(class='col-xs-6')
						h4 Local placement data no points within budget
						p This shows the behavior when no data is within budget as well as the resize and brush/focus features
						button(class='btn btn-primary btn-sm', id='resize') Resize
						button(class='btn btn-primary btn-sm', id='focus' style='margin-left: 10px') Focus
						div(id='tron-demo')
					div(class='col-xs-6', style='display: flex; align-items: center; height: 500px; justify-content: center; flex-wrap: wrap;')
						h4(style='display: block; color:#00abbd; font-size:50px; align-self: flex-end; margin-bottom: -12px;') TRON
						hr(style='border-top: 2px solid #00abbd; width: 100%; align-self: flex-start; margin: 0;')
				div(class='row')
					div(class='col-xs-6')
						h4 Local placement data alternative x axis type
						p This shows the behavior when an alternative x axis type is specified with accompanying translations
						div(id='tron-axis-type')
				div(class='row')
					div(class='col-xs-6')
						h4 No data
						p This shows the error message when there is no data returned
						div(id='tron-error')
					div(class='col-xs-6')
						h4 Bad Request
						p Generic 400 Error
						div(id='tron-bad-request')
		
		script(type='text/javascript', src='js/example.js')