{% extends 'layout.html' %}

{% load static %}
{% load unix_to_time %}
{% load url_generate %}
{% load format_names %}
{% load url_replace %}

{% block title %}All Builds |{% endblock %}

{% block head_scripts %}
<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 %}
    <br>
    <h4>Builds</h4>
    <form method="get" action=".">
        <div class="form-row">
            <div class="col-9">
                {{ form.port_name }}
            </div>
            <div class="col-2">
                <button class="btn btn-primary" type="submit">Apply</button>
                <a href="." class="btn btn-link">Reset</a>
            </div>
        </div>
        <br>
        <div class="form-row">
            <div class="col-lg-4">
                <label>Select status: </label>
                {{ form.status }}
            </div>
            <div class="col-lg-4">
                <label>Select builder(s): </label>
                {{ form.builder_name__name }}
            </div>
            <div class="col-lg-4">
                <label class="form-check-label">{{ form.unresolved }} View unresolved:</label>
                <p class="f14 text-muted">Displays failed builds that have not been followed by successful builds. This will override the status filter.</p>
            </div>
        </div>
    </form>
    {% include 'includes/basic_pagination.html' with items=builds contents="build(s)" %}

    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">Port</th>
            <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><a href="{% url 'port_detail' build.port_name %}">{{ build.port_name }}</a></td>
                <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>
    {% include 'includes/basic_pagination.html' with items=builds contents="build(s)" %}


{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            $('.selectpicker').selectpicker();
        });
    </script>
{% endblock %}