<div class="border-custom p-3 p-md-4 mt-3">
  <div class="row">
    <!-- TODO Extract styles-->
    <div class="col-md-9 aod-course aod-course--planned order-1 order-md-2">
      <!-- title -->
      <h2 class="heading heading--sm">
        {{ listItem.attributes.title }}
      </h2>

      <!-- notes -->
      <div>
        <span class="font-weight-bold d-block"> {{ 'Lod.Description' | translate }}: </span>

        <!-- keywords -->
        <collapsible-text
          *ngIf="listItem.attributes.notes"
          [tags]="listItem.attributes.keywords"
          [text]="listItem.attributes.notes">
        </collapsible-text>
      </div>
    </div>
    <div class="col-md-3 order-2 order-md-1">
      <ul class="list-unstyled">
        <!-- start date-->
        <li>
          <span class="">
            {{ 'Lod.ExecutionDate' | translate }}
          </span>
          <span class="d-block font-weight-bold">
            <svg
              attr.aria-labelledby="{{ 'icon-clock-title-' + listItem.id }}"
              class="icon"
              role="img"
              width="19"
              height="19">
              <title id="{{ 'icon-clock-title-' + listItem.id }}">
                {{ 'MyDashboard.Clock' | translate }}
              </title>
              <use xlink:href="/assets/icomoon/sprite/sprite.svg#icon-clock"></use>
            </svg>
            {{ listItem.attributes.execution_date }}
          </span>
        </li>

        <!-- reports -->
        <li [class]="isFirst ? 'pt-4' : 'pt-2'" *ngFor="let report of listItem.attributes.reports; let isFirst = first">
          <app-lab-list-report-button [report]="report" [showFilesCount]="isMoreThenOneFileReport">
          </app-lab-list-report-button>
        </li>
      </ul>
    </div>
  </div>
</div>
