<div class="fit-h d-flex flex-wrap a-i-stretch">
  <i
    class="c8y-icon c8y-icon-duocolor asset-notes-icon"
    [c8yIcon]="'c8y-notification'"
  ></i>

  @if (!editable()) {
    <div class="asset-notes-content">
      @if (isLoading()) {
        <c8y-loading></c8y-loading>
      }
      <div class="text-break-word asset-notes-body">
        @if (notes()?.htmlContent && !isLoading()) {
          <span
            class="markdown-content d-inline-block"
            [innerHTML]="notes()?.htmlContent | markdownToHtml | async"
          ></span>
        } @else if (!notes()?.htmlContent) {
          <span>
            {{ 'No notes yet.' | translate }}
          </span>
        }

        @if (!isLoading()) {
          <button
            class="btn btn-link btn-sm"
            title="{{ 'Edit' | translate }}"
            type="button"
            (click)="toggleEdit()"
          >
            <i c8yIcon="pencil"></i>
            {{ 'Edit' | translate }}
          </button>
        }
      </div>
    </div>
    <div class="asset-notes-footer m-t-8">
      <small class="text-muted">
        @if (notes()?.lastUpdated) {
          <em
            ngNonBindable
            translate
            [translateParams]="ngNonBindableTranslate()"
          >
            {{ lastUpdated }} by {{ user }}
          </em>
        }
      </small>
    </div>
  } @else {
    <div class="fit-h flex-grow">
      <div class="d-flex a-i-stretch fit-h">
        <textarea
          class="form-control fit-h text-monospace"
          [attr.aria-label]="'Notes' | translate"
          rows="5"
          [(ngModel)]="notes().htmlContent"
          c8y-code-editor
        ></textarea>
        <div class="input-group-btn a-s-center">
          <button
            class="btn btn-dot"
            title="{{ 'Save' | translate }}"
            type="button"
            (click)="save()"
          >
            <i c8yIcon="check"></i>
          </button>
        </div>
        <div class="input-group-btn a-s-center">
          <button
            class="btn btn-dot"
            title="{{ 'Cancel' | translate }}"
            type="button"
            (click)="toggleEdit()"
          >
            <i c8yIcon="times"></i>
          </button>
        </div>
      </div>
    </div>
  }
</div>