{% extends 'layout.html' %}
{% load static %}
{% load format_names %}
{% load url_generate %}
{% load url_replace %}

{% block title %}Builds - {{ port.name }} |{% endblock %}

{% block head_scripts %}
    <script type="text/javascript" src="{% static 'js/port-detail.js' %}"></script>
    <style>
        .bootstrap-select .bs-ok-default::after {
            width: 0.3em;
            height: 0.6em;
            border-width: 0 0.1em 0.1em 0;
            transform: rotate(45deg) translateY(0.5rem);
        }

        .btn.dropdown-toggle:focus {
            outline: none !important;
        }
    </style>
    <script src="{% static 'js/bootstrap-multiselect.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap-multiselect.css' %}">
{% endblock %}

{% block content %}
    <div id="main-content" class="mt-2">
    {% include 'port/includes/port-header.html' with port=port %}
    {% include 'port/includes/port-tabs.html' with port_name=port.name active="builds" %}
<br>
        <form method="get" action=".">
            <div class="form-row">
                <div class="col-md-5 px-0">
                    <label>Select status: </label>
                    {{ form.status }}
                </div>
                <div class="col-md-5 px-0">
                    <label>Select builder(s): </label>
                    {{ form.builder_name__name }}
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" type="submit">Apply</button>
                    <a href="." class="btn btn-link">Reset</a>
                </div>
            </div>
        </form>
{% if builds|length > 0 %}
    <br>
    {% include 'includes/basic_pagination.html' with items=builds contents="build(s)" %}
<table class="table table-striped mt-2">
    <thead>
    <tr>
        <th scope="col">Builder</th>
        <th scope="col">Build Number</th>
        <th scope="col">Start Time</th>
        <th scope="col">Elapsed Time</th>
        <th scope="col">Watcher</th>
        <th scope="col">Build Status</th>
    </tr>
    </thead>
    {% for build in builds %}
        <tr>
            <td>{{ build.builder_name.display_name }}</td>
            <td><a href="{% build_url build.builder_name.name build.build_id %}">{{ build.build_id }}</a></td>
            <td>{{ build.time_start|date:"Y-m-d" }}  {{ build.time_start|time:"G:i:s" }} </td>
            <td>{{ build.time_elapsed }}</td>
            <td><a href="{% watcher_url build.builder_name.name build.watcher_id %}">{{ build.watcher_id }}</a></td>
            <td class="{% if build.status == 'build successful' %}text-success {% else %} text-danger {% endif %}">{{ build.status }}</td>
        </tr>
    {% endfor %}
</table>
{% else %}
<div class="text-center container mt-3" style="max-width: 700px;">
    <h5>No build history is available for that selection right now.</h5>
    <p>This does not mean that there is anything wrong with builds. It is just that the app does not have
        any records in its database. It may be caused by a failure to fetch the history in time.</p>
</div>
{% endif %}
</div>
{% endblock %}