{{define "document-table"}}
<div class="table-container">
    <table class="table is-fullwidth is-hoverable">
        <thead>
            <tr>
                <th>Created</th>
                <th>User</th>
                <th>Type</th>
                <th>#Pages</th>
                <th>PDF Filename</th>
                <th>PDF Created</th>
                <th>PDF Created By</th>
                <th>Reference</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{range .Documents}}
            <tr>
                <td>
                    <time class="has-text-grey-dark" datetime="{{.Created.Format "2006-01-02T15:04:05Z"}}">
                        {{.Created.Format "2 Jan 2006 15:04"}}
                    </time>
                </td>
                <td>
                    {{if and .UserFirstName.Valid .UserLastName.Valid}}
                        <a href="/users/{{.UserID}}" class="has-text-link">
                            {{.UserFirstName.String}} {{.UserLastName.String}}
                        </a>
                    {{else if .UserUsername.Valid}}
                        <a href="/users/{{.UserID}}" class="has-text-link">
                            {{.UserUsername.String}}
                        </a>
                    {{else}}
                        <span class="has-text-grey">Unknown User</span>
                    {{end}}
                </td>
                <td>
                    <span class="tag {{if eq .Type "quote"}}is-info{{else if eq .Type "invoice"}}is-success{{else if eq .Type "purchaseOrder"}}is-warning{{else if eq .Type "orderAck"}}is-link{{else}}is-light{{end}}">
                        {{if eq .Type "quote"}}Quote
                        {{else if eq .Type "invoice"}}Invoice
                        {{else if eq .Type "purchaseOrder"}}Purchase Order
                        {{else if eq .Type "orderAck"}}Order Acknowledgement
                        {{else if eq .Type "packingList"}}Packing List
                        {{else}}{{.Type}}{{end}}
                    </span>
                </td>
                <td>
                    {{if .DocPageCount}}
                        {{.DocPageCount}}
                    {{else}}
                        <span class="has-text-grey">-</span>
                    {{end}}
                </td>
                <td>
                    {{if .PdfFilename}}
                        <a href="/pdf/{{.PdfFilename}}" target="_blank" class="has-text-link">
                            {{.PdfFilename}}
                        </a>
                    {{else}}
                        <span class="has-text-grey">No PDF</span>
                    {{end}}
                </td>
                <td>
                    <time class="has-text-grey-dark" datetime="{{.PdfCreatedAt.Format "2006-01-02T15:04:05Z"}}">
                        {{.PdfCreatedAt.Format "2 Jan 2006 15:04"}}
                    </time>
                </td>
                <td>
                    {{if and .PdfCreatorFirstName.Valid .PdfCreatorLastName.Valid}}
                        <a href="/users/{{.PdfCreatedByUserID}}" class="has-text-link">
                            {{.PdfCreatorFirstName.String}} {{.PdfCreatorLastName.String}}
                        </a>
                    {{else if .PdfCreatorUsername.Valid}}
                        <a href="/users/{{.PdfCreatedByUserID}}" class="has-text-link">
                            {{.PdfCreatorUsername.String}}
                        </a>
                    {{else}}
                        <span class="has-text-grey">-</span>
                    {{end}}
                </td>
                <td>
                    {{if .CmcReference}}
                        <span class="has-text-link">{{.CmcReference}}</span>
                    {{else}}
                        <span class="has-text-grey">-</span>
                    {{end}}
                </td>
                <td>
                    <div class="buttons are-small">
                        <a href="/documents/view/{{.ID}}" class="button is-small is-info">
                            <span class="icon is-small">
                                <i class="fas fa-eye"></i>
                            </span>
                            <span>View</span>
                        </a>
                    </div>
                </td>
            </tr>
            {{else}}
            <tr>
                <td colspan="10" class="has-text-centered has-text-grey">
                    <div class="py-6">
                        <span class="icon is-large">
                            <i class="fas fa-file-alt fa-2x"></i>
                        </span>
                        <p class="mt-2">No documents found</p>
                    </div>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>

{{if .Documents}}
<div class="has-text-centered mt-4">
    <p class="has-text-grey is-size-7">
        Showing most recent 1000 documents
    </p>
</div>
{{end}}
{{end}}