<div class="container-fluid settings">
	<div class="page-header">
		<h1>${toolbar.settings}</h1>
	</div>
	<form name="settingsForm" ng-submit="save()">
		<div class="row">
			<div class="span2">
				<ul class="nav nav-pills nav-stacked">
					<li ng-class="{active: !tab || tab == 'general'}" class="pointer">
						<a ng-click="tab = 'general'">${settings.general}</a>
					</li>
					<li ng-class="{active: tab == 'css'}" class="pointer">
						<a ng-click="tab = 'css'">${settings.appearance}</a>
					</li>
				</ul>
			</div>
			<div class="span10">
				<div class="tab-content">
					<div class="tab-pane" ng-class="{active: !tab || tab == 'general'}">
						<div class="form-horizontal">
							<div class="control-group">
								<label class="control-label">${settings.general.language}</label>
								<div class="controls">
									<select name="language" ng-model="settings.language" class="input-block-level" 
										ng-options="id as label for (id,label) in ServerService.supportedLanguages" required>
									</select>
									<span class="help-block">
										<a href="https://github.com/Athou/commafeed#translate-commafeed-into-your-language" target="_blank">
											${settings.general.language.contribute}
										</a>
									</span>
								</div>
							</div>
							<div class="control-group">
								<label class="checkbox">
									<input type="checkbox" name="showRead"
										ng-model="settings.showRead" />
									${settings.general.show_unread}
								</label>
							</div>
							<div class="control-group">
								<label class="checkbox">
									<input type="checkbox" name="socialButtons"
										ng-model="settings.socialButtons" />
									${settings.general.social_buttons}
								</label>
							</div>
							<div class="control-group">
								<label class="checkbox">
									<input type="checkbox" name="scrollMarks"
										ng-model="settings.scrollMarks" />
									${settings.general.scroll_marks}
								</label>
							</div>
						</div>
					</div>
					<div class="tab-pane" ng-class="{active: tab == 'css'}">
						<div>
							<label>${settings.theme}</label>
							<select ng-model="settings.theme" ng-options="theme for theme in themes"></select>
							<span class="help-block">
								<a href="https://github.com/Athou/commafeed#themes" target="_blank">
									${settings.submit_your_theme}
								</a>
							</span>
						</div>
						<div>
							<label>${settings.custom_css}</label>
							<textarea ng-model="settings.customCss" class="input-block-level" rows="20">
							</textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="form-actions">
			<button type="submit" class="btn btn-primary">${global.save}</button>
			<button type="button" class="btn" ng-click="cancel()">${global.cancel}</button>
		</div>
	</form>
</div>