/**
 * Component to render data for site documents
 * @class SiteDocuments
 */
export class SiteDocuments {
    documentation = [];
    publications = [];
    /**
     * @param {object} data
     */
    set siteData(data) {
        this._siteData = data;
    }

    render() {
        this.documentation = this._siteData.documents
            .filter(d => d.type === 'documentazione')
        
        this.publications = this._siteData.documents.filter(d => d.type === 'pubblicazione');

        let content = `
            <div class="has-bottom-border">
                <p class="p-2 has-text-centered mt-3 mb-3">
                    ${this._siteData.documentation}
                </p>
                <div class="p-2">
                    <table class="p-4 table is-fullwidth is-striped">
                        <thead>
                            <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
                            <tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
                        </thead>
                        <tbody>
            `;
		for (const doc of this.documentation) {
			content += `
				<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                    <i class="fa fa-download mr-2"></i> PDF
                </a></td></tr>
			`;
		}
        if (this.publications.length) {
            content += `
                    </tbody>
                    <thead>
                        <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
                        <tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
                    </thead>
                    <tbody>
            `;
            for (const doc of this.publications) {
                content += `
                    <tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                        <i class="fa fa-download mr-2"></i> PDF
                    </a></td></tr>
                `;
            }
        }
		content += `
                </tbody>
                </table>
                </div>
            </div>
        `;

        return content;
    }
}