<%- include('header') %>
<% if (locals.documents && locals.documents.length > 0) { %>
<% documents.map(document => {
    var chips = [] %>
<div class="mdc-card">
    <div class="mdc-card__primary-action" tabindex="0">
        <ul class="mdc-list">
            <li class="mdc-list-item" tabindex="0">
                <h3 class="mdc-list-item__text"><%= document.name %></h3>
            </li>
            <li role="separator" class="mdc-list-divider"></li>
            <li class="mdc-list-item">
                <span class="mdc-list-item__text">Size: <%= document.size %></span>
            </li>
            <li role="separator" class="mdc-list-divider"></li>
            <li class="mdc-list-item">
                <span class="mdc-list-item__text">Mime: <%= document.mime %></span>
            </li>
            <li role="separator" class="mdc-list-divider"></li>
            <% if (document.language) { %>
            <li class="mdc-list-item">
                <span class="mdc-list-item__text">Language: <%= document.language %></span>
            </li>
            <li role="separator" class="mdc-list-divider"></li>
            <% } if (document.metadata) { %>
            <li class="mdc-list-item">
                <span class="mdc-list-item__text">Metadata: <button type="button"
                        class="collapsible mdc-button mdc-button--raised">
                        <div class="mdc-button__ripple"></div>
                    </button></span>
            </li>
            <li role="separator" class="mdc-list-divider"></li>
            <ul class="content">
                <% for(var i=0; i < Object.keys(document.metadata).length; i++) { %>
                <li class="mdc-list-item" <% if (i === 0) { %> tabindex="0" <% } %>>
                    <span class="mdc-list-item__text"><%= Object.keys(document.metadata)[i] %>:
                        <%= Object.keys(document.metadata).length > 0 ? document.metadata[Object.keys(document.metadata)[i]].join(', ') : '' %></span>
                </li>
                <% chips.push(Object.keys(document.metadata)[i]) %>
                <% } %>
            </ul>
            <li role="separator" class="mdc-list-divider"></li>
            <div class="mdc-chip-set" role="grid">
                <% chips.map(chip => { %>
                <div class="mdc-chip" role="row">
                    <div class="mdc-chip__ripple"></div>
                    <span role="gridcell">
                        <span role="button" <% if (i === 0) { %> tabindex="0" <% } %> class="mdc-chip__primary-action">
                            <span class="mdc-chip__text"><%=chip %></span>
                        </span>
                    </span>
                </div>
                <% }) %>
            </div>
            <% } %>
        </ul>
    </div>
</div>
<% })
 } else { %>
<div class="mdc-dialog">
    <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="error"
            aria-describedby="error-content">
            <h2 class="mdc-dialog__title" id="error">Error</h2>
            <div class="mdc-dialog__content" id="error-content">
                <ul class="mdc-list mdc-list--avatar-list">
                    <li class="mdc-list-item" tabindex="0" data-mdc-dialog-action="none">
                        <span class="mdc-list-item__text">NO Documents</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="mdc-dialog__scrim"></div>
</div>
<% } %>
<%- include('footer') %>