<div class="tag-docs">
[foreach var="groups" as="g"]
  <h3 class="tag-docs-group">{g.label}</h3>
  [foreach var="g.tags" as="t"]
    <article class="tag-doc-card">
      <header class="tag-doc-head">
        <code class="tag-doc-name">{t.syntax}</code>
        <h4 class="tag-doc-label">{t.label}</h4>
      </header>
      <p class="tag-doc-desc">{t.desc}</p>

      [if {t.params}]
        <div class="tag-doc-params">
          <div class="tag-doc-params-title">{params_label}</div>
          <table class="tag-doc-params-table">
            <thead>
              <tr><th>name</th><th></th><th>desc</th><th>example</th></tr>
            </thead>
            <tbody>
              [foreach var="t.params" as="p"]
                <tr>
                  <td><code>{p.name}</code></td>
                  <td>[if {p.required}]<span class="tag-doc-req required">{required_label}</span>[else]<span class="tag-doc-req">{optional_label}</span>[/if]</td>
                  <td>{p.desc}</td>
                  <td><code class="muted">{p.example}</code></td>
                </tr>
              [/foreach]
            </tbody>
          </table>
        </div>
      [/if]

      <div class="tag-doc-example">
        <div class="tag-doc-example-title">{example_label}</div>
        <pre><code>{t.example}</code></pre>
      </div>
    </article>
  [/foreach]
[/foreach]
</div>
