<div class="d-flex flex-row-reverse h-75">
  <div class="bg-dark position-absolute h-75 w-40 p-2 zindex-1 text-dark mr-2 shadow">
    <div class="row mx-0 h-100">
      <div class="w-100">
        <div class="row">
          <p class="col-10 text-white font-weight-bold sm1">How do you want to upload your data?</p>
          <div class="col-2">
            <button type="button" class="btn btn-sm dataloader-next bg-light">Next</button>
          </div>
        </div>
        <ul class="nav nav-tabs border-0 justify-content-around">
          <!-- <li class="nav-item w-25">
            <a href="#copy-paste-datatable" data-toggle="tab" class="horizontal-tab bg-blue-light-hover color-blue-on-hover px-4 text-center h-100 nav-link text-decoration-none">
              <i class="fa fa-lg fa-clipboard"></i>
              <div class="color-gray-dark pt-2 color-blue-on-hover font-weight-bold sm2">Copy & paste data table</div>
            </a>
          </li> -->
          <li class="nav-item position-relative w-25 active show">
            <div class="position-absolute w-100 h-100 pos-t pos-b pos-l pos-r">
              <input type="file" class="upload border-0" name="csv-file-input" id="csv-file-input" accept=".csv" />
              <label for="csv-file-input" class="mb-0 h-100">
                <a href="#csv-upload" data-toggle="tab" class="horizontal-tab bg-blue-light-hover color-blue-on-hover px-4 text-center h-100 nav-link text-decoration-none">
                  <i class="fa fa-lg fa-file-excel-o"></i>
                  <div class="color-gray-dark pt-2 color-blue-on-hover font-weight-bold sm2">CSV upload</div>
                </a>
              </label>
            </div>
          </li>
          <!-- <li class="nav-item w-25">
            <a href="#google-spreadsheet" data-toggle="tab" class="horizontal-tab bg-blue-light-hover color-blue-on-hover px-4 text-center h-100 nav-link text-decoration-none">
              <i class="fa fa-lg fa-table"></i>
              <div class="color-gray-dark pt-2 color-blue-on-hover font-weight-bold sm2">Import Google Spreadsheet</div>
            </a>
          </li> -->
          <li class="nav-item w-25">
            <a href="#external-url" data-toggle="tab" class="horizontal-tab bg-blue-light-hover color-blue-on-hover px-4 text-center h-100 nav-link text-decoration-none">
              <i class="fa fa-lg fa-link"></i>
              <div class="color-gray-dark pt-2 color-blue-on-hover font-weight-bold sm2">Link external dataset</div>
            </a>
          </li>
        </ul>
        <div class="tab-content">
          <!-- <div class="tab-pane mt-4" id="copy-paste-datatable">
            <textarea id="upload-data-text" placeholder="Paste your copied data here..."
              class="resize-none"
              ></textarea>
          </div> -->

          <div class="tab-pane active show mt-4" id="csv-upload">
            <div class="fh-table table-responsive"></div>
          </div>

          <!-- <div class="tab-pane" id="google-spreadsheet">
            <%= _.template(templates['google_spreadsheet'])({ templates: templates, data: data}) %>
          </div> -->

          <div class="tab-pane mt-4" id="external-url">
            <%= _.template(templates['external_url'])({ templates: templates, data: data}) %>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
