{% extends "base.html" %}

{%block head%}
<link rel="stylesheet" href="{{ url_for('static', filename='style/fontello/css/fontello.css') }}"" />
</script>
{%endblock%}

{%block title%}{{selected_project.info.name}}{%endblock%}

{%block content%}

<div class="content">
    {%- if readme %}
    {{readme|safe}}
    {%-else%}
    <h1>{{selected_project.info.name}}</h1>
    <p>
        Here you can find artifacts for project &quot;{{selected_project.info.name}}&quot;
    </p>
    {%-endif%}
</div>


<h1 class="artifacts-header">Artifacts</h1>
<hr />
{%-for artifact in artifacts %}
<div class="artifact-item">
    <div class="artifact-details">
        <span class="artifact-id">#{{artifact.id}}</span>
        {%-if artifact.hash%}
        <a class="hash-button" href="{{selected_project.info.commit_url}}/{{artifact.hash}}">{{artifact.hash[:8]}}</a>
        {%-endif%}
        <span>Build date: <span class="build-date">{{artifact.date}}</span></span>
        <span class="icon-down-open"></span>
    </div>
    <div class="artifact-contents content">
        <h2>Downloads</h2>

        <div class="artifacts-list">
            <span class="artifacts-head">Artifact</span>
            <span class="artifacts-desc">Description</span>
            {%-for download_item in artifact.artifacts%}
            <a class="artifact-link"
                            href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a>
            
            <span class="artifact-desc">{{download_item.description}}</span>
            {%-endfor%}
        </div>
        {%- if artifact.changelog %}
        <h2>Changelog</h2>
        <p>
            {{artifact.changelog|safe}}
        </p>
        {%- endif %}
    </div>

</div>
{%-endfor%}

<script>
    function init() {
        let dates = document.querySelectorAll("span.build-date");

        for (let date of dates) {
            date.textContent = new Date(date.textContent).toLocaleString();
        }

        let artifacts = document.querySelectorAll("div.artifact-item");
        for (let artifact of artifacts) {
            let contents = artifact.querySelector(".artifact-contents");
            let details = artifact.querySelector(".artifact-details");
            if (!contents || !(contents instanceof HTMLElement))
                continue;
            details.addEventListener("click", e => {
                if(e.target instanceof HTMLElement && e.target.nodeName.toUpperCase() == "A")
                    return;
                e.preventDefault();
                if (contents.classList.contains("contents-visible"))
                    contents.classList.remove("contents-visible");
                else
                    contents.classList.add("contents-visible");
            });
        }
    }
    init();
</script>
{%endblock%}