<div class='info hud'>
  <ul>
    <li>
      <h1><%= get('name') %></h1>
      <% if (get('description')) { %>
        <div class='description'><%= get('description') %></div>
      <% } %>
    </li>
    <% if (get('maxzoom')) { %>
    <li>
      <label>Zoom levels</label>
      <div class='zooms clearfix'>
      <% _(get('minzoom')).chain().range(get('maxzoom') + 1).each(function(zoom) { %>
        <span class='zoom zoom-<%= zoom %>'><%= zoom %></span>
      <% }); %>
      </div>
    </li>
    <% } %>
    <li>
      <label>Tile URL</label>
      <% _(get('tiles')).each(function(url) { %>
        <input class='text' type='text' value='<%= url %>' />
      <% }); %>
    </li>
    <% if (get('type')) { %>
      <li>
        <label>Type</label>
        <%= get('type') %>
      </li>
    <% } %>
    <% if (get('bounds')) { %>
      <li class='clearfix'>
        <label>Bounds</label>
        <div class='column'>
          N: <%= format('deg', get('bounds')[3]) %>&deg;<br/>
          S: <%= format('deg', get('bounds')[1]) %>&deg;
        </div>
        <div class='column'>
          E: <%= format('deg', get('bounds')[2]) %>&deg;<br/>
          W: <%= format('deg', get('bounds')[0]) %>&deg;
        </div>
      </li>
    <% } %>
  </ul>
</div>
