<tabset *ngIf="selection?.hasSingleSelection">
  <tab i18n-heading
       heading="Details">
    <table class="table table-striped table-bordered">
      <tbody>
        <tr>
          <td i18n
              class="bold col-sm-1">Name</td>
          <td class="col-sm-3">{{ selectedItem.name }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Description</td>
          <td class="col-sm-3">{{ selectedItem.desc }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Long description</td>
          <td class="col-sm-3">{{ selectedItem.long_desc }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Current values</td>
          <td class="col-sm-3">
            <span *ngFor="let conf of selectedItem.value; last as isLast">
              {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br/>
            </span>
          </td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Default</td>
          <td class="col-sm-3">{{ selectedItem.default }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Daemon default</td>
          <td class="col-sm-3">{{ selectedItem.daemon_default }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Type</td>
          <td class="col-sm-3">{{ selectedItem.type }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Min</td>
          <td class="col-sm-3">{{ selectedItem.min }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Max</td>
          <td class="col-sm-3">{{ selectedItem.max }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Flags</td>
          <td class="col-sm-3">
            <span *ngFor="let flag of selectedItem.flags">
              <span title="{{ flags[flag] }}">
                <span class="badge badge-pill badge-primary margin-right-sm">{{ flag | uppercase }}</span>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Services</td>
          <td class="col-sm-3">
            <span *ngFor="let service of selectedItem.services">
              <span class="badge badge-pill badge-primary margin-right-sm">{{ service }}</span>
            </span>
          </td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Source</td>
          <td class="col-sm-3">{{ selectedItem.source }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Level</td>
          <td class="col-sm-3">{{ selectedItem.level }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Can be updated at runtime (editable)</td>
          <td class="col-sm-3">{{ selectedItem.can_update_at_runtime | booleanText }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Tags</td>
          <td class="col-sm-3">{{ selectedItem.tags }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">Enum values</td>
          <td class="col-sm-3">{{ selectedItem.enum_values }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold col-sm-1">See also</td>
          <td class="col-sm-3">{{ selectedItem.see_also }}</td>
        </tr>
      </tbody>
    </table>
  </tab>
</tabset>
