<section id="viewport" class="clearfix">
	<div class="flyout-from-right" ng-class="flyoutOpen ? 'open' : 'closed'">
		<div class="flyout-content" ng-class="activePanel == 'themes' ? 'open' : 'closed'" id="themes-panel" ng-controller="ThemesController" bl-active-theme-switchable bl-render-themes>
			<div bl-close-flyout-panel></div>

			<section class="row inner-content">			
				<div class="col-sm-6" id="themes-list"></div>
				<div class="col-sm-6" id="themes-preview"></div>
			</section>

			<section class="row flyout-panel-toolbar">
				<div class="inner">
					<button class="btn btn-success" id="create-new-theme-button">{{ 'createNew' | translate }}</button>

					<select ng-model="filter.type" bl-themes-filter >
						<option value="">{{ 'all' | translate }}</option>
						<option value="bootswatch">{{ 'bootswatch' | translate }}</option>
						<option value="yours">{{ 'yours' | translate }}</option>
						<option value="public">{{ 'architectPublic' | translate }}</option>
					</select>

					<input type="text" placeholder="Search..." ng-model="filter.search">

					<button class="btn btn-info" bl-export-theme ng-disabled="isDemo">{{ 'export' | translate }}</button>

					<div class="error-message" ng-if="export.errorMessage"><span class="text-danger">{{ export.errorMessage }}</span></div>
				</div>
			</section>
		</div>
		<div class="flyout-content" ng-class="activePanel == 'themesCreator' ? 'open' : 'closed'" id="bootstrap-theme-creator" ng-controller="ThemesCreatorController" bl-theme-creator>
			<div bl-close-flyout-panel></div>
			<input id="theme-creator-color-picker">
			<section class="row inner-content">
				<div id="custom-less" ng-class="customLessOpen ? 'open' : 'closed'">
					<div class="header">{{ 'editCustomLess' | translate }} <i class="fa fa-times" ng-click="toggleCustomLessPanel()"></i></div>
					<div id="custom-less-editor"></div>
				</div>
				<div class="col-sm-2 vars-groups-list" bl-pretty-scrollbar>
					<ul class="list-unstyled">
						<li ng-class="bootstrap.activeGroup == name ? 'active' : ''"  ng-repeat="(name, value) in bootstrap.currentTheme" data-name="{{ name }}">
							<i ng-if="name == bootstrap.activeGroup" style="padding-right: 5px;" class="fa fa-angle-double-right"></i>
							<span>{{ name }}</span>
						</li>
					</ul>
				</div>
				<div class="col-sm-2 vars-values-list" bl-pretty-scrollbar>
					<ul class="list-unstyled">
						<li ng-repeat="variable in bootstrap.activeVars.variables">
							<div class="form-group">
								<label>{{ variable.name }}</label>
								<input data-name="{{ variable.name }}" ng-style="isColor(variable.value) ? getPreviewStyle(variable.value) : ''" class="form-control" type="text" ng-model="variable.value" ng-model-options="{ debounce: 400 }">
							</div>
						</li>
					</ul>
				</div>
				<div class="col-sm-8 theme-creator-preview"></div>
			</section>
			<section class="row flyout-panel-toolbar" id="theme-creator-toolbar">
				<div ng-click="openPanel('themes')" data-toggle="tooltip" data-placement="top" title="Back to themes" class="back-icon">
					<i class="fa fa-chevron-left"></i>
				</div>
				
				<div class="inner">
					<button type="button" ng-click="applyChanges()" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Apply changes to preview">{{ 'apply' | translate }}</button>
					<button type="button" ng-click="toggleCustomLessPanel()" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Add or edit custom less">{{ 'customLess' | translate }}</button>

					<input type="text" ng-model="editing.name" placeholder="Name...">
					<select ng-model="editing.type">
						<option value="private">{{ 'private' | translate }}</option>
						<option value="public">{{ 'public' | translate }}</option>
					</select>
					<button class="btn btn-success" ng-disabled="editing.saving" ng-click="saveCurrent()">{{ 'save' | translate }}</button>
					
					<div class="loader" ng-if="editing.saving"><i class="fa fa-spinner fa-spin"></i></div>
					<div class="error-message" ng-if="editing.errorMessage"><span class="text-danger">{{ editing.errorMessage }}</span></div>
					<div class="save-status">
						<span ng-if="!dirty" class="text-success">{{ 'allChangesSaved' | translate }}</span>
						<span ng-if="dirty" class="text-danger">{{ 'unsavedChanges' | translate }}</span>
					</div>
				</div>
			</section>
		</div>
		<div class="flyout-content" ng-class="activePanel == 'export' ? 'open' : 'closed'" ng-controller="ExportController" id="export-panel" bl-render-export-panel>
			<div bl-close-flyout-panel></div>

			<div ng-if="isDemo" class="demo-overlay"><p class="alert alert-info">Export functionality is disabled on demo site. Normally you would be able to export an entire project, a single page or image(s) in a .zip file or copy any of the pages markup or styles into clipboard.</p></div>

			<div class="row inner-content" ng-class="{demo: isDemo}">

				<div class="images-column" ng-class="images.length ? 'col-md-2' : 'hidden'" bl-export-images>
					<h2><span>{{ 'images' | translate }}</span></h2>
					<ul class="list-unstyled">
						<li ng-repeat="url in images" ng-style="{'background-image': 'url('+url+')'}"></li>
					</ul>
				</div>
				<div class="html-column" ng-class="images.length ? 'col-md-5' : 'col-md-6'">
					<h2><span>{{ 'markup' | translate }}</span> <button id="copy-html" class="btn btn-default">{{ 'copyToClipboard' | translate }}</button></h2>
					<div id="html-export-preview"></div>
				</div>
				<div class="css-column" ng-class="images.length ? 'col-md-5' : 'col-md-6'">
					<h2><span>{{ 'style' | translate }}</span> <button id="copy-css" class="btn btn-default">{{ 'copyToClipboard' | translate }}</button></h2>
					<div id="css-export-preview"></div>
				</div>
			</div>
			
			<div class="row flyout-panel-toolbar" ng-class="{demo: isDemo}">
				<div class="center-block">
					<select ng-model="activePage.name" ng-change="changeExportPage()">
						<option value="{{ page.name }}" ng-repeat="page in project.active.pages">{{ page.name }}</option>
					</select>

					<button ng-disabled="!activePage" bl-export-page class="btn btn-primary"><i class="fa fa-download"></i> Export Page</button>
					<button bl-export-project class="btn btn-success"><i class="fa fa-download"></i> {{ 'exportProject' | translate }}</button>
				</div>
			</div>
		</div>
		<div class="flyout-content" ng-class="activePanel == 'pages' ? 'open' : 'closed'" ng-controller="PagesController" id="pages-panel">
			<div bl-close-flyout-panel></div>
			<div class="row inner-content">
				<section class="col-lg-2 col-xs-4" id="pages-list">
					<div class="header">
						<div class="pull-left">{{ 'pages' | translate }}</div>
						<button class="btn btn-primary pull-right" ng-click="createNewPage()"><i class="fa fa-plus"></i> {{ 'add' | translate }}</button>
					</div>
					<div class="body">
						<ul class="list-unstyled">
							<li ng-repeat="page in project.active.pages" ng-click="project.changePage(page.name)" ng-class="{active: page.name == project.activePage.name}">
								<span class="name">{{ page.name }}</span>
							</li>
						</ul>
					</div>
					<div class="footer clearfix">
						<button ng-click="emptyProject()" class="btn btn-danger pull-left"><i class="fa fa-trash"></i> {{ 'emptyProject' | translate }}</button>
						<div ng-if="loading" class="spinner pull-right"><i class="fa fa-spinner fa-spin"></i></div>
					</div>
				</section>
				<section class="col-lg-10 col-xs-8" id="edit-page">
					<div class="inner" ng-class="{ hidden: !project.activePage }">
						<div class="page-settings">
							<h2>{{ 'edit' | translate }} <span>{{ project.activePage.name }}</span> {{ 'page' | translate }}</h2>

							<div class="form-group">
								<label for="page-name">{{ 'pageName' | translate }}</label>
								<input type="text" ng-disabled="project.activePage.name == 'Index'" class="form-control" ng-model="project.activePage.name" name="page-name">
							</div>

							<div class="form-group">
								<label for="page-title">{{ 'pageTitle' | translate }}</label>
								<input type="text" class="form-control" ng-model="project.activePage.title" name="page-title">
							</div>

							<div class="form-group">
								<label for="page-description">{{ 'pageDescription' | translate }}</label>
								<textarea ng-model="project.activePage.description" name="page-description" rows="5" class="form-control"></textarea>
							</div>

							<div class="form-group">
								<label for="page-tags">{{ 'pageTags' | translate }}</label>
								<textarea ng-model="project.activePage.tags" name="page-tags" rows="5" class="form-control"></textarea>
							</div>
						</div>
						<div class="page-preview" bl-render-page-preview>
							
						</div>
					</div>
					<div class="footer">
						<button class="btn btn-default btn-lg" ng-disabled="project.activePage.name.toLowerCase() === 'index'" ng-click="deletePage()">{{ 'deletePage' | translate }}</button>
						<button class="btn btn-default btn-lg" ng-click="copyPage()">{{ 'copyPage' | translate }}</button>
						<button class="btn btn-success btn-lg" ng-click="savePage()">{{ 'savePage' | translate }}</button>
					</div>
					<div ng-class="{ hidden: project.activePage }" class="no-page-selected">{{ 'noPagesFound' | translate }}</div>
				</section>			
			</div>
		</div>
		<div class="flyout-content" ng-class="activePanel == 'settings' ? 'open' : 'closed'" ng-controller="SettingsController" id="settings-panel">
			<div bl-close-flyout-panel></div>
			<div class="row inner-content">
				<div class="col-md-1 categories">
					<ul class="list-unstyled" bl-settings-category-switchable>
						<li ng-repeat="category in categories" data-category="{{ category }}" ng-class="{ active: category == activeCategory }">{{ category.toTitleCase() }}</li>
					</ul>
				</div>
				<div class="col-md-11 settings">
					<h2>{{ activeCategory.toTitleCase() }}</h2>
					<div class="form-group" ng-repeat="setting in activeSettings">
						<div class="with-toggle" ng-if="isBoolean(setting.value)">
							<div class="label">{{ setting.name.toTitleCase() }}:</div>
							<div class="toggle toggle-light" data-name="{{setting.name}}" bl-settings-toggler="{{setting.value ? 'on' : 'off'}}"></div>
							<p class="help-block">{{ setting.description }}</p>
						</div>
						<div class="with-input" ng-if="!isBoolean(setting.value)">
							<div class="label">{{ setting.name.toTitleCase() }}:</div>
							<input type="text" class="form-control" ng-model="setting.value">
							<p class="help-block">{{ setting.description }}</p>
						</div>
					</div>
				</div>
			</div>			
		</div>
		<div class="flyout-content" ng-class="activePanel == 'templates' ? 'open' : 'closed'" id="templates-panel" ng-controller="TemplatesController" bl-render-templates>
			<div bl-close-flyout-panel></div>

			<section class="row inner-content">			
				<div class="col-sm-6" id="templates-list"></div>
				<div class="col-sm-6" id="templates-preview"></div>
			</section>

			<section class="row flyout-panel-toolbar" bl-template-actions>
				<span>{{ 'withSelected' | translate }}</span>
				<button class="btn btn-primary use-template" ng-enabled="selectedTemplate">{{ 'use' | translate }}</button>
				<button class="btn btn-primary edit-template" ng-enabled="selectedTemplate">{{ 'edit' | translate }}</button>
				<button class="btn btn-danger delete-template" ng-enabled="selectedTemplate">{{ 'delete' | translate }}</button>

				<button class="btn btn-success save-page-as-template">{{ 'saveAsTemplate' | translate }}</button>
				<div class="loader" ng-if="templates.loading"><i class="fa fa-spinner fa-spin"></i></div>
			</section>

				<div class="modal fade" id="save-template-modal">
					<div class="modal-dialog">
				    	<div class="modal-content">
				      		<div class="modal-header clearfix">
				        		<button type="button" class="close pull-right" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{{ 'close' | translate }}</span></button>
				        		<h4 class="modal-title">{{ 'createEditTemplate' | translate }}</h4>
				      		</div>
				      		<div class="modal-body">
				        		<div class="form-group">
				        			<label for="name">{{ 'templateName' | translate }}</label>
				        			<input type="text" ng-model="templateData.name" class="form-control" name="name">
				        		</div>
				        		<div class="form-group">
				        			<label for="category">{{ 'templateCategory' | translate }}</label>
				        			<select name="category" class="form-control" ng-model="templateData.category">
				        				<option ng-repeat="category in templates.categories" value="{{ category }}">{{ category.ucFirst() }}</option>
				        			</select>
				        		</div>
				        		<div class="form-group">
				        			<label for="color">{{ 'templatePrimaryColor' | translate }}</label>
				        			<select name="color" class="form-control" ng-model="templateData.color">
				        				<option ng-repeat="color in templates.colors" value="{{ color.name }}">{{ color.name.ucFirst() }}</option>
				        			</select>
				        		</div>
				        		<div class="checkbox" ng-if="templateData.type == 'edit'">
								    <label>
								      	<input ng-model="templateData.replaceContents" type="checkbox">
								      	<span>{{ 'replaceTemplateContents' | translate }}</span>
								    </label>
								</div>
				        		<div class="text-danger">{{ template.error }}</div>
				      		</div>
				      		<div class="modal-footer">
				      			<button class="btn btn-success">{{ 'saveAndClose' | translate }}</button>
				      		</div>
				    	</div>
				  	</div>
				</div>
		</div>
	</div>
	<div id="description-container"></div>
	<aside id="elements-container" ng-controller="ElementsPanelController">
		<section id="elements-panel" bl-el-panel-filterable bl-el-panel-searchable>		
			<div class="panel-inner">
				<section id="el-panel-top">
					<h2 class="panel-title clearfix">
						<div class="panel-name open" id="el-panel-name">
							<span class="pull-left">{{ 'elements' | translate }}</span>
							<i bl-toggle-el-search-bar class="fa fa-search pull-right"></i>
						</div>
						<div id="panel-search" class="panel-heading-input">
							<input type="text" class="pull-left" id="el-search" placeholder="{{ 'searchElements' | translate }}" ng-model="query" ng-model-options="{ debounce: 300 }">
							<span bl-toggle-el-search-bar class="fa-stack fa-lg pull-right">
							  <i class="fa fa-circle fa-stack-2x"></i>
							  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
							</span>
						</div>
					</h2>
					<div id="el-preview-container" bl-element-preview>
						<iframe frameborder="0"></iframe>
					</div>
				</section>
				<div id="el-panel-bot" bl-pretty-scrollbar bl-panels-collapsable>
					<div id="elements-list">
						<div class="elements-box" id="layout">
							<h3 class="bl-panel-heading">{{ 'layout' | translate }} <i class="fa fa-minus"></i></h3>
							<ul class="list-unstyled"></ul>
						</div>
						<div class="elements-box" id="media">
							<h3 class="bl-panel-heading">{{ 'media' | translate }} <i class="fa fa-minus"></i></h3>
							<ul class="list-unstyled"></ul>
						</div>
						<div class="elements-box" id="typography">
							<h3 class="bl-panel-heading">{{ 'typography' | translate }} <i class="fa fa-minus"></i></h3>
							<ul class="list-unstyled"></ul>
						</div>
						<div class="elements-box" id="buttons">
							<h3 class="bl-panel-heading">{{ 'buttons' | translate }} <i class="fa fa-minus"></i></h3>
							<ul class="list-unstyled"></ul>
						</div>
						<div class="elements-box" id="components">
							<h3 class="bl-panel-heading">{{ 'components' | translate }} <i class="fa fa-minus"></i></h3>
							<ul class="list-unstyled"></ul>
						</div>
						<div class="elements-box" id="forms">
							<h3 class="bl-panel-heading">{{ 'forms' | translate }} <i class="fa fa-minus"></i></h3>
							<ul class="list-unstyled"></ul>
						</div>
					</div>
				</div>
			</div>
		</section>
		<div class="sidebar-toggler left" bl-toggle-sidebar> <div class="toggler-carret"></div></div>
	</aside>
	<div id="middle">
		<section id="breadcrumbs">
			<ol class="breadcrumb">
				<li ng-repeat="el in selected.path" ng-class="{ active: $last }" ng-click="selectNode($index)"><a href="">{{ el.name }}</a></li>
			</ol>

			<div id="context-menu" ng-controller="ContextMenuController" ng-show="contextMenuOpen">
				<h5 class="clearfix"><span class="name">{{ selected.element ? selected.element.name : '' }}</span><i ng-click="closeContextMenu()" class="fa fa-times"></i> </h5>
				<ul class="list-unstyled">
					<li ng-if="selected.isTable" ng-click="executeCommand('addRowBefore')"><div class="command-name">{{ 'addRowBefore' | translate }}</div></li>
					<li ng-if="selected.isTable" ng-click="executeCommand('addRowAfter')"><div class="command-name">{{ 'addRowAfter' | translate }}</div></li>
					<li ng-if="selected.isTable" ng-click="executeCommand('addColumnBefore')"><div class="command-name">{{ 'addColumnBefore' | translate }}</div></li>
					<li ng-if="selected.isTable" ng-click="executeCommand('addColumnAfter')"><div class="command-name">{{ 'AddColumnAfter' | translate }}</div></li>
					<li ng-if="selected.isTable" class="separator"></li>
					<li ng-click="executeCommand('selectParent')"><div class="command-name"><i class="fa fa-cut"></i> {{ 'SelectParent' | translate }}</div></li>
					<li ng-click="executeCommand('wrapInTransparentDiv')"><div class="command-name"><i class="fa fa-bullseye"></i> {{ 'WrapInTransparentDiv' | translate }}</div></li>
					<li class="separator"></li>
					<li ng-click="executeCommand('cut')"><div class="command-name"><i class="fa fa-cut"></i> {{ 'cut' | translate }}</div><div class="command-keybind">Ctrl+X</div></li>
					<li ng-click="executeCommand('copy')"><div class="command-name"><i class="fa fa-copy"></i>{{ 'copy' | translate }} Copy</div><div class="command-keybind">Ctrl+C</div></li>
					<li ng-click="executeCommand('paste', $event)" ng-class="!dom.copiedNode ? 'disabled' : ''"><div class="command-name"><i class="fa fa-paste"></i> {{ 'paste' | translate }}</div><div class="command-keybind">Ctrl+V</div></li>
					<li ng-click="executeCommand('delete')"><div class="command-name"><i class="fa fa-trash-o"></i> {{ 'delete' | translate }}</div><div class="command-keybind">Del</div></li>
					<li ng-click="executeCommand('clone')"><div class="command-name"><i class="fa fa-database"></i> {{ 'duplicate' | translate }}</div></li>
					<li class="separator"></li>
					<li ng-click="executeCommand('moveSelected', 'up')"><div class="command-name"><i class="fa fa-chevron-up"></i> {{ 'moveUp' | translate }}</div><div class="command-keybind">&#8593;</div></li>
					<li ng-click="executeCommand('moveSelected', 'down')"><div class="command-name"><i class="fa fa-chevron-down"></i> {{ 'moveDown' | translate }}</div><div class="command-keybind">&#8595;</div></li>
					<li class="separator"></li>
					<li ng-click="executeCommand('undo')" ng-class="!undoManager.canUndo ? 'disabled' : ''"><div class="command-name"><i class="fa fa-undo"></i> {{ 'undo' | translate }}</div><div class="command-keybind">Ctrl+Z</div></li>
					<li ng-click="executeCommand('redo')" ng-class="!undoManager.canRedo ? 'disabled' : ''"><div class="command-name"><i class="fa fa-repeat"></i> {{ 'redo' | translate }}</div><div class="command-keybind">Ctrl+Z</div></li>
					<li ng-class="{hidden: codeEditors.currentlyOpen == 'html'}" class="separator"></li>
					<li ng-class="{hidden: codeEditors.currentlyOpen == 'html'}" ng-click="executeCommand('viewSource')"><div class="command-name">{{ 'viewSource' | translate }}</div></li>
				</ul>
			</div>
		</section>
		<div id="frame-wrapper" bl-builder bl-resizable bl-iframe-nodes-sortable bl-iframe-nodes-selectable bl-iframe-text-editable bl-iframe-themes-switchable bl-iframe-context-menu> <!-- bl-iframe-context-menu> -->
			<section id="highlights">
				<div id="linker" class="hidden" ng-controller="LinkerController">
					<h3>{{ 'linkFor' | translate }} <span>{{ linker.label }}</span> <i ng-click="hideLinker()" class="fa pull-right fa-times"></i></h3>
					<ul>
						<li ng-class="{ disabled: linker.radio !== 'url' }">
							<label class="pull-left">
								<div class="radio-input"><input value="url" ng-model="linker.radio" type="radio"></div>
							</label>
							<div class="pull-right">
								<div class="title">{{ 'websiteUrl' | translate }}</div>
								<div class="body">
									<input class="form-control" ng-model="linker.url" ng-change="applyUrl()" type="text" placeholder="http://www.google.com">
								</div>
							</div>
						</li>
						<li ng-class="{ disabled: linker.radio !== 'page' }">
							<label class="pull-left">
								<div class="radio-input"><input value="page" ng-model="linker.radio" type="radio"></div>
							</label>
							<div class="pull-right">
								<div class="title">{{ 'page' | translate }}</div>
								<div class="body">
									<select ng-model="linker.page" ng-change="applyPage()" class="form-control">
										<option value="">{{ 'selectAPage' | translate }}</option>
										<option value="{{page.name}}" ng-repeat="page in project.active.pages">{{ page.name.ucFirst() }}</option>
									</select>
								</div>
							</div>
						</li>
						<li ng-class="{ disabled: linker.radio !== 'download' }">
							<label class="pull-left">
								<div class="radio-input"><input value="download" ng-model="linker.radio" type="radio"></div>
							</label>
							<div class="pull-right">
								<div class="title">{{ 'download' | translate }}</div>
								<div class="body">
									<input class="form-control" ng-model="linker.download" ng-change="applyDownload()" type="text" placeholder="https://www.google.com/images/srpr/logo11w.png">
								</div>
							</div>
						</li>
						<li ng-class="{ disabled: linker.radio !== 'email' }">
							<label class="pull-left">
								<div class="radio-input"><input value="email" ng-model="linker.radio" type="radio"></div>
							</label>
							<div class="pull-right">
								<div class="title">{{ 'emailAddress' | translate }}</div>
								<div class="body">
									<input class="form-control" ng-model="linker.email" ng-change="applyEmail()" type="text" placeholder="vebtolabs@gmail.com">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div bl-hover-box></div>
				<div id="select-box" ng-hide="dragging" bl-columns-resizable>	
					<div id="select-box-actions" bl-context-box-actions ng-hide="rowEditorOpen">
						<span class="element-tag"></span>
						<i class="fa fa-pencil" data-action="edit"></i>
						<i class="fa" ng-class="selected.locked ? 'fa-lock' : 'fa-unlock'" bl-toggle-element-lock data-action="lock"></i>
						<i class="fa fa-trash-o" data-action="delete"></i>
					</div>
					<div id="column-resizers"></div>
					<div id="resize-handles" ng-show="!selected.isColumn && settings.get('showWidthAndHeightHandles') && !rowEditorOpen">
						<span data-direction="nw" class="drag-handle nw-handle"></span>
						<span data-direction="n" class="drag-handle n-handle"></span>
						<span data-direction="ne" class="drag-handle ne-handle"></span>
						<span data-direction="e" class="drag-handle e-handle"></span>
						<span data-direction="se" class="drag-handle se-handle"></span>
						<span data-direction="s" class="drag-handle s-handle"></span>
						<span data-direction="sw" class="drag-handle sw-handle"></span>
						<span data-direction="w" class="drag-handle w-handle"></span>
					</div>
				</div>
				<div id="edit-columns" bl-toggle-row-editor><i class="fa fa-gear"></i> <span>{{ 'editColumns' | translate }}</span></div>
				<div id="row-editor" bl-row-editor>
					<div class="column-controls"></div>
					<div class="row-presets clearfix">
						<button class="btn btn-sm btn-default equalize-columns pull-left">{{ 'makeColsEqual' | translate }}</button>
						<div class="pull-right" bl-row-presets></div>
					</div>
					<div class="column-controls-footer clearfix">
						<i class="fa fa-times close-row-editor"></i>
						<button class="btn btn-sm btn-primary pull-right save-and-close-row-editor">{{ 'saveAndClose' | translate }}</button>
					</div>
				</div>
				<div id="text-toolbar" ng-controller="ToolbarController" bl-floating-toolbar>
					
					<select id="toolbar-size" bl-pretty-select="font.size" data-width="120">
						<option value="">{{ 'size' | translate }}</option>
						<option ng-repeat="num in fontSizes" data-font-size="{{ num }}">{{ num }}</option>
					</select>
					<select id="toolbar-font" bl-pretty-select="font.family" data-width="150">
						<option value="">{{ 'font' | translate }}</option>
						<option ng-repeat="font in baseFonts" data-font-family="{{ font.css }}">{{ font.name }}</option>
					</select>
					<div id="toolbar-style">
						<div class="bold">B</div>
						<div class="italic">I</div>
						<div class="underline">U</div>
						<div class="strike">S</div>

						<div class="wrap-link"><i class="fa fa-link"></i></div>

						<div class="align-left"><i class="fa fa-align-left"></i> </div>
						<div class="align-center"><i class="fa fa-align-center"></i> </div>
						<div class="align-right"><i class="fa fa-align-right"></i> </div>

						<div class="show-icons-list" bl-toggle-icon-list><i class="fa fa-smile-o"></i> </div>
						<section id="icons-list">
							<div class="arrow-up"></div>
							<input type="text" placeholder="Search for icons" ng-model="iconSearch">
							<ul class="list-unstyled list-inline">
								<li ng-repeat="icon in icons | filter:iconSearch" class="icon" data-icon-class="{{ icon }}"><i class="{{ icon }}"></i></li>
							</ul>
						</section>
					</div>
					<div id="link-details" class="hidden">
						<input type="text" class="form-control" ng-model="href" placeholder="Url...">
						<input type="text" class="form-control" ng-model="title" placeholder="Title...">
						<button type="button" class="btn btn-success" id="wrap-with-link" ng-disabled="href == 'http://'">Go</button>
					</div>
				</div>
			</section>
			<iframe id="iframe" frameborder="0" class="full-width"></iframe>
			<div id="frame-overlay" class="hidden"></div>
			<div id="theme-loading" class="hidden"><span>{{ 'loading' | translate }}.</span></div>
			<div id="code-editor-wrapper" ng-controller="CodeEditorController" bl-render-editors>
				<div id="editor-header" class="clearfix">
					<div class="pull-left">
						<select class="pretty-select" ng-model="editors.theme" ng-options="name for name in themes" ng-change="editors.changeTheme()"></select>
					</div>
					<div class="pull-right" id="editor-icons">
						<button ng-class="{ active: editors.currentlyOpen === 'html' }" class="btn btn-success btn-sm" type="button" bl-show-editor="html">{{ 'html' | translate }}</button>
						<button ng-class="{ active: editors.currentlyOpen === 'css' }" class="btn btn-success btn-sm" type="button" bl-show-editor="css">{{ 'css' | translate }}</button>
						<button ng-class="{ active: editors.currentlyOpen === 'js' }" class="btn btn-success btn-sm" type="button" bl-show-editor="js">{{ 'js' | translate }}</button>
						<button class="btn btn-sm with-icon expand-editor"><i class="fa fa-expand"></i> </button>
						<button class="btn btn-sm with-icon close-editor"><i class="fa fa-times"></i> </button>
					</div>
				</div>
				<div class="code-editor" id="html-code-editor"></div>
				<div class="code-editor hidden" id="css-code-editor"></div>
				<div class="code-editor hidden clearfix" id="js-code-editor">
					<div class="col-sm-10 editor-column" id="jscript-code-editor"></div>
					<div class="col-sm-2 libraries-column">
						<div class="body" bl-js-libraries>
							<h4 class="clearfix"><span class="pull-left">{{ 'libraries' | translate }}</span> <i class="fa fa-plus pull-right new-library"></i></h4>
							
							<input type="text" class="form-control" ng-model="libraryQuery" placeholder="Search...">
							<div class="checkbox">
							    <label>
							    	<input type="checkbox" ng-model="onlyShowAttachedLibs"> {{ 'onlyShowAttached' | translate }}
							    </label>
							</div>

							<ul class="libraries-list">
								<li ng-class="{ attached: libraries.isAttached(lib) }" 
									data-name="{{ lib.name }}" 
									ng-if="! onlyShowAttachedLibs || libraries.isAttached(lib)" 
									ng-repeat="lib in libraries.all | filter:libraryQuery">
									<i class="fa fa-link"></i>
									<span class="name">{{ lib.name.ucFirst() }}</span>
									<div class="lib-actions">
										<i ng-if="lib.type != 'public'" title="Edit Library" class="fa fa-gears edit-library"></i>
										<i ng-if="lib.type != 'public'" title="Remove Library" class="fa fa-trash-o delete-library"></i>
									</div>
								</li>
							</ul>

						</div>
					</div>

					<div class="modal fade" id="new-library-modal" bl-new-library-modal>
						<div class="modal-dialog">
					    	<div class="modal-content">
					      		<div class="modal-header">
					        		<button type="button" class="close pull-right" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					        		<h4 class="modal-titlet">{{ 'createNewLibrary' | translate }}</h4>
					      		</div>
					      		<div class="modal-body">
					        		<div class="form-group">
					        			<label for="name">{{ 'libraryName' | translate }}</label>
					        			<input type="text" class="form-control" name="name" ng-model="libraries.form.name">
					        		</div>
					        		<div class="form-group">
					        			<label for="path">{{ 'libraryPath' | translate }}</label>
					        			<input type="text" class="form-control" name="path" ng-model="libraries.form.path">
					        			<p class="help-block">{{ 'pathToLibrary' | translate }}</p>
					        		</div>
					        		<p class="text-danger">{{ libraries.form.error }}</p>
					      		</div>
					      		<div class="modal-footer">
					      			<button class="btn btn-danger close-modal">{{ 'close' | translate }}</button>
					      			<button class="btn btn-success float-right save-library">{{ 'saveAndClose' | translate }}</button>
					      		</div>
					    	</div>
					  	</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<aside id="inspector" ng-controller="InspectorController" bl-color-picker >
		<div id="inspector-overlay" ng-show="!selected.node"><span>{{ 'toEditStylesPlease' | translate }}</span></div>
		<section id="inspector-inner" bl-pretty-scrollbar bl-panels-collapsable>
			<div bl-inspector-header>
				<h2 class="panel-title clearfix" bl-toggle-heading-input>
					<div class="panel-name open">
						<span class="pull-left">{{ selected.element.name.ucFirst() }}</span>
						<i class="fa fa-filter pull-right" data-toggle="tooltip" data-placement="left" title="Filter Categories"></i>
						<i class="fa fa-css3 pull-right" data-toggle="tooltip" data-placement="left" title="Edit CSS Selector"></i>
					</div>
					<div class="panel-heading-input">
						<input type="text" class="pull-left" id="css-selector" ng-model="selected.selector" placeholder="Search Elements..." ng-model-options="{ debounce: 300 }">
						<span class="fa-stack fa-lg pull-right">
						  <i class="fa fa-circle fa-stack-2x"></i>
						  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
						</span>
					</div>
				</h2>

				<select id="inspector-filter-select" class="form-control hidden" ng-model="filter.query" ng-options="name for name in categories"></select>
			</div>

			<div ng-show="canEdit('attributes')" ng-controller="AttributesController" class="inspector-panel" id="attributes-panel">

				<div id="visibility">
					<ul class="list-unstyled list-inline" bl-element-visibility-controls>
						<li data-size="xs" data-toggle="tooltip" data-placement="top" title="visible on mobile"><i class="fa fa-fw fa-mobile-phone"></i></li>
						<li data-size="sm" data-toggle="tooltip" data-placement="top" title="visible on tablet"><i class="fa fa-fw fa-tablet"></i></li>
						<li data-size="md" data-toggle="tooltip" data-placement="top" title="visible on laptop"><i class="fa fa-fw fa-laptop"></i></li>
						<li data-size="lg" data-toggle="tooltip" data-placement="top" title="visible on desktop"><i class="fa fa-fw fa-desktop"></i></li>
					</ul>
				</div>
				
				<h4 class="bl-panel-heading">{{ 'attributes' | translate }} <i class="fa fa-minus"></i></h4>
				<div class="panel-box">
					<div id="custom-attributes">
						<div class="form-group" ng-repeat="(name, config) in customAttributes">
							<label for="el-{{ name }}">{{ name }}</label>

							<!-- Render custom text input option -->
								<input ng-class="name.length > 7 ? 'long-name' : ''" ng-if="config.text" type="text" id="el-{{ name }}" ng-model="config.value" ng-model-options="{ debounce: 300 }">
							<!-- Render custom select input option -->
								<select ng-if="config.list"id="el-{{ name }}" class="pretty-select" ng-model="config.value" ng-options="item.name for item in config.list"></select>
							<!-- /end custom options -->
						</div>
					</div>

					<div class="form-group" ng-show="canEdit('float')">
						<label for="el-id">{{ 'float' | translate }}</label>
						<select id="el-float" class="pretty-select" ng-model="attributes.float">
							<option value="none">{{ 'none' | translate }}</option>
							<option value="pull-left">{{ 'left' | translate }}</option>
							<option value="center-block">{{ 'center' | translate }}</option>
							<option value="pull-right">{{ 'right' | translate }}</option>
						</select>
					</div>

					<div class="form-group">
						<label for="el-id">{{ 'id' | translate }}</label>
						<input class="pull-right" type="text" id="el-id" ng-model="attributes.id" ng-model-options="{ debounce: 300 }">
					</div>

					<div class="clearfix">
						<label for="el-id">{{ 'class' | translate }}</label>
						<div id="el-class" bl-add-class-panel>
							<ul class="list-unstyled list-inline">
								<li class="label" ng-repeat="class in attributes.class" ng-if="class">{{ class }} <i class="fa fa-times" ng-click="removeClass(class); $event.stopPropagation();"></i></li>
							</ul>
							<div id="addclass-flyout" class="hidden">
								<input type="text" id="addclass-input" ng-model="classInput">
								<button class="btn btn-sm btn-success add-class"> <i class="fa fa-check"></i></button>
							</div>
						</div>
					</div>

					<button ng-if="selected.isImage" type="button" open-media-manager="src" class="btn btn-primary btn-block">{{ 'mediaManager' | translate }}</button>
				</div>
			</div>

			<section id="background-panel" class="inspector-panel" ng-controller="BackgroundController" ng-show="canEdit('background')">
				<h4 class="bl-panel-heading">{{ 'background' | translate }} <i class="fa fa-minus"></i></h4>

				<div class="panel-box">
					<div data-controls="properties.color" class="color-picker-trigger" id="fill-color"><div class="background-box"><i class="fa fa-paint-brush"></i></div><div class="background-name">{{ 'color' | translate }}</div></div>
					<div bl-show-img-container id="image"><div class="background-box"><i class="fa fa-image"></i></div><div class="background-name">{{ 'image' | translate }}</div></div>
					<div bl-show-img-container id="gradient"><div class="background-box"><i class="fa fa-eyedropper"></i></div><div class="background-name">{{ 'gradient' | translate }}</div></div>
				</div>

				<div id="background-flyout-panel" class="hidden">
					<div class="bl-panel-header clearfix"><div class="name">{{ 'background' | translate }}</div><div class="bl-panel-btns" ng-click="closePanel"><i class="fa fa-times"></i></div></div>	
					<button type="button" open-media-manager="background" class="btn btn-primary btn-block">{{ 'mediaManager' | translate }}</button>
					<div id="texturePresets">
						<h5>{{ 'textures' | translate }}</h5>
						<ul class="img-presets-list" bl-pretty-scrollbar>
							<li ng-repeat="texture in textures track by $index">
								<div ng-click="selectPreset($event)" class="preset" ng-style="{ 'background-image': 'url(../assets/images/textures/'+$index+'.png)' }">
							</li>
						</ul>
						<div id="image-properties">
							<h5>{{ 'imageProperties' | translate }}</h5>
							<div id="img-positioning" class="clearfix">
								<div class="pull-left">
									<h6>{{ 'repeat' | translate }}</h6>
									<ul class="list-unstyled">
										<li><div class="radio"><label><input value="no-repeat" ng-checked="properties.repeat == 'no-repeat'" ng-model="properties.repeat" type="radio">{{ 'none' | translate }}</label></div></li>
										<li><div class="radio"><label><input value="repeat-x" ng-checked="properties.repeat == 'repeat-x'" ng-model="properties.repeat" type="radio">{{ 'horizontal' | translate }}</label></div></li>
										<li><div class="radio"><label><input value="repeat-y" ng-checked="properties.repeat == 'repeat-y'" ng-model="properties.repeat" type="radio">{{ 'vertical' | translate }}</label></div></li>
										<li><div class="radio"><label><input value="repeat" ng-checked="properties.repeat == 'repeat'" ng-model="properties.repeat" type="radio">{{ 'all' | translate }}</label></div></li>
									</ul>
								</div>
								<div class="pull-right">
									<h6>{{ 'alignment' | translate }}</h6>
									<div id="alignment" bl-img-alignment-grid></div>
								</div>
							</div>
						</div>
					</div>
					<div id="gradientPresets">
						<h5>{{ 'gradients' | translate }}</h5>
						<ul class="img-presets-list" bl-pretty-scrollbar>
							<li ng-repeat="gradient in gradients track by $index">
								<div class="preset" ng-click="selectPreset($event)" ng-style="{ 'background-image': gradient }"></div>
							</li>
						</ul>				
					</div>
								
				</div>
			</section>

			<section id="shadows-panel" class="inspector-panel" ng-controller="ShadowsController">
				<div ng-show="canEdit('shadows')">
					<h4 class="bl-panel-heading">{{ 'shadows' | translate }} <i class="fa fa-minus"></i></h4>
					<div class="panel-box clearfix">
						<div id="shadow-knob-container">
							<input type="text" value="0" bl-knob>
							<div data-toggle="tooltip" data-placement="top" title="Shadow Color" data-controls="props.color" class="color-picker-trigger" bl-shadow-color-preview></div>
						</div>
						<div class="slider-group">
							<div class="range-slider">
								<div class="slider-label">{{ 'distance' | translate }}</div>
								<div bl-range-slider="props.distance" max="20"></div>
							</div>
							<input type="text" ng-model="props.distance" class="pretty-input">
						</div>
						<div class="slider-group">
							<div class="range-slider">
								<div class="slider-label">{{ 'blur' | translate }}</div>
								<div bl-range-slider="props.blur" max="20"></div>
							</div>
							<input type="text" ng-model="props.blur" class="pretty-input">
						</div>
						<div class="slider-group" ng-if="props.type == 'boxShadow'">
							<div class="range-slider">
								<div class="slider-label">{{ 'spread' | translate }}</div>
								<div bl-range-slider="props.spread" max="20"></div>
							</div>
							<input type="text" ng-model="props.spread" class="pretty-input">
						</div>
						<select bl-pretty-select="props.type" data-width="100%">
							<option value="boxShadow">{{ 'box' | translate }}</option>
							<option value="textShadow">{{ 'text' | translate }}</option>
						</select>
						<select ng-if="props.type == 'boxShadow'" bl-pretty-select="props.inset" data-width="100%">
							<option value="">{{ 'outter' | translate }}</option>
							<option value="inset">{{ 'inner' | translate }}</option>
						</select>
					</div>
				</div>
			</section>

			<section ng-controller="MarginPaddingController">
				<div id="padding-panel" class="inspector-panel" ng-show="canEdit('padding')">
					<h4 class="bl-panel-heading">{{ 'padding' | translate }} <i class="fa fa-minus"></i></h4>
					<div class="clearfix panel-box" >
						<div class="checkboxes clearfix" bl-checkboxes="padding"></div>
						<div bl-range-slider="padding"></div>
						<div bl-input-boxes="padding" class="clearfix input-boxes"></div>
					</div>
				</div>

				<div id="margin-panel" class="inspector-panel" ng-show="canEdit('margin')">
					<h4 class="bl-panel-heading">{{ 'margin' | translate }} <i class="fa fa-minus"></i></h4>
					<div class="panel-box clearfix" >
						<section class="checkboxes clearfix" bl-checkboxes="margin"></section>
						<div bl-range-slider="margin"></div>
						<div bl-input-boxes="margin" class="clearfix input-boxes"></div>
					</div>
				</div>
			</section>

			<!-- text style box starts -->
			<section ng-show="canEdit('text')" class="inspector-panel" id="text-panel" ng-controller="TextController">
				<h4 class="bl-panel-heading">{{ 'textStyle' | translate }} <i class="fa fa-minus"></i></h4>
				<div id="text-box" class="clearfix panel-box">
					<div class="clearfix">
						<select id="el-font-family" bl-pretty-select="inspector.styles.text.fontFamily" data-width="149" class="pull-left">
							<option value="">{{ 'font' | translate }}</option>
							<option ng-repeat="font in textStyles.baseFonts" data-font-family="{{ font.css }}" value="{{ font.css }}">{{ font.name }}</option>
						</select>
						<div id="more-fonts" class="pull-right" data-toggle="modal" data-target="#fonts-modal"><i class="fa fa-google"></i></div>
					</div>
					
					<div class="clearfix">
						<div class="icon-box italic" bl-toggle-text-style="fontStyle|italic">I</div>
						<div class="icon-box underline" bl-toggle-text-decoration="underline" ng-class="inspector.styles.text.textDecoration.indexOf('underline') > -1 ? 'active' : ''">U</div>
						<div class="icon-box strike" bl-toggle-text-decoration="line-through" ng-class="inspector.styles.text.textDecoration.indexOf('line-through') > -1 ? 'active' : ''">S</div>
						<div class="icon-box overline" bl-toggle-text-decoration="overline" ng-class="inspector.styles.text.textDecoration.indexOf('overline') > -1 ? 'active' : ''">O</div>
						<select id="el-font-weight" class="form-control" bl-pretty-select="inspector.styles.text.fontWeight" data-width="65">
							<option ng-repeat="weight in textStyles.fontWeights" data-font-weight="{{ weight }}" value="{{ weight }}">{{ weight }}</option>
						</select>
					</div>

					<div id="el-font-style-box" class="clearfix">
						<div class="pull-left">
							<input type="text" id="el-font-size" ng-model="inspector.styles.text.fontSize" ng-model-options="{ debounce: 300 }" class="form-control pull-left">
							
							<div class="pull-right">
								<div class="icon-box" bl-toggle-text-style="textAlign|left"><i class="fa fa-align-left"></i> </div>
								<div class="icon-box" bl-toggle-text-style="textAlign|center"><i class="fa fa-align-center"></i> </div>
								<div class="icon-box" bl-toggle-text-style="textAlign|right"><i class="fa fa-align-right"></i> </div>
							</div>
						</div>
					</div>

					<div class="clearfix">
						<div data-controls="inspector.styles.text.color" class="color-picker-trigger" style="background: {{ inspector.styles.text.color }}"></div>
					</div>
				</div>
			</section>
			<!-- text style box ends -->

			<!-- border box starts -->
			<section id="border-box" ng-show="canEdit('box')" ng-controller="BorderController">
				
				<div id="border-panel" class="inspector-panel">
					<h4 class="bl-panel-heading">{{ 'border' | translate }} <i class="fa fa-minus"></i></h4>
					<div class="panel-box">
						<section class="checkboxes clearfix" bl-checkboxes="borderWidth"></section>
						<div bl-range-slider="borderWidth" max="20"></div>
						<div class="clearfix">
							<div data-controls="inspector.styles.border.color" class="color-picker-trigger" bl-border-color-preview></div>
							<select id="border-style" ng-model="borderStyle">
								<option value="none">{{ 'none' | translate }}</option>
								<option value="solid">{{ 'solid' | translate }}</option>
								<option value="dashed">{{ 'dashed' | translate }}</option>
								<option value="dotted">{{ 'dotted' | translate }}</option>
								<option value="double">{{ 'double' | translate }}</option>
								<option value="groove">{{ 'groove' | translate }}</option>
								<option value="ridge">{{ 'ridge' | translate }}</option>
								<option value="inset">{{ 'inset' | translate }}</option>
								<option value="outset">{{ 'outset' | translate }}</option>
							</select>
						</div>
						<div bl-input-boxes="border.width" class="clearfix input-boxes"></div>
					</div>
				</div>
				
				<div id="border-radius-panel" class="inspector-panel">
					<h4 class="bl-panel-heading">{{ 'borderRoundness' | translate }} <i class="fa fa-minus"></i></h4>
					<div id="borderRadius-box" class="panel-box clearfix">
							
						<section class="checkboxes clearfix">
							<div class="pretty-checkbox pull-left">    
							    <input type="checkbox" id="borderRadius.all" ng-click="inspector.toggleStyleDirections('borderRadius', 'all')">  
							    <label for="borderRadius.all"><span class="ch-all"></span><span class="unch-all"></span></label>   
							</div>
							<div class="pull-right">
								<div class="pretty-checkbox">    
								    <input type="checkbox" id="borderRadius.top" ng-click="inspector.toggleStyleDirections('borderRadius', 'topLeft')" ng-checked="inspector.checkboxes.borderRadius.indexOf('topLeft') !== -1">  
								    <label for="borderRadius.top"><span class="ch-top border-top-left"></span><span class="unch-top border-top-left"></span></label>   
								</div>
								<div class="pretty-checkbox">    
								    <input type="checkbox" id="borderRadius.bottom" ng-click="inspector.toggleStyleDirections('borderRadius', 'bottomLeft')" ng-checked="inspector.checkboxes.borderRadius.indexOf('bottomLeft') !== -1">  
								    <label for="borderRadius.bottom"><span class="ch-bottom border-bottom-left"></span><span class="unch-bottom border-bottom-left"></span></label>   
								</div>
								<div class="pretty-checkbox">    
								    <input type="checkbox" id="borderRadius.right" ng-click="inspector.toggleStyleDirections('borderRadius', 'topRight')" ng-checked="inspector.checkboxes.borderRadius.indexOf('topRight') !== -1">  
								    <label for="borderRadius.right"><span class="ch-right border-top-right"></span><span class="unch-right border-top-right"></span></label>   
								</div>
								<div class="pretty-checkbox">    
								    <input type="checkbox" id="borderRadius.left" ng-click="inspector.toggleStyleDirections('borderRadius', 'bottomRight')" ng-checked="inspector.checkboxes.borderRadius.indexOf('bottomRight') !== -1">  
								    <label for="borderRadius.left"><span class="ch-left border-bottom-right"></span><span class="unch-left border-bottom-right"></span></label>   
								</div>
							</div>
						</section>
						<div bl-range-slider="borderRadius" max="20"></div>

						<div class="clearfix input-boxes radius-boxes">
							<div class="big-box col-sm-6">
								<input ng-model="radiusAll" ng-model-options="{ debounce: 300 }">
							</div>
							<div class="small-boxes col-sm-6">
								<input ng-model="inspector.styles.border.radius.topLeft" ng-model-options="{ debounce: 300 }">
								<input ng-model="inspector.styles.border.radius.topRight" ng-model-options="{ debounce: 300 }">
								<input ng-model="inspector.styles.border.radius.bottomLeft" ng-model-options="{ debounce: 300 }">
								<input ng-model="inspector.styles.border.radius.bottomRight" ng-model-options="{ debounce: 300 }">
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- /border box ends -->

			<div class="arrow-right" id="color-picker-arrow"></div>
			<div class="arrow-right" id="background-arrow"></div>
		</section>
		<div class="sidebar-toggler right" bl-toggle-sidebar> <div class="toggler-carret"></div></div>
	</aside> <!-- /inspector -->

	<div class="modal fade" id="fonts-modal">
		<div class="modal-dialog modal-lg">
	    	<div class="modal-content">

	      		<div class="modal-header clearfix">
	      			<div title="Close Modal" class="fa-stack fa-lg close-modal" data-dismiss="modal">
                		<i class="fa fa-circle fa-stack-2x"></i>
                		<i class="fa fa-times fa-stack-1x fa-inverse"></i>
           		  	</div>

	        		<h4 class="modal-title pull-left">{{ 'selectOneOf' | translate }} {{ fonts.paginator.sourceItems.length }} {{ 'googleFonts' | translate }}</h4>
	        		<div class="pagi-container pull-right"><ul class="pagination" bl-fonts-pagination></ul></div>
	      		</div>

	      		<div class="modal-body">
	        		<ul class="fonts-list">
	        			<li ng-repeat="font in fonts.paginator.currentItems" style="font-family: {{ font.family }}" ng-click="fonts.apply(font)">
	        				<div class="font-preview">{{ 'fontsLorem' | translate }}</div>
	        				<div class="font-details clearfix">
	        					<div class="pull-left">{{ font.family+', '+font.category }}</div>
	        				</div>
	        			</li>
	        		</ul>
	      		</div>

	    	</div>
	  	</div>
	</div>

	<div class="modal fade" id="images-modal">
				<div class="modal-dialog">
			    	<div class="modal-content" ng-controller="MediaManagerController">
			      		<div class="modal-header clearfix">
			        		<button type="button" class="close pull-right" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        		<h4 class="modal-title pull-left">{{ 'mediaManager' | translate }}</h4>
			      		</div>
			      		<div class="modal-body">

			      			<div class="modal-under-header clearfix">
			      				<div class="pull-left">
			      					<p class="info">{{ 'uploadAndMangeImages' | translate }}</p>
			      					<p class="info">{{ 'imageRestrictions' | translate }}</p>
			      				</div>
			      				<div class="pull-right">
			      					<button class="btn btn-primary btn-lg" ng-file-select="onFileSelect($files)" data-multiple="true"><i class="fa fa-upload"></i> {{ 'uploadImages' | translate }}</button>
			      				</div>
			      			</div>

							<ul class="nav nav-tabs" bl-media-manager-tabs>
							  <li ng-class="activeTab == 'my-images' ? 'active' : ''" ng-click="activeTab = 'my-images'"><a href="">{{ 'myImages' | translate }}</a></li>
							  <li ng-class="activeTab == 'url' ? 'active' : ''" ng-click="activeTab = 'url'"><a href="">{{ 'imageUrl' | translate }}</a></li>
							</ul>

							<div class="tab-content">
								<div ng-class="activeTab == 'my-images' ? 'active' : ''" class="tab-pane clearfix" id="my-images">
									<div id="images-filter-bar" class="clearfix">
										<div class="pull-right">
											<div class="checkbox-btn btn btn-gradient-gray" ng-class="{ active: selectAll }">
												<input type="checkbox" ng-model="selectAll" value="true">
											</div>
											<div class="btn-group">
											  	<button type="button" ng-class="{ active: sorting.prop == 'created_at' }" ng-click="changeSorting('created_at')" class="btn btn-gradient-gray btn-sm">{{ 'date' | translate }}</button>
											  	<button type="button" ng-class="{ active: sorting.prop == 'display_name' }" ng-click="changeSorting('display_name')" class="btn btn-gradient-gray btn-sm">{{ 'aZ' | translate }}</button>
											</div>
											<button ng-click="deleteSelectedImages()" class="btn btn-gradient-gray btn-sm"><i class="fa fa-trash"></i> </button>
											<input type="text" ng-model="searchQuery">
										</div>
									</div>
							  		<div class="col-sm-2" id="folders-cont">
							  			<div class="row">
							  				<ul class="list-unstyled" bl-image-folder-selectable>
								  				
								  				<li ng-repeat="folder in folders" ng-class="(selectedFolder.name == folder.name || folder.creating) ? 'active' : ''"  data-id="{{ folder.id }}" data-name="{{ folder.name }}">
								  					<div ng-if="!folder.creating" class="clearfix">
								  						<span class="pull-left">{{ folder.name }}</span>
								  						<i ng-click="deleteFolder(folder.id);$event.stopPropagation();" ng-if="folder.id" data-toggle="tooltip" data-placement="top" title="delete folder" class="fa fa-trash delete-folder pull-right"></i>
								  					</div>
								  					<div ng-if="folder.creating" class="creating-folder">
								  						<input ng-model="newFolder.name" type="text" name="name" class="form-control">
								  						<button class="btn btn-sm btn-success" ng-click="createFolder()"> <i class="fa fa-check"></i></button>
								  						<button class="btn btn-sm btn-danger" ng-click="cancelFolderCreation()"> <i class="fa fa-times"></i></button>
								  					</div>
								  				</li>
								  			</ul>
								  			<div class="add-folder-cont">
								  				<button class="btn btn-primary btn-block" bl-new-image-folder><i class="fa fa-folder-open-o"></i> {{ 'addFolder' | translate }}</button>
								  			</div>
							  			</div>
							  		</div>
							  		<div class="col-sm-10" id="images-cont">
							  			<ul class="list-unstyled row" bl-images-selectable>
							  				<li ng-class="{ selected: isSelected(image.id) }" 
							  					ng-repeat="image in images | filter: selectedFolder.name == 'All Images' ? '' : selectedFolder.name | filter: searchQuery | orderBy:sorting.prop:sorting.reverse" 
							  					class="col-sm-2"
							  					data-id="{{ image.id }}">

							  					<div class="img-wrapper" style="background-image: url({{ baseUrl }}/assets/images/uploads/{{image.file_name}})"></div>
							  					<div class="img-caption">
							  						<span>{{ image.display_name.substring(0,12) }}</span>

								  					<div class="img-actions" bl-image-actions>
								  						<i data-toggle="tooltip" data-placement="top" title="Edit" class="fa fa-fw fa-pencil edit-image"></i>
								  						<i data-toggle="tooltip" data-placement="top" title="Delete" class="fa fa-fw fa-trash-o delete-image"></i>
								  					</div>
							  					</div>
							  				</li>
							  			</ul>

							  			<div ng-show="images.length < 1" id="upload-container" ng-file-drop="onFileSelect($files)">
								  			<img class="img-responsive" src="assets/images/filedrop.png">
				      						<h2>{{ 'dropImageToUpload' | translate }}</h2>
				      						<div class="separator"><span>{{ 'or' | translate }}</span></div>
				      						<button class="btn btn-success btn-lg" ng-file-select="onFileSelect($files)" data-multiple="true">{{ 'selectImageFrom' | translate }}</button>
								  		</div>
							  		</div>
							  	</div>
							  	<div ng-class="activeTab == 'url' ? 'active' : ''" class="tab-pane" id="url">
							  		<h2>{{ 'enterImageWebUrl' | translate }}</h2>
							  		<input type="text" ng-model="webImageUrl" class="form-control">
							  			<div class="checkbox">
									    	<label>
									      		<input type="checkbox" ng-model="downloadLocally" value="true"> {{ 'downloadLocally' | translate }}
									    	</label>
									  	</div>
							  		<p>{{ 'mustBeDirectLink' | translate }}</p>
							  		<p>{{ 'imageUrlExample' | translate }}</p>
							  	</div>
							</div>
			      		</div>
			      		<div class="modal-footer clearfix">
			      			<p class="pull-left" ng-if="activeTab == 'my-images'">{{ 'useImageExpl' | translate }}</p>
			      			<button class="btn btn-primary btn-lg" ng-click="useImage()">{{ 'useImage' | translate }}</button>
			      		</div>
			    	</div>
			  	</div>
			</div>
</section>

<div id="preview-closer" class="hidden" ng-click="closePreview()">
	<i class="fa fa-times"></i>
</div>