<div class="dialog-frame" style="width: 800px;">
  <div class="dialog-header" bind="dialogHeader">Align to Freebase's Schemas</div>
  <div class="dialog-body" bind="dialogBody">
    <p class="body-text">
      The schema alignment skeleton below specifies how your grid-shaped data will be
      transformed into graph-shaped data in Freebase's schemas.
      <a href="http://code.google.com/p/google-refine/wiki/SchemaAlignment" target="_blank">Find out more ...</a>
    </p>
    <div id="schema-alignment-tabs" class="refine-tabs">
      <ul>
          <li><a href="#schema-alignment-tabs-protograph">Skeleton</a></li>
          <li><a href="#schema-alignment-tabs-preview-mqllike">MQL-like Preview</a></li>
          <li><a href="#schema-alignment-tabs-preview-tripleloader">TripleLoader Preview</a></li>
      </ul>
      <div id="schema-alignment-tabs-protograph">
          <div class="schema-alignment-dialog-canvas"></div>
      </div>
      <div id="schema-alignment-tabs-preview-mqllike" style="display: none;">
          <div class="schema-alignment-dialog-preview"></div>
      </div>
      <div id="schema-alignment-tabs-preview-tripleloader" style="display: none;">
          <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>
      <button class="button" bind="saveAndLoadButton">Save &amp; Load</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>