extends layout

block variables
	- var active = 'docs'

block title 
	|  - Documentation

block content
	include _header

	.container
		section.row.spacious(ng-controller='DocsCtrl')
			.col-sm-5.col-md-3.ks-beforeload
				p Loading...
			.col-sm-5.col-md-3.ks-afterload
				// img(src="/img/kickstrap-logo.png", style="width: 248px")
				h1.kickstrap-logo(style="font-size: 50px") #{title}
				p.lead Documentation
				p
					input.form-control(type='text', ng-model='sectionInput', placeholder='Search Sections', ng-change="setSelectedSection(filteredSections[0])")
				ul.nav.nav-pills.nav-stacked
					li(
						style="cursor: pointer"
						sly-repeat='section in (filteredSections = (sections | filter: sectionInput))'
						class="{{selectedSection.path == section.path ? 'active' : '' }}"
					) 
						a(ng-click="setSelectedSection(section)") {{section.name}}
			.col-sm-7.col-md-9.readable(ng-view ng-animate)
			.col-sm-7.col-md-9(ng-hide="selectedSection.name")
				p
					em.text-muted
						span.hidden-xs Select an article to read from the left.
						span.visible-xs Select an article to read above.
			.col-sm-7.col-md-9.col-lg-offset-3
				.center-block#ads