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

<div class="corpus-app-wrapper">
  <div class="corpus-app-player">
    <div class="corpus-app-content">
      {{player-component action="changeDocument" document=currentItem}}
      <p><strong>{{ currentItem.title }}</strong></p>
      <p>{{doc-language url=currentItem.language}}</p>
    </div>
  </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>Notice</h2>
      </div>
      <div class="dialog-body">
        <p><b>Titre </b>{{modalItem.title}}</p>
        <p><b>Langue </b>{{doc-language url=modalItem.language}}</p>
        <p><b>Enregistré le </b>{{modalItem.modified}}</p>
        <p><b>Interviewer </b>{{modalItem.publishers}}</p>
        <p><b>Description </b>{{modalItem.description}}</p>
        <p><b>Type de Discours </b>{{modalItem.type}}</p>
        <p><b>Localisation </b>{{modalItem.spatial}}</p>
      </div>
      <div class="dialog-footer">
        <button class="pull-right" {{action 'toggleModal'}}>Close</button>
      </div>
    </div>
  {{/ember-wormhole}}
{{/if}}