<div class="d-flex flex-row-reverse">
    <i class="fa fa-undo undo color-gray-dark bg-light bg-blue-light-hover pl-2  py-2 sm2 cursor-pointer font-weight-bold pr-4 mr-2" aria-hidden="true">&nbsp;&nbsp;Undo</i>
    <i class="fa fa-repeat redo color-gray-dark bg-light bg-blue-light-hover pl-2  py-2 sm2 cursor-pointer font-weight-bold pr-2" aria-hidden="true">&nbsp;&nbsp;Redo</i>
  </div>
  <div class="d-flex flex-row-reverse h-75">
    <div class="bg-light position-absolute h-75 w-40 p-2 zindex-1 text-dark mr-2 shadow">
      <div class="row mx-0 h-100">
      <div class="col-3 px-0 h-100 table-responsive scrollbar border-bottom-0 border-dark border-right">
          <h5 class="color-gray-dark">
            Layers List
          </h5>
          <ul class="nav nav-tabs d-block h-100 pr-2 pb-4">
            <%= _.template(templates['layer_list'])({ templates: templates, layer_list: data['layer_list'] }) %>
          </ul>
        </div>

        <div class="col-9 px-1">
          <div class="tab-content">
            <% data['layer_list'].map(function(layer, index) { %>
              <div class="tab-pane <%= (index === 0) ? 'active show': '' %>" id="<%= layer.name %>-props">
                <!-- two tabs - one for Style, other for data -->
                <div class="row justify-content-between">
                  <div class="col-3">
                    <div class="row">
                      <h6 title="<%= layer.name %>" class="col-10 mb-0 text-ellipsis color-gray-dark">
                        <%= layer.name[0].toUpperCase() + layer.name.slice(1) %>
                      </h6>
                      <i class="col-2 p-0 fa fa-pencil-square-o cursor-pointer" aria-hidden="true"></i>
                    </div>
                  </div>
                  <!-- data, scale, style tabs -->
                  <%= _.template(templates['data_range_tabs'])({ templates: templates, layer: {name: layer.name} }) %>
                </div>
                <div class="divider border-dark m-0 pb-2"></div>
                <div class="row">
                  <div class="col-5 prop-list">
                    <ul class="nav nav-tabs d-block border-right border-bottom-0 border-dark pb-4 pr-1 h-75 table-responsive scrollbar">
                      <%= _.template(templates['property_list'])({ templates: templates, property_list: data['property_list'][layer.name]}) %>
                    </ul>
                  </div>
                  <div class="col-7 prop-detail pl-0">
                    <div class="tab-content">
                      <%= _.template(templates['property_detail'])({ templates: templates, property_list: data['property_list'][layer.name]}) %>
                    </div>
                  </div>
                </div>
              </div>
            <% }) %>
          </div>
        </div>
      </div>
    </div>
  </div>
