@model IEnumerable<Internship.WebApplication.Areas.config.Models.QueueDto>

<div class="row">
    <div class="col-sm">
        <ul class="list-group">
            @foreach (var queue in Model)
            {
                <button type="button" onclick="queueDetails(@queue.Id)" class="list-group-item list-group-item-action">@Html.DisplayFor(x => queue.Name)</button>
                @*<form asp-action="Get" asp-controller="Queues"
                      data-ajax=@queue.Id
                      data-ajax-confirm="Are you sure?"
                      data-ajax-method="Get"
                      data-ajax-mode="replace"
                      data-ajax-update="#details">
                    @Html.HiddenFor(x => queue.Id)
                    <input type="submit" value=@Html.ValueFor(x => queue.Name) />
                </form>*@
            }
        </ul>
    </div>

    <div class="col-sm">
        <div id="details">
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        function queueDetails(id) {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("Get")',
                contentType: 'application/json',
                dataType: 'json',
                data: { 'id': JSON.stringify(id) },
                success: function(queue) {
                    $('#details').empty();
                    var result =
                        '<table class="table"><thead><tr><th scope="col">Klucz</th><th scope="col">Wartość</th></tr></thead><tbody>';

                    for (var key in queue) {
                        if (queue.hasOwnProperty(key)) {
                            if (key === "indexList") {
                                result += '<table class="table"><thead><tr><th scope="col">Klucz</th><th scope="col">Wartość</th></tr></thead><tbody>';
                                for (var key2 in queue[key]) {
                                    if (queue[key].hasOwnProperty(key2)) {
                                        result += '<tr><th scope="row">' + key2 + '</th><td>' + queue[key][key2] + '</td></tr>';
                                    }
                                }
                                result += '</tbody></table>';
                            } else {
                                result += '<tr><th scope="row">' + key + '</th><td>' + queue[key] + '</td></tr>';
                            }
                        }
                    }

                    result += '</tbody></table>';
                    $('#details').append(result);
                }
            });
        }
    </script>
}