<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'/>
  <link href='/app/icon.png?<%=obj.nocache%>' rel='apple-touch-icon' />
  <link href='/ext/codemirror/codemirror.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/ext/mapbox.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/base/base.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/app.css?<%=obj.nocache%>' rel='stylesheet' />
  <link href='/app/source.css?<%=obj.nocache%>' rel='stylesheet' />
  <script src='/ext/underscore-min.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/codemirror.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/runmode.js?<%=obj.nocache%>'></script>
  <script src='/ext/codemirror/sql.js?<%=obj.nocache%>'></script>
  <script src='/ext/jquery-2.0.3.min.js?<%=obj.nocache%>'></script>
  <script src='/ext/jquery.sortable.js?<%=obj.nocache%>'></script>
  <script src='/ext/sexagesimal.js?<%=obj.nocache%>'></script>
  <script src='/ext/backbone.js?<%=obj.nocache%>'></script>
  <script src='/ext/mapbox.js?<%=obj.nocache%>'></script>
  <script src='/app/sourceref.js?<%=obj.nocache%>'></script>
  <script src='/app/lib.js?<%=obj.nocache%>'></script>
  <script src='/app/source.js?<%=obj.nocache%>'></script>
  <script src='/app/atom.js?<%=obj.nocache%>'></script>
  <%= this.analytics(obj) %>
  <title><%= source.name %></title>
</head>

<body id='view' class='<%= agent %> <%= source._tmp ? 'tmp' : '' %> <%= isMapboxAPI ? 'api-mapbox' : 'api-offline' %> clip dark'><div id='app' class='pin-top pin-bottom mobile-cols'>

<a id='settings'></a>
<a id='docs'></a>
<a id='user'></a>

<div id='perf'></div>

<div id='modal-content' class='modal-content animate'></div>

<div id='drawers' class='animate fill-dark col3 offcanvas-left animate pin-left z10 clip'>

  <form id='settings-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top pad1 keyline-bottom'>
      <h3>Settings</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='pin-left top1 scroll-styled'>
      <fieldset class='clearfix pad1y keyline-bottom contain'>
        <div class='z10 pin-top pin-bottom col12 pad1x fill-disable on-tmp on-changed'>
        </div>
        <div class='on-tmp on-changed z10 pad0y pad1x micro center truncate pin-top fill-dark keyline-top'>
          <strong class='icon floppy'>Save source</strong> to enable upload
        </div>
        <section class='pad1 contain on-api-mapbox'>
          <div id='mapstatus-mapid' class='pad0y pad1x center truncate round-top space small animate fill-darken1'>
            <strong>Map ID</strong>
            <a href='https://www.mapbox.com/data/' class='quiet js-mapid' target='_blank'><%= _(source._prefs.mapid).escape() || 'Source not uploaded' %></a>
          </div>
          <a href='/upload?id=<%= source.id %>' class='col12 short button round-bottom icon up'>Upload to Mapbox</a>
        </section>
        <section class='pad1 contain on-api-offline'>
          <a href='/mbtiles?id=<%= source.id %>' class='col12 short button icon package'>Export to MBTiles</a>
        </section>
        <section class='small center'>
          <a href='#' class='js-sourcenewstyle inline pad0 small col12 icon paint'>Create style from source</a>
        </section>
        <section class='small center on-api-mapbox'>
          <a href='/mbtiles?id=<%= source.id %>' class='icon package'>Export to MBTiles</a>
        </section>
      </fieldset>
      <fieldset class='pad1x'>
        <section class='space-bottom1'>
          <label>Name</label>
          <input class='stretch short small' name='name' type='text' value='<%= _(source.name).escape() %>'/>
        </section>
        <section class='space-bottom1'>
          <label>Description</label>
          <textarea class='stretch short small' name='description' type='text' cols='60' rows='8'><%= source.description %></textarea>
        </section>
        <section>
          <label>Attribution</label>
          <input class='stretch short small' name='attribution' type='text' value='<%= _(source.attribution).escape() %>'></textarea>
        </section>
      </fieldset>
      <fieldset class='pad1x pad2y keyline-top'>
          <section class='space-bottom2 clearfix'>
            <label class='micro inline col4'>Center</label>
            <div class='micro fill-darken1 pad0x clip col8 contain round'>
              <span class='js-savedCenter'><%= source.center[0].toFixed(4) %>,<%= source.center[1].toFixed(4) %>,<%= source.center[2] %></span>
              <a href='#settings' class='js-lockCenter icon lock pin-right round-right fill-darken2-onactive <%= !source._prefs.saveCenter ? 'active' : '' %>'></a>
            </div>
          </section>
          <section class='space-bottom2 clearfix'>
            <label class='micro inline col4'>Minzoom</label>
            <div class='col8'>
              <input id='minzoom' name='minzoom' class='min zoomrange' type='range' value='<%= source.minzoom %>' min='0' max='16' step='1' oninput='rangeHandler(this, "max", "#maxzoom");' />
              <span class='micro quiet inline range' id='minzoom-val'><%= source.minzoom %></span>
            </div>
          </section>
          <section class='space-bottom2 clearfix'>
            <label class='micro inline col4'>Maxzoom</label>
            <div class='col8'>
              <input id='maxzoom' name='maxzoom' class='max zoomrange' type='range' value='<%= source.maxzoom %>' min='0' max='16' step='1' oninput='rangeHandler(this, "min", "#minzoom");' />
              <span class='micro quiet inline range' id='maxzoom-val'><%= source.maxzoom %></span>
            </div>
          </section>
      </fieldset>
    </div>
  </form>

  <div id='docs-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='pin-top keyline-botom pad1 keyline-bottom'>
      <h3>Documentation</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <div class='col12 pin-left top1 scroll-styled'>
    <%=this['sourcereference']({sourceRef: sourceRef}) %>

    </div>
  </div>


  <div id='user-drawer' class='drawer col12 animate offcanvas-left'>
    <div class='row1 pin-top keyline-botom pad1 keyline-bottom'>
      <h3>Styles & Sources</h3>
      <a href='#' class='icon x pin-right pad1 quiet'></a>
    </div>
    <%= this.history(obj) %>
  </div>

<!-- animate -->
  <div class='drawer col12 animate offcanvas-left'>

  </div>
<!-- end animation -->

</div>

<div id='full' class='clip dark fill-dark animate pin-left'>
  <div id='map' class='animate fill-canvas' style='background-color:<%=source.background%>;'></div>
  <div class='loading' id='map-overlay'></div>
  <div id='map-errors'></div>

  <form id='search' class='z10 contain round animate search-results'>
    <input id='dosearch' type='text' class='col12 clean small round' value='' placeholder='Search' autocomplete='off' />
    <ul id='search-results' class='clip scroll-styled round-bottom'></ul>
  </form>
  <div class='map-controls pin-top row1'>
    <div class='pin-left z1 pad0 row1 truncate'>
      <a href='#search' class='search-n button short icon search quiet'></a>
      <a href='#' class='search-y button short icon active icon search quiet'></a>

      <a id='' href='#full' title='Toggle fullscreen' class='button short icon fullscreen full-n quiet'></a>
      <a href='#' title='Exit fillscreen' class='button short icon quiet active fullscreen full-y'></a>

      <div class='pill'>
      <a id='zoom-in' class='button short icon plus quiet'></a><!--
   --><a id='zoom-out' class='button short icon minus quiet'></a>
      </div>
    </div>
    <div class='pin-top text-right fill-dark z0 pad0 row1'>
      <span id='map-center' class='quiet inline micro strong pad0y align-top js-mapCenter'></span>
      <div id='zoomedto' class='align-top text-right inline contain zoom<%=source.center[2]%>'></div>
    </div>
  </div>
</div>

<%
  var revlayers = source.Layer.slice(0);
  revlayers.reverse();
%>


<div id='source-ui' class='z1 animate fill-dark dark col6 pin-right'>

<!-- add animation for code -->

<!-- end animation for code -->


  <div id='layers'>
    <div class='fill-darken1 pad1 clearfix'>
      <a href='#' class='js-addlayer short button col6 icon plus'>New layer</a>
    </div>
    <nav class='clip row1 col12 keyline-top keyline-bottom fill-dark contain z1'>
      <strong class='col6 pad1'>Layers</strong>
      <div class='pin-right center col6 strong small'>
        <span class='pad0x pad1y keyline-left col4 source-label'>Visibility</span>
        <span class='pad0x pad1y keyline-left col4 source-label'>Refresh</span>
        <span class='pad0x pad1y keyline-left col4 source-label'>Delete</span>
      </div>
    </nav>

    <div class='col12' id='editor'>
    <%
      _(revlayers).each(_(function(l) {
        var type = (l.Datasource && l.Datasource.type);
        var vlayer = _(source.vector_layers).find(function(v) { return v.id === l.id; });
        if (this['layer' + type]) print(this['layer' + type](_({
            tm: tm,
            fields: vlayer ? vlayer.fields : null
        }).extend(l)));
      }).bind(this));
    %>
    </div>

    <div class='js-layer-content layer-content pin-left col12 scroll-styled'>
    <%
       _(revlayers).each(_(function(l) {
        print(this.layeritem(_({_prefs:source._prefs}).extend(l)));
      }).bind(this));
    %>
    </div>
    <%= this.emptystate({message:'You haven\'t imported any data layers yet. <a href="#" class="js-addlayer">Add one now</a>.'}) %>
  </div>
</div>

<div id='toolbar' class='center pad1 dark z10'>
  <% if (source._tmp) { %>
  <a class='toolbar-button strong icon saveas js-saveas floppy' href='#'>Save as</a>
  <% } else { %>
  <a class='toolbar-button strong icon save js-save floppy' href='#'><span class='saved-y'>Save</span><span class='saved-n'>Saved</span></a>
  <% } %>
  <a class='toolbar-button strong icon settings-n sprocket' href='#settings'>Settings</a>
  <a class='toolbar-button strong icon settings-y sprocket active fill-lighten1' href='#'>Settings</a>
  <a class='toolbar-button strong icon docs-n info' href='#docs'>Docs</a>
  <a class='toolbar-button strong icon docs-y info active fill-lighten1' href='#'>Docs</a>

  <div class='user-icon pad1 pin-bottom'>
    <a class='toolbar-button strong user-n' href='#user'><div class='icon inline avatar dot' style='background-image:url(<%= user.avatar %>)' /></div>Styles & Sources</a>
    <a class='toolbar-button strong user-y active fill-lighten1' href='#'><div class='inline icon avatar dot' style='background-image:url(<%= user.avatar %>)' /></div>Styles & Sources</a>
  </div>
</div>

</div>

<script>
var templates = {};
templates.modalbrowser = <%= this.modalbrowser.source %>;
templates.modalbrowsersave = <%= this.modalbrowsersave.source %>;
templates.modalbrowseropen = <%= this.modalbrowseropen.source %>;
templates.modaladdlayer = <%= this.modaladdlayer.source %>;
templates.modalupdatename = <%= this.modalupdatename.source %>;
templates.modalconfirm = <%= this.modalconfirm.source %>;
templates.modalerror = <%= this.modalerror.source %>;
templates.modalnewproject = <%= this.modalnewproject.source %>;
templates.newproject = <%= this.newproject.source %>;
templates.layeritem = <%= this.layeritem.source %>;
templates.layerfields = <%= this.layerfields.source %>;
templates.layershape = <%= this.layershape.source %>;
templates.layerpostgis = <%= this.layerpostgis.source %>;
templates.layersqlite = <%= this.layersqlite.source %>;
templates.layercsv = <%= this.layercsv.source %>;
templates.layerogr = <%= this.layerogr.source %>;
templates.layergdal = <%= this.layergdal.source %>;
templates.xraycolor = <%= this.xraycolor.source %>;
templates.xraypopup = <%= this.xraypopup.source %>;
templates.modalsourcenewstyle = <%= this.modalsourcenewstyle.source %>;
templates.layergeojson = <%= this.layergeojson.source %>;
templates.layertopojson = <%= this.layertopojson.source %>;

var tm = {};
tm.srs = <%= saferstringify(tm.srs, null, 2) %>;

var cwd = <%= saferstringify(cwd, null, 2) %>;
var source = <%= saferstringify(source, null, 2) %>;
var examples = <%= saferstringify(examples, null, 2) %>;
var revlayers = <%= saferstringify(revlayers, null, 2) %>;
var isMapboxAPI = <%= isMapboxAPI %>;

Source(templates, cwd, tm, source, revlayers, examples, isMapboxAPI);
</script>

<% if (test) { %>
  <script>window.testParams = <%= saferstringify(test, null, 0) %>;</script>
  <script src='/app/test/tape.js?<%=obj.nocache%>'></script>
  <script src='/app/test/app.test.source.js?<%=obj.nocache%>'></script>
<% } %>

</body>
</html>
