<div id='<%= obj.id %>' class='js-layer'>

<div class='pad1'>
  <h4 class='contain mobile-cols clearfix'>
    <span class='col10 truncate'><%= obj.name || 'Untitled' %></span>
    <div class='pin-right'>
      <span class='fl inline icon round-left fill-lighten0 <%= obj.id.indexOf('tmsource:') === 0 ? 'harddrive' : 'cloud' %>'></span>
      <a href='#sources-<%=obj.id%>' class='fl round-right fill-darken1 js-recache icon refresh'></a>
    </div>
  </h4>
  <div class='quiet micro code sourceid'><%= obj.id %></div>
</div>

<%

if (obj.userlayers) {
  // Add vector tiles metadata to each layer in layers list in project settings
  var userlayers = _(obj.userlayers).map(function(value, i) {
    var layerClass = value.split('.')[1];
    var layerId = value.split('.').shift();

    // for each source layer, look for a matching user layer
    var match = _(obj.vector_layers).find(function(layer) {
      return layer.id === layerId;
    });

    // To avoid overwriting duplicate layers, create
    // new objects for each match
    var userlayer = {};
    if (match) for (var k in match) {
      userlayer[k] = match[k];
    }

    if (layerClass) { userlayer.layer_class = layerClass; }

    return userlayer;
  }).filter(function(l) { return l.id });
  var listlayers = userlayers;
} else {
  var listlayers = obj.vector_layers;
}

%>

<div class='keyline-top'>
  <% if (listlayers) { %>
  <% _(listlayers).chain().clone().reverse().each(_(function(l) { %>
  <div class='col12 contain clip layer' id='sources-<%=l.id%><% if (l.layer_class) { %><%=l.layer_class%><% }; %>'>
    <a href='#sources-<%=l.id%><% if (l.layer_class) { %><%=l.layer_class%><% }; %>' class='pin-left pin-right js-tab'></a>
    <div class='space small pad1x pad0y keyline-bottom <%=l.geometry ? l.geometry + 'icon' : ''%>'>
      <span class='icon round' style='background-color:<%=obj.xraycolor(l.id)%>'></span>
      <span>#<%=l.id%><% if (l.layer_class) { %>.<%=l.layer_class%><% }; %></span>
    </div>

    <div class='small center pin-right'>
      <span class='inline zooms pad0'>
        <% if (typeof l.minzoom === 'number' && typeof l.maxzoom === 'number') { %>
        z<%= l.minzoom||0 %>-<%= l.maxzoom||22 %>
        <% } %>
      </span>
    </div>
    <div class='description pad1'>
      <div class='small truncate col12'><%=l.description||'No description.'%></div>
      <div class='clearfix pad1y'>
        <% _(l.fields||{}).each(function(desc,name) { %>
        <div class='clearfix field'>
          <span class='col3'><%=name%> </span>
          <span class='col9 quiet'><%=desc||'No description.'%></span>
        </div>
        <% }); %>
      </div>
    </div>
  </div>
  <% }).bind(this)); %>
  <% } else { %>
  <div class='col12 contain clip layer pad1 small'>
    <strong class='block center icon alert space-bottom1'>No layers found</strong>
    Select image tiles from this source for styling as rasters using <code>#_image</code>
  </div>
  <% } %>
  </div>
</div>
