<div class="result-header">

  <h2>This is the results</h2>

  <p>

    Filtres:

    {{#if location}}

      <span class="filters location">{{location}}<span class="fa fa-times" {{action 'deleteTag' 'location'}}></span></span>

    {{/if}}

    {{#if langue}}

      <span class="filters langue">{{langue}}<span class="fa fa-times" {{action 'deleteTag' 'langue'}}></span></span>

    {{/if}}

    {{#if discours}}

      <span class="filters discours">{{discours}}<span class="fa fa-times" {{action 'deleteTag' 'discours'}}></span></span>

    {{/if}}

    {{#if date}}

      {{#each date as |item| }}

        <span class="filters date">{{item}}<span class="fa fa-times" {{action 'deleteTag' 'date' item }}></span></span>

      {{/each}}

    {{/if}}

    {{#if thematique}}

      <span class="filters thematique">{{thematique}}<span class="fa fa-times" {{action 'deleteTag' 'thematique'}}></span></span>

    {{/if}}

  </p>

</div>

<div class='result-list'>

  {{#each filteredSounds as |item| }}

    <div id="{{item.id}}" {{action "details" item}} class='result-item'>

      <strong>{{ item.title }}</strong> - {{item.interviewer}}

      <div class="description">

        {{item.description}}

      </div>

      <button class="pull-right" {{action 'toggleModal' item}}>Details</button>

    </div>

  {{/each}}

  {{#if isShowingModal}}

    {{#ember-wormhole to='info-modal'}}

      <div class="overlay" {{action 'toggleModal'}}></div>

      <div class="dialog">

        <h1>{{currentDetails.title}}</h1>

        <p><b>Description: </b>{{currentDetails.description}}</p>

        <p><b>Interviewer: </b>{{currentDetails.interviewer}}</p>

        <p><b>Type de Discours: </b>{{currentDetails.type}}</p>

        <p><b>Localisation: </b>{{currentDetails.spatial}}</p>

        <p><b>Langue: </b>{{currentDetails.language}}</p>

        <p><b>Date de Creation: </b>{{currentDetails.created}}</p>

        <button class="pull-right" {{action 'toggleModal'}}>Close</button>

      </div>

    {{/ember-wormhole}}

  {{/if}}

</div>