{% load staticfiles i18n %}{% verbatim %}
<body class="maploom-body">

<div id="map" class="map">
  <div class="map-shadow"></div>
  <div id="pulldown" ng-controller="LoomPulldownController">
    <div id="pulldown-shadow">
      <div class="panel flat" id="map-title">
        <div class="panel-heading">
          <em id="map-name">
            <div class="map-title-text ellipsis">{{ mapService.getTitle() }}</div>
            <i id="saveButton" class="glyphicon pull-right" data-target="#saveMap"
               tooltip-placement="bottom" tooltip="{{'save_this_map' | translate}}" tooltip-append-to-body="true"
               ng-class="{'hide': !configService.username}" data-toggle="modal"></i>
            <i id="refreshButton" class="glyphicon pull-right" ng-click="refreshService.refreshLayers()"
               tooltip-placement="bottom" tooltip="{{'refresh_layers' | translate}}" tooltip-append-to-body="true"></i>
          </em>
          <!--<span ng-class="{'hidden': !notificationsPanel}" class="loom-notification-badge pull-right"></span>-->
        </div>
      </div>
      <div class="loom-search"></div>
      <div id="pulldown-menu" class="panel-group in">
        <div id="pulldown-content">
          <div class="panel" ng-show="notificationsPanel" ng-controller="LoomNotificationController">
            <div class="tooltip-mask" tooltip="{{notificationStartTime}}"
                 tooltip-append-to-body="true" tooltip-placement="right" data-toggle="collapse"
                 data-parent="#pulldown-content" data-target="#notification-panel"></div>
            <div class="panel-heading">
              <span translate="notifications_tab" >Notifications</span>
              <div ng-show="addLayers" stop-event='click' ng-controller="modalToggle"
                   ng-click="toggleModal('#generate-notification-dialog')"
                   tooltip-placement="top" tooltip="{{'generate_notification' | translate}}" tooltip-append-to-body="true"
                   class="glyphicon glyphicon-time panel-header-button pull-right"></div>
              <span class="loom-notification-badge pull-right" tooltip="{{'unread_notifications' | translate}}"
                    tooltip-append-to-body="true"
                    tooltip-placement="top"></span>
            </div>
            <div id="notification-panel" class="panel-collapse collapse pulldown-panel">
              <div notification-empty-text="'no_notifications' | translate"
                   class="loom-notifications">
              </div>
            </div>
          </div>
          <div class="panel" ng-show="layersPanel">
            <div class="panel-heading" data-toggle="collapse" data-parent="#pulldown-content"
                 data-target="#layer-manager-panel">
              <span translate="map_layers">Map Layers</span>
              <div ng-show="addLayers" stop-event='click' ng-controller="modalToggle" ng-click="toggleModal('#add-layer-dialog')"
                   tooltip-placement="top" tooltip="{{'add_layer_btn' | translate}}" tooltip-append-to-body="true"
                   class="glyphicon glyphicon-plus-sign panel-header-button pull-right"></div>
              <div id="server-loading" class="loom-loading pull-right" spinner-radius="20" spinner-width="3" spinner-hidden="!serversLoading"></div>
            </div>
            <div id="layer-manager-panel" class="panel-collapse collapse pulldown-panel">
              <div class="loom-layers"></div>
            </div>
          </div>
          <div class="panel" ng-show="syncPanel">
            <div class="panel-heading" data-toggle="collapse" data-parent="#pulldown-content"
                 data-target="#syncronization-panel">
              <span translate="synchronization">Synchronization</span>

              <div stop-event='click' ng-controller="modalToggle" ng-click="toggleModal('#configWindow')"
                   tooltip-placement="top" tooltip="{{'remote_options' | translate}}" tooltip-append-to-body="true"
                   class="glyphicon glyphicon-cog panel-header-button pull-right"></div>
            </div>
            <div id="syncronization-panel" class="panel-collapse collapse">
              <div class="loom-synclinks"></div>
            </div>
          </div>
          <div class="panel" ng-show="historyPanel" ng-controller="LoomHistoryController">
            <div class="panel-heading fixed-height-header" data-toggle="collapse" data-parent="#pulldown-content"
                 data-target="#history-panel">
              <span class="ellipsis pulldown-menu-title">{{title}}</span>

              <div stop-event='click' ng-click="clearHistory()"
                   class="glyphicon glyphicon-remove pull-right panel-header-button"></div>
              <div stop-event='click' ng-controller="modalToggle" ng-click="toggleModal('#historyDiffWindow')"
                   tooltip-placement="top" tooltip="{{'history_summary' | translate}}" tooltip-append-to-body="true"
                   class="glyphicon glyphicon-list-alt pull-right panel-header-button"></div>
            </div>
            <div id="history-panel" class="loom-history-panel panel-collapse collapse pulldown-panel">History goes
              here.
            </div>
          </div>
          <div class="panel" ng-show="diffPanel" ng-controller="LoomDiffController">
            <div class="panel-heading fixed-height-header" data-toggle="collapse" data-parent="#pulldown-content"
                 data-target="#diff-panel">
              <span class="ellipsis pulldown-menu-title">{{title}}</span>

              <div ng-if="!isMerge" stop-event='click' ng-click="clearDiff()"
                   class="glyphicon glyphicon-remove panel-header-button pull-right"></div>
              <span ng-class="{'hidden': !(numConflicts > 0)}" class="badge pull-right">{{numConflicts}}</span>
            </div>
            <div id="diff-panel" class="loom-diff-panel panel-collapse collapse pulldown-panel">Diffs go here.</div>
          </div>
        </div>
      </div>
    </div>
    <button ng-disabled="!toggleEnabled" type="button" data-toggle="collapse" data-target="#pulldown-menu" translate="toggle_menu"
            class="toggle-menu toggle btn btn-default flat-top">Toggle Menu
    </button>
  </div>
  <div class="loom-notification-poster"></div>
  <div class="loom-legend"></div>
  <div class="loom-exclusive-mode"></div>
  <div id="zoom-to-world-border" class="map-btn-border" tooltip-append-to-body="true"
             tooltip-placement="left" tooltip="{{'zoom_world' | translate}}">
    <div id="zoom-to-world" ng-click="mapService.zoomToExtent()">
      <i class="glyphicon glyphicon-globe"></i>
    </div>
  </div>
  <div id="switch-coords-border" class="map-btn-border" tooltip-append-to-body="true"
       tooltip-placement="right" tooltip="{{'switch_coords' | translate}}">
    <div id="switch-coords" ng-click="mapService.switchMousePosCoordFormat()">
      <i class="glyphicon glyphicon-map-marker"></i>
    </div>
  </div>
  <div id="toggle-fullscreen-border" class="map-btn-border" tooltip-append-to-body="true"
       tooltip-placement="left" tooltip="{{'toggle_fullscreen' | translate}}">
    <div id="toggle-fullscreen" ng-click="mapService.toggleFullscreen()">
      <i class="glyphicon glyphicon-fullscreen"></i>
    </div>
  </div>
  <div class="loom-timeline"></div>
</div>
<!--modal titles are in a lower case underscore separated format so that they can be translated-->
<div loom-modal id="add-layer-dialog" modal-title="add_layers">
  <div loom-addlayers id="add-layers">
  </div>
</div>
<div loom-modal id="add-server-dialog" modal-title="add_server">
  <div loom-add-server id="add-server">
  </div>
</div>
<div loom-modal id="mergeWindow" modal-title="{{'merge' | translate}}" close-button="false">
  <div loom-merge id="merge">
  </div>
</div>
<div loom-modal id="historyDiffWindow" modal-title="{{'select_date_range' | translate}}" close-button="false">
  <div loom-history-diff id="historyDiff">
  </div>
</div>
<div loom-modal id="generate-notification-dialog" modal-title="{{'select_start_time' | translate}}" close-button="false">
  <div loom-generate-notification id="generateNotification">
  </div>
</div>
<div loom-modal id="addSyncWindow" modal-title="{{'add_sync' | translate}}">
  <div loom-addsync id="add-sync">
  </div>
</div>
<div loom-modal id="configWindow" modal-title="config">
  <div loom-syncconfig id="sync-config">
  </div>
</div>
<div loom-modal id="remoteSelectDialog" close-button="false" modal-title="remote">
  <div loom-remoteselect id="remote-select">
  </div>
</div>
<div loom-modal id="drawSelectDialog" close-button="false" modal-title="draw">
  <div loom-drawselect id="draw-select">
  </div>
</div>
<div loom-modal id="feature-diff-dialog" ng-controller="LoomFeatureDiffController" modal-title="{{title}}">
  <div class="loom-feature-diff" id="feature-diff">
  </div>
</div>
<div loom-modal id="attribute-edit-dialog" modal-title="{{'edit_attributes' | translate}}">
  <div class="loom-attribute-edit" id="edit-feature">
  </div>
</div>
<div loom-modal id="table-view-window" modal-title="{{'table_view' | translate}}" close-button="true">
  <div class="loom-table-view" id="table-view">
  </div>
</div>
<div loom-modal id="statistics-view-window" modal-title="{{'statistics_view' | translate}}"  close-button="true">
  <div class="loom-statistics-view" id="statistics-view">
  </div>
</div>
<div loom-modal id="layerInfoDialog" modal-title="layerinfo">
  <div loom-layer-info id="layer-info">
  </div>
</div>
<div loom-feature-info-box id="info-box" ng-show="featureManagerService.getSelectedItem() && featureManagerService.getEnabled()"
     class="feature-info-box-popup">
</div>
<div loom-modal id="saveMap" modal-title="{{ 'save_this_map' | translate}}">
    <div loom-save-map id="save-map">
    </div>
</div>

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
  <!-- The container for the modal slides -->
  <div class="slides"></div>
  <!-- Controls for the borderless lightbox -->
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
  <!-- The modal dialog, which will be used to wrap the lightbox content -->
  <div class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" aria-hidden="true">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body next"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left prev">
            <i class="glyphicon glyphicon-chevron-left"></i>
            Previous
          </button>
          <button type="button" class="btn btn-primary next">
            Next
            <i class="glyphicon glyphicon-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

{% endverbatim %}
