{% extends "workflow/viewport-element.html" %}
{% load staticfiles %}

{% load bootstrap4 %}

{% block content %}

{% bootstrap_form_errors form type='non_fields' %}
<form id="step_form" method="POST" class="form">
{% csrf_token %}
<input type="hidden" id="hidden_json_input", name="host"/>
</form>
<div class="container-fluid">
    <div class="row" id="host_select_container">
    </div>
</div>
<script>
var selected_host = null;
var initial = {{chosen|safe|default:'null'}};

function select(obj){
    var booking_id = $(obj).attr("booking");
    var host_name = $(obj).attr("hostname");
    var input = document.getElementById("hidden_json_input");
    input.value = JSON.stringify({"booking": booking_id, "name": host_name});
    // clear out and highlist host
    if(selected_host != null){
        selected_host.classList.remove("active");
    }
    selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
    selected_host.classList.add("active");
}

function draw_bookings(){
    var booking_hosts = {{booking_hosts|safe}};
    var bookings = [];
    var container = document.getElementById("host_select_container");
    for(var booking_id in booking_hosts){
        // Create a column with a card
        var column = $("<div/>", {
            class: "col-12 col-md-6 col-lg-3 col-xl-2 my-2"
        }).appendTo(container);
        var booking = $("<div/>", {
            class: "card"
        }).appendTo(column);
        var heading = $("<div/>", {
            class: "card-header"
        }).text(`Booking ${booking_id}`).appendTo(booking);
        var body = $("<ul/>", {
            class: "list-group list-group-flush"
        }).appendTo(booking);
        var footer = $("<div/>", {
            text: "Hosts:",
            class: "card-footer d-flex flex-column"
        }).appendTo(booking);

        // Append information to the card body
        $(`<li class="list-group-item">Start: ${booking_hosts[booking_id].start}</li>`).appendTo(body);
        $(`<li class="list-group-item">End: ${booking_hosts[booking_id].end}</li>`).appendTo(body);
        $(`<li class="list-group-item">Purpose: ${booking_hosts[booking_id].purpose}</li>`).appendTo(body);

        // Append hosts to footer
        var hosts = booking_hosts[booking_id].hosts;
        for (const host of hosts) {
            $("<button/>", {
                class: "btn btn-outline-primary w-100 mt-1 hostbtn",
                id: `booking_${booking_id}_host_${host.name}`,
                text: host.name,
                booking: booking_id,
                hostname: host.name,
                click: function() {
                    select(this);
                }
            }).appendTo(footer);
        }
    }
}
draw_bookings();
if(initial){
    select(initial.booking_id, initial.hostname);
}
</script>
{% endblock content %}