<div id="info-modal"></div>
<div class="corpus-app-container">
  {{outlet}}
  <div class="carto">{{outlet "carto"}}</div>
</div>

<div class="corpus-app-wrapper">
  <div class="corpus-app-player">
    {{partial "player"}}
  </div>
  {{partial "results"}}
</div>

{{#if detail}}
  {{#ember-wormhole to='info-modal'}}
    <div class="overlay" {{action 'toggleModal'}}></div>
    <div class="dialog">
      <div class="dialog-header">
        <h2>Document details</h2>
      </div>
      <h3>{{modalItem.title}}</h3>
      <p><b>Description: </b>{{modalItem.description}}</p>
      <p><b>Interviewer: </b>{{modalItem.interviewer}}</p>
      <p><b>Type de Discours: </b>{{modalItem.type}}</p>
      <p><b>Localisation: </b>{{modalItem.spatial}}</p>
      <p><b>Langue: </b>{{modalItem.language}}</p>
      <p><b>Date de Creation: </b>{{modalItem.created}}</p>
      <button class="pull-right" {{action 'toggleModal'}}>Close</button>
    </div>
  {{/ember-wormhole}}
{{/if}}