<div class="insert-tile js-insert-tile">
	<div class="pages-component-picker row no-gutters">
		<div class="col-4 categories-wrapper">
			<ul class="nav flex-column category-pills p-2">
				<li class="nav-item" ng-click="library.SetCategoryFilter()" ng-class="{active:library.category_filter === undefined}">
					<span class="nav-link component-picker-nav-link" lmsg="pages.tile.library.all_categories">[All categories]</span>
				</li>
				<li class="nav-item" ng-repeat="(category_index, category) in library.categories" ng-click="library.SetCategoryFilter(category_index)" ng-class="{active:library.category_filter === category_index}">
					<span class="nav-link component-picker-nav-link">{{category.name}}</span>
				</li>
			</ul>
		</div>
		<div class="col-8">
			<div class="pages-component-picker-search-wrapper p-3 form-inline">
					<span class="pages-component-picker-search-icon">
						<ion-icon class="align-middle" name="search-outline"></ion-icon>
					</span>
					<input type="text" ng-model="library.keywords" ng-change="library.setVisibleTiles()" lmsg="placeholder:pages.tile.library.search" name="searchComponents" class="form-control pages-component-picker-search js-library-keywords" autofocus="autofocus" />
				<div class="btn-group ml-auto">
					<a href="" ng-click="library.view = 'grid'" ng-class="{active:library.view === 'grid'}" class="btn btn-secondary">
						<ion-icon name="grid-outline"></ion-icon>
					</a>
					<a href="" ng-click="library.view = 'list'" ng-class="{active:library.view === 'list'}" class="btn btn-secondary">
						<ion-icon name="reorder-four-outline"></ion-icon>
					</a>
				</div>
			</div>
			<div class="pages-component-picker-tiles-wrapper">
			<ul class="list-unstyled pages-component-picker-tiles-list" ng-class="{'list-mode':library.view === 'list'}">
				<li class="pages-component-picker-tile" ng-repeat="tile in library.viewTiles" rel="{{library.view === 'grid' ? 'tooltip' : ''}}" data-original-title="{{tile.description}}" data-placement="bottom">
					<a ng-href="#" class="js-new_tile_link pages-component-picker-tile-link" data-title="{{tile.title}}" data-key="{{tile.key}}" ng-click="library.clicked($event, tile)">
						<div ng-if="tile.use_glyph" class="{{tile.icon_class}} pages-component-picker-tile-icon"></div>
						<div ng-if="!tile.use_glyph" class="claroicons pages-component-picker-tile-icon" ng-bind-html="tile.icon_svg | sanitize"></div>

						<div class="pages-component-picker-tile-title-wrapper">
							<span class="js-title pages-component-picker-tile-title" ng-bind="tile.title"></span>
							<span class="small text-muted pages-component-picker-tile-description">{{tile.description}}</span>
						</div>
					</a>
				</li>
			</ul>
			</div>
		</div>
	</div>
</div>
