nodebb/public/templates/admin/categories.tpl

<div class="categories">
	<h1>Categories</h1>
	<hr />

	<ul class="nav nav-pills">
		<li class='active'><a href='/admin/categories/active'>Active</a></li>
		<li class=''><a href='/admin/categories/disabled'>Disabled</a></li>
		<li class=''><a href='/admin/testing/categories'>Unit Tests</a></li>
	</ul>

	<div class="row admin-categories">
		<ul class="col-md-12" id="entry-container">
		<!-- BEGIN categories -->
			<li data-cid="{categories.cid}" class="entry-row">
				<div class="row">
					<div class="col-sm-2 hidden-xs text-center">
						<div class="preview-box" style="background: {categories.background}; color: {categories.color};">
							<div class="icon">
								<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
							</div>
						</div><br />
						<!-- IF categories.image -->
						<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Delete Image</small>
						<!-- ENDIF categories.image -->
					</div>
					<div class="col-sm-10">
						<form class="form">
							<div class="row">
								<div class="col-sm-4 col-xs-12">
									<div class="form-group">
										<label for="cid-{categories.cid}-name">Category Name</label>
										<input id="cid-{categories.cid}-name" type="text" class="form-control" placeholder="Category Name" data-name="name" value="{categories.name}" />
									</div>
								</div>
								<div class="col-sm-4 hidden-xs">
									<div class="form-group">
										<div class="form-group">
											<label for="cid-{categories.cid}-bgColor">Background Colour</label>
											<input id="cid-{categories.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{categories.bgColor}" class="form-control category_bgColor" />
										</div>
									</div>
								</div>
								<div class="col-sm-4 hidden-xs">
									<div class="form-group">
										<div class="form-group">
											<label for="cid-{categories.cid}-color">Text Colour</label>
											<input id="cid-{categories.cid}-color" placeholder="#fff" data-name="color" value="{categories.color}" class="form-control category_color" />
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-8 col-sm-6">
									<div class="form-group">
										<div class="form-group">
											<label for="cid-{categories.cid}-description">Description</label>
											<input id="cid-{categories.cid}-description" data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description description"></input>
										</div>
									</div>
								</div>
								<div class="col-md-4 col-sm-6">
									<div class="form-group">
										<div class="form-group">
											<label>&nbsp;</label>
											<div class="dropdown">
												<button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button>
												<ul class="dropdown-menu" role="menu">
													<li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li>
													<hr />
													<li data-disabled="{categories.disabled}"><a href="#"></a></li>
												</ul>
												<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4 col-xs-12">
									<div class="form-group">
										<label for="cid-{categories.cid}-class">Custom Class</label>
										<input id="cid-{categories.cid}-class" type="text" class="form-control" placeholder="col-md-6 col-xs-6" data-name="class" value="{categories.class}" />
									</div>
								</div>
								<div class="col-sm-4 col-xs-12">
									<div class="form-group">
										<label for="cid-{categories.cid}-numRecentReplies"># of Recent Replies Displayed</label>
										<input id="cid-{categories.cid}-numRecentReplies" type="text" class="form-control" placeholder="2" data-name="numRecentReplies" value="{categories.numRecentReplies}" />
									</div>
								</div>
								<div class="col-sm-4 col-xs-12">
									<div class="form-group">
										<label for="cid-{categories.cid}-link">Is Link (if set, category acts as external link)</label>
										<input id="cid-{categories.cid}-link" type="text" class="form-control" placeholder="http://domain.com" data-name="link" value="{categories.link}" />
									</div>
								</div>
							</div>


							<input type="hidden" data-name="order" data-value="{categories.order}"></input>
						</form>
					</div>
				</div>
			</li>

		<!-- END categories -->
		</ul>

		<button class="btn btn-lg btn-primary" id="save">Save</button>
		<button class="btn btn-lg btn-primary" id="addNew">Add New</button>
	</div>

	<div id="new-category-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="Add New Modal" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h3>Create New Category</h3>
				</div>
				<div class="modal-body">
					<div>
						<form class='form-horizontal'>
							<div class="control-group">
								<label class="control-label" for="inputName">Name</label>
								<div class="controls">
									<input class="form-control" type="text" id="inputName" placeholder="Name" value="">
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="inputDescription">Description</label>
								<div class="controls">
									<input class="form-control" type="text" id="inputDescription" placeholder="Description" value="">
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="inputIcon">Icon</label>
								<div class="controls">
									<div class="icon">
										<i data-name="icon" value="fa-pencil" class="fa fa-pencil fa-2x"></i>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" id="create-category-btn" href="#" class="btn btn-primary btn-lg btn-block">Create</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div id="category-permissions-modal" class="modal permissions-modal" tabindex="-1" role="dialog" aria-labelledby="Category Permissions" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h3>Category Permissions</h3>
				</div>
				<div class="modal-body">
					<p>The following users can read Topics in this Category</p>
					<ul class="members" id="category-permissions-read"></ul>

					<p>The following users can post and reply to Topics in this Category</p>
					<ul class="members" id="category-permissions-write"></ul>

					<hr />
					<form role="form">
						<div class="form-group">
							<label for="permission-search">User Search</label>
							<input class="form-control" type="text" id="permission-search" />
						</div>
					</form>
					<ul class="search-results"></ul>
					<form role="form">
						<div class="form-group">
							<label for="permission-group-pick">User Groups</label>
						</div>
					</form>
					<ul class="groups-results"></ul>
				</div>
			</div>
		</div>
	</div>

	<div id="icons" style="display:none;"><div class="icon-container"><div class="row fa-icons">
	 <div class="col-md-3"><i class="fa fa-doesnt-exist"></i></div><div class="col-md-3"><i class="fa fa-glass"></i></div><div class="col-md-3"><i class="fa fa-music"></i></div><div class="col-md-3"><i class="fa fa-search"></i></div><div class="col-md-3"><i class="fa fa-envelope-o"></i></div><div class="col-md-3"><i class="fa fa-heart"></i></div><div class="col-md-3"><i class="fa fa-star"></i></div><div class="col-md-3"><i class="fa fa-star-o"></i></div><div class="col-md-3"><i class="fa fa-user"></i></div><div class="col-md-3"><i class="fa fa-film"></i></div><div class="col-md-3"><i class="fa fa-th-large"></i></div><div class="col-md-3"><i class="fa fa-th"></i></div><div class="col-md-3"><i class="fa fa-th-list"></i></div><div class="col-md-3"><i class="fa fa-check"></i></div><div class="col-md-3"><i class="fa fa-times"></i></div><div class="col-md-3"><i class="fa fa-search-plus"></i></div><div class="col-md-3"><i class="fa fa-search-minus"></i></div><div class="col-md-3"><i class="fa fa-power-off"></i></div><div class="col-md-3"><i class="fa fa-signal"></i></div><div class="col-md-3"><i class="fa fa-cog"></i></div><div class="col-md-3"><i class="fa fa-trash-o"></i></div><div class="col-md-3"><i class="fa fa-home"></i></div><div class="col-md-3"><i class="fa fa-file-o"></i></div><div class="col-md-3"><i class="fa fa-clock-o"></i></div><div class="col-md-3"><i class="fa fa-road"></i></div><div class="col-md-3"><i class="fa fa-download"></i></div><div class="col-md-3"><i class="fa fa-arrow-circle-o-down"></i></div><div class="col-md-3"><i class="fa fa-arrow-circle-o-up"></i></div><div class="col-md-3"><i class="fa fa-inbox"></i></div><div class="col-md-3"><i class="fa fa-play-circle-o"></i></div><div class="col-md-3"><i class="fa fa-repeat"></i></div><div class="col-md-3"><i class="fa fa-refresh"></i></div><div class="col-md-3"><i class="fa fa-list-alt"></i></div><div class="col-md-3"><i class="fa fa-lock"></i></div><div class="col-md-3"><i class="fa fa-flag"></i></div><div class="col-md-3"><i class="fa fa-headphones"></i></div><div class="col-md-3"><i class="fa fa-volume-off"></i></div><div class="col-md-3"><i class="fa fa-volume-down"></i></div><div class="col-md-3"><i class="fa fa-volume-up"></i></div><div class="col-md-3"><i class="fa fa-qrcode"></i></div><div class="col-md-3"><i class="fa fa-barcode"></i></div><div class="col-md-3"><i class="fa fa-tag"></i></div><div class="col-md-3"><i class="fa fa-tags"></i></div><div class="col-md-3"><i class="fa fa-book"></i></div><div class="col-md-3"><i class="fa fa-bookmark"></i></div><div class="col-md-3"><i class="fa fa-print"></i></div><div class="col-md-3"><i class="fa fa-camera"></i></div><div class="col-md-3"><i class="fa fa-font"></i></div><div class="col-md-3"><i class="fa fa-bold"></i></div><div class="col-md-3"><i class="fa fa-italic"></i></div><div class="col-md-3"><i class="fa fa-text-height"></i></div><div class="col-md-3"><i class="fa fa-text-width"></i></div><div class="col-md-3"><i class="fa fa-align-left"></i></div><div class="col-md-3"><i class="fa fa-align-center"></i></div><div class="col-md-3"><i class="fa fa-align-right"></i></div><div class="col-md-3"><i class="fa fa-align-justify"></i></div><div class="col-md-3"><i class="fa fa-list"></i></div><div class="col-md-3"><i class="fa fa-outdent"></i></div><div class="col-md-3"><i class="fa fa-indent"></i></div><div class="col-md-3"><i class="fa fa-video-camera"></i></div><div class="col-md-3"><i class="fa fa-picture-o"></i></div><div class="col-md-3"><i class="fa fa-pencil"></i></div><div class="col-md-3"><i class="fa fa-map-marker"></i></div><div class="col-md-3"><i class="fa fa-adjust"></i></div><div class="col-md-3"><i class="fa fa-tint"></i></div><div class="col-md-3"><i class="fa fa-pencil-square-o"></i></div><div class="col-md-3"><i class="fa fa-share-square-o"></i></div><div class="col-md-3"><i class="fa fa-check-square-o"></i></div><div class="col-md-3"><i class="fa fa-arrows"></i></div><div class="col-md-3"><i class="fa fa-step-backward"></i></div><div class="col-md-3"><i class="fa fa-fast-backward"></
	</div></div></div>
</div>