ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.html

<style include="iron-flex">
  .button-box {
    align-items: center;
    display: flex;
    min-height: 48px;
  }

  .label {
    color: var(--cr-secondary-text-color);
    font-size: 85%;
  }


  /* A row with two lines of text.
   * Consistnt with chrome/browser/resources/settings/settings_shared_css.html
   * (which can not be imported here because this is in cr_components).
   */
  .two-line {
    min-height: var(--settings-row-two-line-min-height);
  }

  .value {
    color: var(--cr-primary-text-color);
  }
</style>
<cr-dialog id="dialog" show-on-attach show-close-button close-text="[[i18n('close')]]">
  <div slot="title">
    [[i18n('certificateProvisioningDetails')]]
  </div>
  <div slot="body">
    <div class="two-line">
      <div class="label" aria-describedby="certProfileName">
        [[i18n('certificateProvisioningProfileName')]]
      </div>
      <div class="value" id="certProfileName" aria-hidden="true">
        [[model.certProfileName]]
      </div>
    </div>
    <div class="two-line">
      <div class="label" aria-describedby="certProfileId">
        [[i18n('certificateProvisioningProfileId')]]
      </div>
      <div class="value" id="certProfileId" aria-hidden="true">
        [[model.certProfileId]]
      </div>
    </div>
    <div class="button-box">
      <div class="two-line flex">
        <div class="label" aria-describedby="status">
          [[i18n('certificateProvisioningStatus')]]
        </div>
        <span class="value" id="status" aria-hidden="true">
          [[model.status]]
        </span>
      </div>
      <cr-button id="refresh" role="button" on-click="onRefresh_">
        [[i18n('certificateProvisioningRefresh')]]
      </cr-button>
    </div>
    <div class="two-line">
      <div class="label" aria-describedby="timeSinceLastUpdate">
        [[i18n('certificateProvisioningLastUpdate')]]
      </div>
      <div class="value" id="timeSinceLastUpdate" aria-hidden="true">
        [[model.timeSinceLastUpdate]]
      </div>
    </div>
    <hr></hr>
    <cr-expand-button expanded="{{advancedExpanded_}}"
        aria-expanded$="[[boolToString_(advancedOpened)]]">
      <div>[[i18n('certificateProvisioningAdvancedSectionTitle')]]</div>
    </cr-expand-button>
    <iron-collapse id="advancedInfo" opened="[[advancedExpanded_]]">
      <div class="two-line">
        <div class="label" aria-describedby="stateId">
          [[i18n('certificateProvisioningStatusId')]]
        </div>
        <div class="value" id="stateId" aria-hidden="true">
          [[model.stateId]]
        </div>
      </div>
      <div class="two-line">
        <div class="label" aria-describedby="publicKey">
          [[i18n('certificateProvisioningPublicKey')]]
        </div>
        <div class="value" id="publicKey" aria-hidden="true">
          [[model.publicKey]]
        </div>
      </div>
    </iron-collapse>
  </div>
</cr-dialog>