<div class="row">
  <div class="col-12">
    <button class="btn btn-primary" routerLink="/campaign/new">New Campaign</button>
  </div>
</div>

<div class="row mt-2">
  <div class="col-12">
    <table class="table table-hover">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Status</th>
          <th scope="col">Web Status</th>
          <th scope="col">Target Size</th>
          <th scope="col">Create Date</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let campaign of campaignService.campaigns">
          <tr routerLink="/campaign/{{ campaign.id }}/view">
            <td>{{ campaign.name }}</td>
            <td>{{ campaign.currentStatus }}</td>
            <td>{{ campaign.webStatus }}</td>
            <td>{{ campaign.size }}</td>
            <td>{{ campaign.createDate | date:'dd-MMM-yyyy'}}</td>
          </tr>
        </ng-container>
        <p *ngIf="campaignService.campaigns.length === 0">No campaigns created yet. Create compaigns by clicking <a routerLink="/campaign/new">here</a></p>
      </tbody>
    </table>
  </div>
</div>
