<div class="page hidden" id="certificateManagerPage">
  <h1 i18n-content="certificateManagerPage"></h1>

  <!-- Navigation tabs -->
  <div class="subpages-nav-tabs">
    <span id="personal-certs-nav-tab" class="tab"
        tab-contents="personalCertsTab">
      <span class="tab-label"
          i18n-content="personalCertsTabTitle"></span>
      <span class="active-tab-label"
          i18n-content="personalCertsTabTitle"></span>
    </span>
    <span id="server-certs-nav-tab" class="tab"
        tab-contents="serverCertsTab">
      <span class="tab-label"
          i18n-content="serverCertsTabTitle"></span>
      <span class="active-tab-label" i18n-content="serverCertsTabTitle"></span>
    </span>
    <span id="ca-certs-nav-tab" class="tab"
        tab-contents="caCertsTab">
      <span class="tab-label" i18n-content="caCertsTabTitle"></span>
      <span class="active-tab-label" i18n-content="caCertsTabTitle"></span>
    </span>
    <span id="other-certs-nav-tab" class="tab"
        tab-contents="otherCertsTab">
      <span class="tab-label"
          i18n-content="unknownCertsTabTitle"></span>
      <span class="active-tab-label" i18n-content="unknownCertsTabTitle"></span>
    </span>
  </div>

  <!-- TODO(mattm): get rid of use of tables? -->

  <!-- Tab contents -->
  <div id="personalCertsTab" class="subpages-tab-contents">
    <table class="certificate-tree-table">
      <tr><td>
        <span i18n-content="personalCertsTabDescription"></span>
      </td></tr>
      <tr><td>
        <tree id="personalCertsTab-tree" class="certificate-tree"></tree>
      </td></tr>
      <tr><td>
        <button id="personalCertsTab-view" i18n-content="view_certificate"
          disabled></button>
        <!-- TODO(mattm):
        <button id="personalCertsTab-backup-all"
          i18n-content="export_all_certificates"
          disabled></button>
        -->
        <button id="personalCertsTab-import" i18n-content="import_certificate"
          ></button>
        <if expr="pp_ifdef('chromeos')">
          <button id="personalCertsTab-import-and-bind"
            i18n-content="importAndBindCertificate" disabled></button>
        </if>
        <button id="personalCertsTab-backup" i18n-content="export_certificate"
          disabled></button>
        <button id="personalCertsTab-delete" i18n-content="delete_certificate"
          disabled></button>
      </td></tr>
    </table>
  </div>

  <div id="serverCertsTab" class="subpages-tab-contents">
    <table class="certificate-tree-table">
      <tr><td>
        <span i18n-content="serverCertsTabDescription"></span>
      </td></tr>
      <tr><td>
        <tree id="serverCertsTab-tree" class="certificate-tree"></tree>
      </td></tr>
      <tr><td>
        <button id="serverCertsTab-view" i18n-content="view_certificate"
          disabled></button>
        <!-- TODO(mattm):
        <button id="serverCertsTab-edit" i18n-content="edit_certificate"
          disabled></button>
        -->
        <button id="serverCertsTab-import" i18n-content="import_certificate"
          ></button>
        <button id="serverCertsTab-export" i18n-content="export_certificate"
          disabled></button>
        <button id="serverCertsTab-delete" i18n-content="delete_certificate"
          disabled></button>
      </td></tr>
    </table>
  </div>

  <div id="caCertsTab" class="subpages-tab-contents">
    <table class="certificate-tree-table">
      <tr><td>
        <span i18n-content="caCertsTabDescription"></span>
      </td></tr>
      <tr><td>
        <tree id="caCertsTab-tree" class="certificate-tree"></tree>
      </td></tr>
      <tr><td>
        <button id="caCertsTab-view" i18n-content="view_certificate"
          disabled></button>
        <button id="caCertsTab-edit" i18n-content="edit_certificate"
          disabled></button>
        <button id="caCertsTab-import" i18n-content="import_certificate"
          ></button>
        <button id="caCertsTab-export" i18n-content="export_certificate"
          disabled></button>
        <button id="caCertsTab-delete" i18n-content="delete_certificate"
          disabled></button>
      </td></tr>
    </table>
  </div>

  <div id="otherCertsTab" class="subpages-tab-contents">
    <table class="certificate-tree-table">
      <tr><td>
        <span i18n-content="unknownCertsTabDescription"></span>
      </td></tr>
      <tr><td>
        <tree id="otherCertsTab-tree" class="certificate-tree"></tree>
      </td></tr>
      <tr><td>
        <button id="otherCertsTab-view" i18n-content="view_certificate"
          disabled></button>
        <button id="otherCertsTab-export" i18n-content="export_certificate"
          disabled></button>
        <button id="otherCertsTab-delete" i18n-content="delete_certificate"
          disabled></button>
      </td></tr>
    </table>
  </div>

</div>