<ng-container *ngIf="selection">
  <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
         data-testid="config-details-table">
    <tbody>
      <tr>
        <td i18n
            class="bold w-25">Name</td>
        <td class="w-75">{{ selection.name }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Description</td>
        <td>{{ selection.desc }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Long description</td>
        <td>{{ selection.long_desc }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Current values</td>
        <td>
          <span *ngFor="let conf of selection.value; last as isLast">
            {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br />
          </span>
        </td>
      </tr>
      <tr>
        <td i18n
            class="bold">Default</td>
        <td>{{ selection.default }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Daemon default</td>
        <td>{{ selection.daemon_default }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Type</td>
        <td>{{ selection.type }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Min</td>
        <td>{{ selection.min }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Max</td>
        <td>{{ selection.max }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Flags</td>
        <td>
          <span *ngFor="let flag of selection.flags">
            <span title="{{ flags[flag] }}">
              <span class="badge badge-dark me-2">{{ flag | uppercase }}</span>
            </span>
          </span>
        </td>
      </tr>
      <tr>
        <td i18n
            class="bold">Services</td>
        <td>
          <span *ngFor="let service of selection.services">
            <span class="badge badge-dark me-2">{{ service }}</span>
          </span>
        </td>
      </tr>
      <tr>
        <td i18n
            class="bold">Source</td>
        <td>{{ selection.source }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Level</td>
        <td>{{ selection.level }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Can be updated at runtime (editable)</td>
        <td>{{ selection.can_update_at_runtime | booleanText }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Tags</td>
        <td>{{ selection.tags }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">Enum values</td>
        <td>{{ selection.enum_values }}</td>
      </tr>
      <tr>
        <td i18n
            class="bold">See also</td>
        <td>{{ selection.see_also }}</td>
      </tr>
    </tbody>
  </table>
</ng-container>
