{% load url_generate %}

<ul class="list-group">
    {% for builder in builders %}
    {% with builder.latest_builds|first as latest_build %}
    {% if latest_build %}
        <li class="list-group-item py-0">
            <a class="text-dark" href="{% build_url builder.name latest_build.build_id %}">
                {% if latest_build.status == "build successful" %}
                    <span class="badge text-success p-0 mr-1"><i style="width: 10px" class="fa fa-check"></i></span>
                {% else %}
                    <span class="badge text-danger p-0 mr-1"><i style="width: 10px" class="fa fa-times"></i></span>
                {% endif %}
            {{ builder.natural_name }}
            </a>
            {% if latest_build.files.count > 0 %}
                <button id="build-{{ latest_build.id }}" class="btn btn-sm btn-link text-secondary p-0 m-0 float-right loadFiles">Files ({{ latest_build.files.count }})</button>
            {% endif %}
        </li>
        {% if latest_build.files.count > 0 %}
            <div class="modal fade f12" id="build-{{ latest_build.id }}-modal" tabindex="-1" role="dialog"
                     aria-hidden="true">
                    <div class="modal-dialog modal-xl" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Files ({{ builder.display_name }})</h5>
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" id="build-{{ latest_build.id }}-modal-body">
                                <p class="text-center">Please wait...</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
    {% else %}
        <li class="list-group-item py-0 text-dark">
            <span class="badge text-dark p-0 mr-1"><i style="width: 10px;" class="fa fa-question"></i></span>
            {{ builder.natural_name }}
        </li>
    {% endif %}
    {% endwith %}
{% endfor %}
</ul>
<p class="text-secondary p-0 mb-0 f10 text-right"><i class="fa fa-question"></i> - No history in app's database</p>

<script>
    $(".loadFiles").click(async function () {
        let id = $(this).attr("id");
        $("#" + id + "-modal").modal('show');
        let build_id = id.split("-")[1];
        const response = await fetch("/api/v1/files/" + build_id + "/");
        const data = await response.json();
        const files = data.files;
        let ul = $("<ul></ul>");
        ul.addClass("list-group");
        for (let i = 0; i < files.length; i++) {
            let li = $("<li></li>");
            li.text(files[i].file);
            li.addClass("list-group-item");
            ul.append(li);
        }
        $("#" + id + "-modal-body").html(ul);
    });
</script>