<div class="row">
  <div
    class="col-md-9 dashboard-filtered-list-item
     dashboard-filtered-list-item--{{ meeting.attributes.state }} order-1 order-md-2">
    <!-- state -->
    <div class="dashboard-filtered-list-item__state">
      {{ 'ProxiesMeetings.' + (meeting.attributes.state | titlecase) | translate }}
    </div>

    <!-- title -->
    <h2 class="heading heading--sm">
      {{ meeting.attributes.title }}
    </h2>

    <!-- venue -->
    <p>
      <span class="font-weight-bold"> {{ 'ProxiesMeetings.MeetingLocation' | translate }}: </span>
      {{ meeting.attributes.venue }}
    </p>

    <!-- notes -->
    <div>
      <span class="font-weight-bold d-block"> {{ 'ProxiesMeetings.Agenda' | translate }}: </span>
      <collapsible-text *ngIf="meeting.attributes.description" [text]="meeting.attributes.description">
      </collapsible-text>
    </div>

    <!-- attachments -->
    <ng-container *hasPermission="PermissionPerRoles.DOWNLOAD_MEETINGS_ATTACHMENTS">
      <ng-container *ngIf="meeting.attributes.materials.length > 0">
        <span class="font-weight-bold d-block mt-3"> {{ 'ProxiesMeetings.DownloadMaterials' | translate }}: </span>
        <ul class="list-unstyled mb-0">
          <li
            *ngFor="let attachment of meeting.attributes.materials; let isLast = last"
            [ngClass]="{ 'pb-2': !isLast }">
            <a [href]="attachment.download_url" target="_blank">
              {{ attachment.name }}
            </a>
          </li>
        </ul>
      </ng-container>
    </ng-container>
  </div>
  <div class="col-md-3 order-2 order-md-1">
    <!-- MEETING ASIDE -->
    <ul class="list-unstyled">
      <!-- start date-->
      <li class="">
        <span class=""> {{ 'ProxiesMeetings.StartDate' | translate }} </span>
        <span class="d-block font-weight-bold">
          <svg
            attr.aria-labelledby="{{ 'icon-clock-title-date-' + meeting.id }}"
            class="icon"
            height="19"
            role="img"
            width="19">
            <title id="{{ 'icon-clock-title-date-' + meeting.id }}">
              {{ 'MyDashboard.Clock' | translate }}
            </title>
            <use xlink:href="/assets/icomoon/sprite/sprite.svg#icon-clock"></use>
          </svg>
          {{ meeting.attributes.start_date }}
        </span>
      </li>

      <!-- time -->
      <li class="pt-4">
        <span class=""> {{ 'ProxiesMeetings.DurationHours' | translate }} </span>
        <span class="d-block font-weight-bold">
          <svg
            attr.aria-labelledby="{{ 'icon-clock-title-time-' + meeting.id }}"
            class="icon"
            height="19"
            role="img"
            width="19">
            <title id="{{ 'icon-clock-title-time-' + meeting.id }}">
              {{ 'MyDashboard.Clock' | translate }}
            </title>
            <use xlink:href="/assets/icomoon/sprite/sprite.svg#icon-clock"></use>
          </svg>
          {{ meeting.attributes.start_time }} - {{ meeting.attributes.end_time }}
        </span>
      </li>
    </ul>
  </div>
</div>
