<%
var sections = {
    settings: {
      icon: 'sprocket',
      vts: sourceRef.references.settings,
      format: 'settings'
    },
    layers: {
      icon: 'layers',
      line: sourceRef.references.layers,
      format: 'layers'
    }
};
%>

<section class='small pad1x pad2y contain keyline-bottom'>
  <a class='icon space-bottom1 book button col12 short' href='https://www.mapbox.com/guides/source-quickstart/' target='_blank'>Source Quickstart</a>
  <a class='icon space-bottom1 book button col12 short' href='https://www.mapbox.com/guides/source-manual/' target='_blank'>Source Manual</a>
</section>

<!-- data format sections -->
<div id='reference'>
<% _(sections).each(function(sourcetype, name) { %>

<article id='reference-<%= name %>' class='small'>
  <div class='row pad1 contain section-name'>
    <span class='<%= sourcetype.icon %> icon quiet strong'><%= sourcetype.format %></span>
  </div>
  <% _(sourcetype).each(function(ref) {
    _(ref).chain()
      .filter(function(p) { return p.css; })
      .each(function(p) {
  %>
    <section id='reference-<%= p.css.replace(/[^\w+]/g,'_') %>' class='contain source-ref'>
      <a href='#reference-<%= p.css.replace(/[^\w+]/g,'_') %>' class='js-tab pin-left pin-right js-tab'></a>
      <div class='small pad1x pad0y keyline-bottom'><%= p.css %></div>
      <span class='quiet micro pin-topright pad0 code type'><%=_(p.type).isArray() ? 'keyword' : p.type%></span>
      </a>
      <div class='pad1 details clip'>
      <div class='quiet'>
        <% if (p['default-value'] !== undefined) { %>
        <div class='space-bottom0'>Default:</div>
          <div class='space-bottom1'>
          <% if (!(p['default-value'] === '')) {%>
            <span class='truncate micro code pad0x round fill-darken1 inline value'><%=p['default-value']%></span>
          <% } else { %>
            <span class='truncate micro code pad0x round inline fill-darken1'>no default value</span>
          <% } %>
          </div>
       <% } %>
        <% if (p.doc) { %><div class='space-bottom1 quiet description break-word small'><%=p.doc%></div><% } %>
      </div>
    </div>
  </section>
  <% }); %>
<% }); %>
</article>
<!-- end titles -->
<% }); %>
</div>
