<div class="dialog-frame" style="width: 800px;">
  <div class="dialog-header" bind="dialogHeader">Align to Wikibase</div>
  <div class="dialog-body" bind="dialogBody">
    <p class="body-text">
      The schema alignment skeleton below specifies how your tabular data will be
      transformed into Wikibase statements. You can drag and drop columns in statements:
      they will be replaced by their values once you export the statements.
    </p>
    <div id="schema-alignment-tabs" class="refine-tabs">
      <ul>
          <li><a href="#schema-alignment-tabs-schema">Schema</a></li>
          <li><a href="#schema-alignment-tabs-warnings">Warnings</a></li>
          <li><a href="#schema-alignment-tabs-preview-qs">QuickStatements preview</a></li>
      </ul>
      <div id="schema-alignment-tabs-schema">
          <div class="schema-alignment-dialog-canvas">
            <p class="schema-alignment-columns-header">Columns:</p>
            <div class="schema-alignment-dialog-columns-area">
            </div>
            <div class="schema-alignment-dialog-statements-area">
                <div id="schema-alignment-statements-container">
                </div>
                <div class="wbs-toolbar"><a class="wbs-add-item" bind="addItemButton">add item</a></div>
            </div>
          </div>
      </div>
      <div id="schema-alignment-tabs-warnings" style="display: none;">
          <div class="invalid-schema-warning">Your schema is incomplete, fix it to see the warnings.</div>
         <div class="schema-alignment-dialog-warnings"></div>
      </div>
      <div id="schema-alignment-tabs-preview-qs" style="display: none;">
          <div class="invalid-schema-warning">Your schema is incomplete, fix it to see the preview.</div>
          <div class="schema-alignment-dialog-preview"></div>
      </div>
    </div>
  </div>
  <div class="dialog-footer" bind="dialogFooter"><div class="grid-layout layout-normal layout-full"><table><tr>
    <td>
      <button class="button" bind="resetButton">Reset</button>
    </td>
    <td style="text-align:right;">
      <button class="button button-primary" bind="saveButton">Save</button>
    </td>
    <td style="text-align:center;" width="30%">
      <span class="schema-alignment-status-indicator" bind="statusIndicator"></span>
    </td>
    <td style="text-align:right;" width="1%">
      <button class="button" bind="closeButton">Close</button>
    </td>
  </tr></table></div></div>
</div>