jquery.fancytree/demo/taxonomy-browser/details.tmpl.html

jQuery tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

<div id="tmplDetails">
	<div class="row">
		<div class="col-md-6">
			<dl>
				<dt>Scientific Name</dt>
					<dd>{{scientificName}}
					{{#if synonym}} <span class="label label-info">Synonym</span> {{/if}}
					</dd>
				{{#if vernacularName}}
				<dt>Vernacular Name</dt>
					<dd>{{vernacularName}}</dd>
				{{/if}}
				<dt>Canonical Name</dt>
					<dd>{{canonicalName}}</dd>
				<dt>Taxonomic Status</dt>
					<dd>{{taxonomicStatus}}</dd>
				<dt>According to</dt>
					<dd>{{accordingTo}}</dd>
				<dt>Key</dt>
					<dd>{{key}} (Nub: {{nubKey}})</dd>
				<dt>Habitat</dt>
					<dd>{{#if profile.marine}} Marine {{else}} Not marine {{/if}}</dd>
				<dt>Synonym(s)</dt>
					<dd>
						<ul>
							{{#each synonyms}}
							<li>
								<a href="#{{this.key}}">{{this.scientificName}}</a>
							</li>
							{{else}}
							<li>n.a.</li>
							{{/each}}
						</ul>
					</dd>
			</dl>
			</div>
		<div class="col-md-6">
			{{#if media}}
			<h4>Media</h4>
			<ul class="media-list">
				{{#each media}}
				<li class="media">
					<div class="media-left">
						<a href="{{this.identifier}}">
						  <img class="media-object" src="{{this.identifier}}" alt="{{this.title}}">
						</a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">{{this.title}}</h4>
						{{this.description}}<br>
						<small>
							{{#if this.source}}Source: {{this.source}} {{/if}}
							{{#if this.publisher}}, Publisher: {{this.publisher}} {{/if}}
							{{#if this.license}}, License: {{this.license}} {{/if}}
						</small>
					</div>
					{{/each}}
				</li>
			</ul>
			{{else}}
				No media available.
			{{/if}}
<!--
			{{#if media}}
				<div class="row">
				{{#each media}}
					<div class="col-xs-12 col-md-6 col-lg-3">
						<a href="{{this.identifier}}" class="thumbnail" target="_blank">
							<img src="{{this.identifier}}" alt="{{this.title}}" />
							<div class="caption">
								<small> {{this.title}} </small>
							</div>
						</a>
					</div>
				{{/each}}
				</div>
			{{else}}
				No media.
			{{/if}}
 -->
		</div>
	</div>

<!--
	<h4>Media</h4>

	{{#if media}}
	<div class="media">
		{{#each media}}
		<div class="media-left">
			<a class="pull-left" href="{{this.identifier}}" target="_blank">
			  <img class="media-object" src="{{this.identifier}}" alt="{{this.title}}">
			</a>
		</div>
		<div class="media-body">
			<h4 class="media-heading">{{this.title}}</h4>
			{{this.title}}
		</div>
		{{/each}}
	</div>
	{{else}}
		No media available.
	{{/if}}

 -->
	<h4>Description</h4>

	{{#if descriptions}}
	<!--
		<ul>
			{{#each descriptions}}
				<li>
					<a tabindex="0" role="button"
						data-toggle="popover" data-trigger="focus" data-placement="top"
						title="{{this.type}} {{this.source}}"
						data-content="{{this.description}}">
						{{this.type}} {{this.source}}
					</a>
				</li>
			{{/each}}
		</ul>
	-->
		<ul class="nav nav-pills">
			{{#each descriptionsByLang}}
				<!-- Nav tabs -->
				<li role="presentation" {{#if @first}}class="active"{{/if}}>
					<a href="#tabDesc{{@key}}" aria-controls="tabDesc{{@key}}" role="tab" data-toggle="tab">
						{{@key}}
						<span class="badge">{{this.length}}</span>
					</a>
				</li>
			{{/each}}
		</ul>
		<!-- Tab panes -->
		<div class="tab-content">
			{{#each descriptionsByLang}}
				<div role="tabpanel" class="tab-pane pane panel panel-default {{#if @first}}active{{/if}}"
					id="tabDesc{{@key}}">

					<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

					{{#each this}}
					  <div class="panel panel-default">
						<div class="panel-heading" role="tab" id="heading{{@../key}}{{@index}}">
						  <h4 class="panel-title">
							<a role="button" data-toggle="collapse" data-parent="#accordion"
							  href="#collapse{{@../key}}{{@index}}" aria-controls="collapse{{@../key}}{{@index}}"
							  aria-expanded="{{#if @first}}true{{else}}false{{/if}}" >
							  {{this.type}} <small>({{this.source}})</small>
							</a>
						  </h4>
						</div>
						<div id="collapse{{@../key}}{{@index}}"
						  class="panel-collapse collapse {{#if @first}}in{{/if}}"
						  role="tabpanel" aria-labelledby="heading{{@../key}}{{@index}}">
						  <div class="panel-body">
							{{this.description}}
						  </div>
						</div>
					  </div>
					{{/each}}
					</div>
				</div>
			{{/each}}
		</div>
<!--
		<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

		{{#each descriptions}}
		  <div class="panel panel-default">
			<div class="panel-heading" role="tab" id="heading{{@index}}">
			  <h4 class="panel-title">
				<a role="button" data-toggle="collapse" data-parent="#accordion"
				  href="#collapse{{@index}}" aria-controls="collapse{{@index}}"
				  aria-expanded="{{#if @first}}true{{else}}false{{/if}}" >
				  <span class="badge">{{this.language}}</span> {{this.type}} <small>({{this.source}})</small>
				</a>
			  </h4>
			</div>
			<div id="collapse{{@index}}"
			  class="panel-collapse collapse {{#if @first}}in{{/if}}"
			  role="tabpanel" aria-labelledby="heading{{@index}}">
			  <div class="panel-body">
				{{this.description}}
			  </div>
			</div>
		  </div>
		{{/each}}
		</div>
-->
	{{else}}
		No description available.
	{{/if}}
</div>