<div class="row py-5">
  <div class="col-md-11 mx-auto" style="max-width: 880px;">

    <div class="d-flex justify-content-between align-items-center mb-4">
      <h4 style="font-weight: 600;">Projects</h4>
      <a class="btn btn-info" href="/projects/new">+ New Project</a>
    </div>

    {{#if projects.length}}
    <div class="mx-2">
      {{#each projects}}
      <div class="row flex-md-nowrap py-3 record" style="margin: 0; background: #F2EFE3; border-radius: 4px; margin-bottom: 10px;">
        <div class="col-md-3 d-flex align-items-center">
          <div>
            <h5 class="record-name" style="margin: 0;">{{ this.name }}</h5>
            <small class="text-muted">Last touched: {{ this.last_touched }}</small>
          </div>
        </div>
        <div class="col-md-2 text-center">
          {{#if (eq this.status 'Active')}}
          <span class="badge badge-success">Active</span>
          {{else if (eq this.status 'Maintenance')}}
          <span class="badge badge-info">Maintenance</span>
          {{else if (eq this.status 'Paused')}}
          <span class="badge badge-warning">Paused</span>
          {{else}}
          <span class="badge badge-secondary">Archived</span>
          {{/if}}
        </div>
        <div class="col-md-3">
          {{#if this.next_step}}
          <small class="text-muted">Next: </small>
          <small>{{ this.next_step }}</small>
          {{/if}}
        </div>
        <div class="col-md-2">
          {{#if this.notes}}
          <small class="text-muted" title="{{ this.notes }}"><i class="fas fa-sticky-note"></i> Notes</small>
          {{/if}}
        </div>
        <div class="col-md-2 d-flex justify-content-center align-items-center">
          <a href="/projects/{{ this.id }}/edit" class="mr-2"><i class="fas fa-edit icon-edit"></i></a>
          <form method="POST" action="/projects/{{ this.id }}?_method=DELETE" class="record-delete"
            onsubmit="return checkDelete()" style="margin: 0;">
            <button type="submit" class="record-deleteBtn"><i class="fas fa-trash-alt icon-delete"></i></button>
          </form>
        </div>
      </div>
      {{/each}}
    </div>
    {{else}}
    <div class="text-center py-5">
      <p class="text-muted">No projects yet.</p>
    </div>
    {{/if}}

  </div>
</div>
