<div class="d-flex flex-row-reverse">
    <div class="color-gray-dark bg-dark bg-blue-light-hover pl-2 py-2 sm2 cursor-pointer font-weight-bold pr-4">
      <i class="fa fa-undo undo ">
      </i>
      <span>Undo</span>
    </div>
    <div class="color-gray-dark bg-dark bg-blue-light-hover pl-2 py-2 sm2 cursor-pointer font-weight-bold pr-4">
      <i class="fa fa-repeat redo">
      </i>
      <span>Undo</span>
    </div>
  </div>
  <div class="d-flex flex-row-reverse h-75">
    <div class="bg-dark position-absolute h-75 w-40 py-2 zindex-1 text-dark mr-2 shadow">
      <div class="row mx-0 h-100">
      <div class="col-3 px-0 h-100 scrollbar ">
          <h6 class="color-gray-dark  h-4 pb-2  mb-2 px-2">
            Components
          </h6>
          <ul class="nav nav-tabs d-block pr-2 border-0 pb-4 h-94">
            <%= _.template(templates['layer_list'])({ templates: templates, layer_list: data['layer_list'] }) %>
          </ul>
        </div>

        <div class="col-9 px-1">
          <div class="tab-content h-100">
            <% data['layer_list'].map(function(layer, index) { %>
              <div class="tab-pane h-100 <%= (index === 0) ? 'active show': '' %>" id="<%= layer.name %>-props">
                <!-- two tabs - one for Style, other for data -->
                <div class="row justify-content-between h-6">
                  <div class="col-12">
                      <h6 title="<%= layer.name %>" class="  mb-1 pb-2 text-ellipsis border border-top-0 border-left-0 border-right-0 text-white">
                        <%= 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>
                <!-- <div class="divider border-dark m-0 pb-2"></div> -->
                <div class="row  h-94">
                  <div class="col-5 prop-list">
                    <ul class="nav nav-tabs h-100  border-0 d-block  pb-4 pr-1 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 h-100">
                      <%= _.template(templates['property_detail'])({ templates: templates, property_list: data['property_list'][layer.name]}) %>
                    </div>
                  </div>
                </div>
              </div>
            <% }) %>
          </div>
        </div>
      </div>
    </div>
  </div>
