<div class="header">
    <h2>Résultat <span class="count">({{ model.meta.total }})</span>{{#if isLoading}}<span class="document-spinner"><i class="fa fa-circle-o-notch fa-spin"></i></span>{{/if}}</h2>
    <div class="pagination">
        <i class="fa fa-step-backward{{if (eq model.meta.prev_page_url null) ' disabled'}}" {{action 'previous'}}></i>
        <span>page {{page}} sur {{model.meta.last_page}}</span>
        <i class="fa fa-step-forward{{if (eq model.meta.next_page_url null) ' disabled'}}" {{action 'next'}}></i>
    </div>
</div>
<ul>
    {{#each documents as |document index| }}
    <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}" {{action 'select' document.id}}>
        <div class="tools">
            <div>
            {{#if document.transcript_url}}
                {{#if (if-and (eq player.item document.id) player.transcriptLoading) }}
                <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true" {{action 'displayTranscript' bubbles=false}}></i>
                {{else}}
                <i title="Transcript" class="fa fa-text-height{{if (if-and (eq player.window 'transcript') (eq player.item document.id)) ' active'}}"{{action 'displayTranscript' bubbles=false}}>Transcript</i>
                {{/if}}
            {{/if}}
            {{#if (if-and (eq player.playing true) (eq player.item document.id))}}
                <i title="Pause" class="fa fa-pause" {{ action 'pause' bubbles=false }}>Pause</i>
            {{else}}
                <i title="Lecture" class="fa fa-play" {{ action 'play' document.id bubbles=false }}>Lecture</i>
            {{/if}}
            </div>
            <div>
                <button title="Notice" {{action 'displayNotice' document.id bubbles=false}} class="notice{{if (if-and (eq player.window 'notice') (eq player.item document.id)) ' active'}}">
                    Notice
                </button>
                <i title="Partage notice" class="fa fa-share-alt playlist-share-button" id='playlist-share-button-{{index}}'>Partage notice</i>
                {{#popover-on-element
                  id=(concat "popup-playlist-share-button-" index)
                  target=(concat "#playlist-share-button-" index)
                  event='click'
                  enableLazyRendering=true
                  onRender=(action 'shareLinkRender' (concat "popup-playlist-share-button-" index))
                  onShow=(action 'shareLinkShow' (concat "popup-playlist-share-button-" index))
                  class="playlist-share-button-popover"
                  as |popover| }}
                    <p>Partager un lien vers cette notice</p>
                    <div>
                    {{input id=(concat "popup-playlist-share-button-text-" index) value=(concat "https://hdl.handle.net/" document.id) readonly='readonly' class='playlist-share-button-link'}}
                    </div>
                    <div class="ssk-group ssk-xs playlist-share-button-list" data-url={{concat "https://hdl.handle.net/" document.id}} data-title="Corpus de la Parole : {{ document.title }}" data-text="Partager cette notice">
                        <a href="" class="ssk ssk-facebook"></a>
                        <a href="" class="ssk ssk-twitter"></a>
                        <a href="" class="ssk ssk-google-plus"></a>
                        <a href="" class="ssk ssk-pinterest"></a>
                        <a href="" class="ssk ssk-tumblr"></a>
                        <a href="" class="ssk ssk-linkedin"></a>
                        <a href="" class="ssk ssk-email"></a>
                    </div>
                    <div class='playlist-share-button-close'>fermer</div>
                {{/popover-on-element}}
            </div>
        </div>
        <div class="meta">
            <p class="head">
                <span class="time">{{ to-minutes document.duration }}</span>
                <span class="title" title="{{ document.title }}">{{ document.title }}</span>
            </p>
            <span class="author" title="{{document.publishers_disp}}">{{document.publishers_disp}}</span>
            <span class="languages">{{#each document.languages as |lang index|}}{{if index ", "}}{{doc-language url=lang class="language"}}{{/each}}</span>
        </div>
    </li>
    {{/each}}
</ul>
