<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;">Investments</h4>
      <a class="btn btn-info" href="/investments/new">+ New Investment</a>
    </div>

    {{#if investments.length}}
    <div class="mx-2">
      {{#each investments}}
      <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">Acquired: {{ this.date_acquired }}</small>
          </div>
        </div>
        <div class="col-md-2 text-center">
          <small class="text-muted">Cost</small>
          <div style="font-weight: 600;">{{ this.formattedCost }}</div>
        </div>
        <div class="col-md-2 text-center">
          <small class="text-muted">Returns</small>
            <div style="font-weight: 600; color: #3B6B4A;">{{ this.formattedReturn }}</div>
        </div>
        <div class="col-md-2 text-center">
          {{#if (eq this.status 'Profitable')}}
          <span class="badge badge-success">Profitable</span>
          {{else if (eq this.status 'BreakEven')}}
          <span class="badge badge-info">Break Even</span>
          {{else}}
          <span class="badge badge-warning">Recouping</span>
          {{/if}}
        </div>
        <div class="col-md-1 text-center">
          <small class="text-muted">{{ this.expected_return_type }}</small>
        </div>
        <div class="col-md-2 d-flex justify-content-center align-items-center">
          <a href="/investments/{{ this.id }}/edit" class="mr-2"><i class="fas fa-edit icon-edit"></i></a>
          <form method="POST" action="/investments/{{ 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 investments tracked yet.</p>
    </div>
    {{/if}}

  </div>
</div>
