<article class="api">
	<header class="api-introduce">
		<h3 t=1 style="color:#8a3838"><i class="ion-aperture" style="color:#8a3838"></i> {{#title}}</h3>
		<p>{{#introduce}}</p>
	</header>

	<div class="api-usage">
		<h3 t=2>Usage</h3>
		{{* each [us] in usages }}
			{{ if(us!==""){ }}
			<div class="usage-example">{{#us}}</div>
			{{ } else { }}
			<br>
			{{ } }}
		{{* end }}
	</div>

	{{* exist params }}
	<div class="api-params">
		<h3 t=3>Params</h3>
		{{* each [param] in params }}
		<div class="param">
			<b><i class="ion-ios-cog" style="vertical-align: -1px;"></i> {{#param.name}}</b>
			<span>[ {{#param.type}} ]</span>
		</div>
		{{* end }}
	</div>
	{{* end }}

	{{* exist info }}
	<div class="api-info">
		<h3 t=4>Info</h3>
		<div>{{#info}}</div>
	</div>
	{{* end }}

	{{* exist related }}
	<div class="api-related">
		<h3 t=5>Related</h3>
		<div>
			{{* each [link] in related }}
			<a class="relate-link" href="#api@s={{#link.target}}"><i class="ion-star"></i> {{#link.name}}</a>
			{{* end }}
		</div>
	</div>
	{{* end }}

	{{* exist examples }}
	<div class="api-examples">
		<h3 t=6>Examples</h3>

		{{* each [e] in examples }}
		<div class="example">
			<h5 tc=6>{{#e.title}}</h5>
			<section style="display:flex">
				<div class="example-code">
					<pre class="{{#e.not ? "not-code" : "code"}} sh_javascript" 
						style="background-color: #f7f7f7;">{{#e.code}}</pre>
				</div>

				<div class="example-preview">
				{{ if(e.preview){ }}
					<div class="example-mount" id="{{#e.preview}}"></div>
				{{ } }}
				</div>
			</section>
		</div>
		{{* end }}
	</div>
	{{* end }}
	<hr>
</article>
