Condition when showing a grid

Hi!

I might have missed something simple but I can't seem to figure this one out.

I have a grid that contains concerts (past and future) e.g:

dates:
    display: Concerts
    type: grid
    starting_rows: 1
    min_rows: 1
    max_rows: 1000
    fields:
      date:
        display: Date
        type: date
      venue:
        display: Salle
        type: text
      city:
        display: Ville
        type: text

I would like to display the next 5 concerts. Here is how I imagine it looking like:

  {{ dates sort_by="date" limit="5" condition="date|in_future" }}
      <li>
        {{date format="l j F Y"}} {{venue}} {{city}}
      </li>
  {{ /dates }}

Everything is working except the condition. So I tried doing this:

{{ dates sort_by="date" limit="5" }}
    {{ if date|in_future }}
      <li>
        {{date format="l j F Y"}} {{venue}} {{city}}
      </li>
    {{ /if }}
  {{ /dates }}

But it doesn't work because if let's say I have 3 past concerts (with a date prior to the current date), this code only shows the next 2 concerts. If I have 5 or more past concerts in my grid this code doesn't display anything.

Thank you in advance for your help,

Loving statamic so far!