{% extends "base.html" %}
{% load static %}

{% block title %}Arch Linux - {{ pkg.pkgname }} {{ pkg.full_version }} ({{ pkg.arch.name }}){% endblock %}
{% block navbarclass %}anb-packages{% endblock %}

{% block content %}
{% include "packages/package_details.html" %}
{% endblock %}

{% block script_block %}
<script type="text/javascript" nonce="{{ CSP_NONCE }}">
function ajaxifyFiles() {
    filelink.addEventListener("click", function(event) {
	event.preventDefault();
	fetch(event.target.href + 'json/').then(response => response.json()).then(data => {
		const fragment = document.createDocumentFragment();
		data.files.forEach((value, i) => {
                	const cls = value.match(/\/$/) ? 'd' : 'f';
			const elem = document.createElement('li');
			elem.classList.add(cls);
			elem.textContent = value
			fragment.appendChild(elem);
		});

		const pkgfilelist = document.getElementById("pkgfilelist");
		while(pkgfilelist.firstChild) {
			pkgfilelist.removeChild(pkgfilelist.firstChild);
		}

		const textElem = document.createElement("p");
		textElem.classList.add("message");

            	if (data.pkg_last_update > data.files_last_update) {
			textElem.textContent = "Note: This file list was generated from a previous version of the package; it may be out of date.";
                	pkgfilelist.appendChild(textElem);
		}

            	if (data.files.length > 0) {
			const elem = document.createElement("ul");
			elem.appendChild(fragment);
			pkgfilelist.appendChild(elem);
            	} else if (data.files_last_update === null) {
			textElem.textContent = "No file list available.";
                	pkgfilelist.appendChild(textElem);
		} else {
			textElem.textContent = "Package has no files.";
                	pkgfilelist.appendChild(textElem);
		}
	});
    });
}

function ajaxifySonames() {
    const link = document.getElementById("sonamelink");
    link.addEventListener("click", function(event) {
        event.preventDefault();
        fetch(this.getAttribute('href') + 'json/').then(function(response) {
                return response.json();
        }).then(function(data) {
            const sonamelist = document.getElementById("pkgsonamelist");
            while (sonamelist.firstChild) {
                sonamelist.removeChild(sonamelist.firstChild);
            }
            if (data.length > 0) {
                const fragment = document.createDocumentFragment();
                for (soname of data) {
                    let ul = document.createElement("UL");
                    ul.innerHTML = soname;
                    fragment.appendChild(ul);
                }
                sonamelist.appendChild(fragment);
            } else {
                const p = document.createElement("p");
                p.innerHTML = "Package has no sonames.";
                p.className = "message";
                sonamelist.appendChild(p);
            }
        });
    });
}

function collapseDependsList(list) {
    // Hide everything past a given limit. Don't do anything if we don't have
    // enough items, or the link already exists.
    const limit = 20;
    const elem = document.querySelector(list);
    if (!elem)
	return;

    const linkid = elem.getAttribute('id') + 'link';
    const items = Array.from(elem.querySelectorAll('li')).slice(limit);

    if (items.length <= 1 || document.querySelectorAll('#' + linkid).length > 0) {
        return;
    }

    items.forEach(item => item.style.display = 'none');

    const link = document.createElement("A");
    link.setAttribute('href', '#'); 
    link.id = linkid;
    link.textContent = "Show More…";
    const p = document.createElement("p");
    p.appendChild(link);
    elem.insertAdjacentElement('afterend', p);

    // add link and wire it up to show the hidden items
    document.getElementById(linkid).addEventListener('click', function(event) {
        event.preventDefault();
	Array.from(elem.querySelectorAll('li')).forEach(item => item.style.display = '');
        // remove the full <p/> node from the DOM
	event.target.parentElement.removeChild(event.target);
    });
}

function collapseRelatedTo(elements) {
    const limit = 5;
    Array.from(document.querySelectorAll(elements)).forEach(elem => {
        // Hide everything past a given limit. Don't do anything if we don't
        // have enough items, or the link already exists.
        var items = Array.from(elem.querySelectorAll('span.related')).slice(limit);
        if (items.length <= 1 || elem.querySelectorAll('a.morelink').length > 0) {
            return;
        }
        items.forEach(item => item.style.display = 'none');
        const link = document.createElement("A");
        link.setAttribute("href", "#");
        link.classList.add("morelink");
        link.textContent = "More…";
        elem.appendChild(link);

        // add link and wire it up to show the hidden items
        elem.querySelector('a.morelink').addEventListener('click', function(event) {
            event.preventDefault();
	    Array.from(elem.querySelectorAll('span.related')).forEach(item => item.style.display = '');
	    event.target.parentElement.removeChild(event.target);
        });
    });
}

document.addEventListener("DOMContentLoaded", function() {
        ajaxifyFiles();
        ajaxifySonames();
        collapseDependsList("#pkgdepslist");
        collapseDependsList("#pkgreqslist");
        collapseRelatedTo(".relatedto");
});
</script>
{% endblock %}
