
<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">
      <div class="col-10">
        <h3>Data Mapper</h3>
      </div>
      <div class="col-2">
        <button type="button" class="btn btn-sm save-mapper bg-dark text-white">Next</button>
      </div>
    </div>
    <div class="row mx-0 h-100">
      <div id="data-mapper-template">
        <p>Make sure chart is rendered seemingly exact with new data</p>
        <table class="table table-responsive h-75 scrollbar mapper-table">
          <thead>
            <tr>
              <th scope="col">Gallery Columns</th>
              <th scope="col">Formhandler Columns</th>
            </tr>
          </thead>
          <tbody>
            <% gallery_columns.map(function(gallery_column) { %>
              <tr>
                <td>
                  <%= gallery_column %>
                </td>
                <td>
                  <% let id = "map-" + slug(gallery_column) %>
                  <%= _.template(templates['select'])({ data: { id: id, label: undefined, options: fh_col_names}}) %>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
