{% set playbook_count = playbook.hosts | fast_count -%}
{% set play_count = playbook.plays | fast_count -%}
{% set file_count = playbook.files | fast_count -%}
{% set task_count = playbook.tasks | fast_count -%}
{% set record_count = playbook.data | fast_count -%}
{% set stats_count = playbook.stats | fast_count -%}
<div class="list-group-item">
    <div class="list-view-pf-left">
        <button type="button" class="link link-report" aria-hidden="true">
            <a href="{{ url_for('reports.report', playbook_id=playbook.id) }}"><span class="fa fa-link" title="Permanent link to this playbook report"></span></a>
        </button>
        {{ macros.render_status(stats[playbook.id].status) }}
    </div>
    <!-- Begin playbook entry in the list -->
    <div class="list-view-pf-main-info">
        <div class="list-view-pf-body">
            <div class="list-view-pf-description">
                <div class="list-group-item-heading timestamp-heading">
                    <span title="Date at which the playbook started">{{ playbook.time_start |datefmt }}</span>
                </div>
                <div class="list-group-item-heading">
                    <a href="#" data-toggle="modal" data-target="#file_modal" data-load="{{ playbook.file.id }}/" title="{{ playbook.path }}">{{ playbook.path | basename }}</a>
                </div>
            </div>
            <div class="list-view-pf-additional-info">
                <div class="list-view-pf-additional-info-item" title="Duration of the entire playbook">
                    <span class="fa fa-clock-o"></span>
                    <strong>{{ playbook.duration |timefmt }}</strong>
                </div>
                <br>
                <div class="list-view-pf-additional-info-item" title="Playbook parameters and options">
                    <div class="list-view-pf-expand">
                        <span class="fa fa-angle-right"></span>
                        <span class="fa fa-gears"></span>
                        Parameters
                    </div>
                </div>
                <div class="list-view-pf-additional-info-item" title="Hosts involved in the playbook">
                    <div class="list-view-pf-expand">
                        <span class="fa fa-angle-right"></span>
                        <span class="pficon pficon-server"></span>
                        <strong>{{ playbook_count }}</strong> Hosts
                    </div>
                </div>
                <div class="list-view-pf-additional-info-item" title="Plays involved in the playbook">
                    <div class="list-view-pf-expand">
                        <span class="fa fa-angle-right"></span>
                        <span class="pficon pficon-flag"></span>
                        <strong>{{ play_count }}</strong> Plays
                    </div>
                </div>
                <div class="list-view-pf-additional-info-item" title="Role and task files involved in the playbook">
                    <div class="list-view-pf-expand">
                        <span class="fa fa-angle-right"></span>
                        <span class="fa fa-folder-open"></span>
                        <strong>{{ file_count }}</strong> Files
                    </div>
                </div>
                <div class="list-view-pf-additional-info-item" title="Tasks involved in the playbook">
                    <div class="list-view-pf-expand">
                        <span class="fa fa-angle-right"></span>
                        <span class="fa fa-check"></span>
                        <strong>{{ task_count }}</strong> Tasks
                    </div>
                </div>
                <div class="list-view-pf-additional-info-item" title="Records saved with ara_record throughout the playbook">
                    <div class="list-view-pf-expand">
                        <span class="fa fa-angle-right"></span>
                        <span class="fa pficon-save"></span>
                        <strong>{{ record_count }}</strong> Records
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End playbook entry in the list -->

    <!-- Begin playbook details -->
    <!-- Begin playbook options -->
    <div class="list-group-item-container container-fluid hidden">
        <div class="close">
            <span class="pficon pficon-close"></span>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h3>
                    <strong>Playbook parameters</strong>
                    <span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/parameters.html" %}"></span>
                </h3>
                <table class="table table-striped table-bordered table-hover table-condensed" id="parameters_{{ playbook.id }}">
                    <thead>
                        <tr>
                            <th>Parameter</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- End playbook host stats details -->

    <!-- Begin playbook host stats details -->
    <div class="list-group-item-container container-fluid hidden">
        <div class="close">
            <span class="pficon pficon-close"></span>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h3>
                    <strong>Hosts</strong>
                    <span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/hosts.html" %}"></span>
                </h3>
                {% if stats_count -%}
                <table class="table table-striped table-bordered table-hover table-condensed" id="stats_{{ playbook.id }}">
                    <thead>
                        <tr>
                            <th><span class="pull-left">Host</span></th>
                            <th class="col-md-1"><span class="ok label">OK</span></th>
                            <th class="col-md-1"><span class="changed label">CHANGED</span></th>
                            <th class="col-md-1"><span class="failed label">FAILED</span></th>
                            <th class="col-md-1"><span class="skipped label">SKIPPED</span></th>
                            <th class="col-md-1"><span class="unreachable label">UNREACHABLE</span></th>
                        </tr>
                    </thead>
                </table>
                {% else -%}
                <div class="text-center fa-border">
                    <h2>There is no host statistics for this playbook.</h2>
                    <h3>Either no hosts were selected for the playbook or the playbook execution was interrupted and the data is incomplete.</h3>
                </div>
                {% endif -%}
            </div>
        </div>
    </div>
    <!-- End playbook host stats details -->

    <!-- Begin playbook play details -->
    <div class="list-group-item-container container-fluid hidden">
        <div class="close">
            <span class="pficon pficon-close"></span>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h3>
                    <strong>Plays</strong>
                    <span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/plays.html" %}"></span>
                </h3>
                {% if play_count -%}
                <table class="table table-striped table-bordered table-hover table-condensed" id="plays_{{ playbook.id }}">
                    <thead>
                        <tr>
                            <th><span class="pull-left">Play</span></th>
                            <th class="col-md-2">Start</th>
                            <th class="col-md-2">End</th>
                            <th class="col-md-1">Duration</th>
                        </tr>
                    </thead>
                </table>
                {% else -%}
                <div class="text-center fa-border">
                    <h2>There is no play information for this playbook.</h2>
                    <h3>Either there was no play in the playbook or the playbook execution was interrupted and the data is incomplete.</h3>
                </div>
                {% endif -%}
            </div>
        </div>
    </div>
    <!-- End playbook play details -->

    <!-- Begin playbook file details -->
    <div class="list-group-item-container container-fluid hidden">
        <div class="close">
            <span class="pficon pficon-close"></span>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h3>
                    <strong>Files</strong>
                    <span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/files.html" %}"></span>
                </h3>
                {% if file_count -%}
                <div id="files_{{ playbook.id }}" class="fa-border"></div>
                {% else -%}
                <div class="text-center fa-border">
                <h2>There is no recorded file for this playbook.</h2>
                <h3>Either there was a problem or the playbook execution was interrupted and the data is incomplete.</h3>
                </div>
                {% endif -%}
            </div>
        </div>
    </div>
    <!-- End playbook file details -->

    <!-- Begin playbook task details -->
    <div class="list-group-item-container container-fluid hidden">
        <div class="close">
            <span class="pficon pficon-close"></span>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <h3>
                    <strong>Tasks</strong>
                    <span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/tasks.html" %}"></span>
                </h3>
                {% if task_count -%}
                <table class="table table-striped table-bordered table-hover table-condensed" id="tasks_{{ playbook.id }}">
                    <thead>
                        <tr>
                            <th><span class="pull-left">Task</span></th>
                            <th>Host</th>
                            <th>Action</th>
                            <th class="col-md-1">Elapsed</th>
                            <th class="col-md-1">Duration</th>
                            <th class="col-md-1">Status</th>
                        </tr>
                    </thead>
                </table>
                {% else -%}
                <div class="text-center fa-border">
                    <h2>There is no task data for this playbook.</h2>
                    <h3>Either no tasks ran for the playbook or the playbook execution was interrupted and the data is incomplete.</h3>
                </div>
                {% endif -%}
            </div>
        </div>
    </div>
    <!-- End playbook task details -->

    <!-- Begin playbook data details -->
    <div class="list-group-item-container container-fluid hidden">
        <div class="close">
            <span class="pficon pficon-close"></span>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <h3>
                    <strong>Records</strong>
                    <span class="pficon pficon-help pull-right" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{% include "tips/records.html" %}"></span>
                </h3>
                {% if record_count -%}
                <table class="table table-striped table-bordered table-hover table-condensed records" id="records_{{ playbook.id }}">
                    <thead>
                        <tr>
                            <th><span class="pull-right">Key</span></th>
                            <th><span class="pull-left">Value</span></th>
                        </tr>
                    </thead>
                </table>
                {% else -%}
                <div class="text-center fa-border">
                    <h2>There is no recorded data for this playbook.</h2>
                    <h3>The <a href="https://ara.readthedocs.io/en/latest/usage.html#ara-record" target="_blank">ara_record</a> Ansible module helps you record arbitrary persistent data that is displayed here.</h3>
                    <h3>It provides the ability to save strings, lists, dicts, json or urls and each will be rendered accordingly. Try it out!</h3>
                </div>
                {% endif -%}
            </div>
        </div>
    </div>
    <!-- End playbook data details -->
    <!-- End playbook details -->
</div>

<!-- Begin modals -->
<div class="modal fade" id="host_modal" tabindex="-1" role="dialog" aria-labelledby="host_modal" aria-hidden="true">
    <div class="modal-lg modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span class="pficon pficon-close"></span>
                </button>
                <button type="button" class="link link-modal" aria-hidden="true">
                    <a data-href="{{ url_for('host.index') }}" target="_blank"><span class="fa fa-link" title="Permanent link to this host"></span></a>
                </button>
            </div>
            <div class="modal-body embed-responsive embed-responsive-item">
                <div class="row text-center"><strong>Loading host facts...</strong></div>
                <div class="spinner spinner-lg"></div>
                <iframe id="host_iframe" class="iframe" data-src="{{ url_for('host.index') }}"></iframe>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="file_modal" tabindex="-1" role="dialog" aria-labelledby="file_modal" aria-hidden="true">
    <div class="modal-lg modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span class="pficon pficon-close"></span>
                </button>
                <button type="button" class="link link-modal" aria-hidden="true">
                    <a data-href="{{ url_for('file.index') }}" target="_blank"><span class="fa fa-link" title="Permanent link to this file"></span></a>
                </button>
            </div>
            <div class="modal-body embed-responsive embed-responsive-item">
                <div class="row text-center"><strong>Loading file content...</strong></div>
                <div class="spinner spinner-lg"></div>
                <iframe id="file_iframe" class="iframe" data-src="{{ url_for('file.index') }}"></iframe>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="task_result_modal" tabindex="-1" role="dialog" aria-labelledby="task_result_modal" aria-hidden="true">
    <div class="modal-lg modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span class="pficon pficon-close"></span>
                </button>
                <button type="button" class="link link-modal" aria-hidden="true">
                    <a data-href="{{ url_for('result.index') }}" target="_blank"><span class="fa fa-link" title="Permanent link to this task result"></span></a>
                </button>
            </div>
            <div class="modal-body embed-responsive embed-responsive-item">
                <div class="row text-center"><strong>Loading task details...</strong></div>
                <div class="spinner spinner-lg"></div>
                <iframe id="result_iframe" class="iframe" data-src="{{ url_for('result.index') }}"></iframe>
            </div>
        </div>
    </div>
</div>
<!-- End modals -->
<!-- Begin data table javascript -->
<script>
    $("#parameters_{{ playbook.id }}").on( 'error.dt', function ( e, settings, techNote, message ) {
        console.log( 'An error has been reported by DataTables: ', message );
    }).DataTable({
        "ajax": "{{ url_for('reports.ajax_parameters', playbook=playbook.id) }}",
        "deferRender": true,
        "processing": true,
        "order": [[ 0, "asc" ]],
        "language": {
            "search": "Search: ",
            "loadingRecords": "<br><div class='row'>Loading playbook parameters...</div><div class='spinner table-spinner'></div>"
        },
        "paging": false
    });
    {% if stats_count -%}
    $("#stats_{{ playbook.id }}").on( 'error.dt', function ( e, settings, techNote, message ) {
        console.log( 'An error has been reported by DataTables: ', message );
    }).DataTable({
        "ajax": "{{ url_for('reports.ajax_stats', playbook=playbook.id) }}",
        "deferRender": true,
        "processing": true,
        "order": [[ 0, "asc" ]],
        "language": {
            "search": "Search: ",
            "loadingRecords": "<br><div class='row'>Loading host stats...</div><div class='spinner table-spinner'></div>"
        },
        "drawCallback": function(oSettings, json) {
            $('[data-toggle="tooltip"]').tooltip();
        },
        {{ macros.result_page_length(result_per_page) }}
    });
    {% endif -%}
    {% if play_count -%}
    $("#plays_{{ playbook.id }}").on( 'error.dt', function ( e, settings, techNote, message ) {
        console.log( 'An error has been reported by DataTables: ', message );
    }).DataTable({
        "ajax": "{{ url_for('reports.ajax_plays', playbook=playbook.id) }}",
        "deferRender": true,
        "processing": true,
        "order": [[ 1, "asc" ]],
        "language": {
            "search": "Search: ",
            "loadingRecords": "<br><div class='row'>Loading plays...</div><div class='spinner table-spinner'></div>"
        },
        {{ macros.result_page_length(result_per_page) }}
    });
    {% endif -%}
    {% if file_count -%}
    $('#files_{{ playbook.id }}').treeview({
      collapseIcon: "fa fa-angle-down",
      data: {{ playbook.id | treeview | safe }},
      expandIcon: "fa fa-angle-right",
      nodeIcon: "fa fa-folder-o",
      showBorder: false
    });
    {% endif -%}
    {% if task_count -%}
    $("#tasks_{{ playbook.id }}").on( 'error.dt', function ( e, settings, techNote, message ) {
        console.log( 'An error has been reported by DataTables: ', message );
    }).DataTable({
        "ajax": "{{ url_for('reports.ajax_results', playbook=playbook.id) }}",
        "deferRender": true,
        "processing": true,
        "order": [[ 3, "asc" ]],
        "language": {
            "search": "Search: ",
            "loadingRecords": "<br><div class='row'>Loading task results...</div><div class='spinner table-spinner'></div>"
        },
        "drawCallback": function(oSettings, json) {
            $('[data-toggle="tooltip"]').tooltip();
        },
        {{ macros.result_page_length(result_per_page) }}
    });
    {% endif -%}
    {% if record_count -%}
    $("#records_{{ playbook.id }}").on( 'error.dt', function ( e, settings, techNote, message ) {
        console.log( 'An error has been reported by DataTables: ', message );
    }).DataTable({
        "ajax": "{{ url_for('reports.ajax_records', playbook=playbook.id) }}",
        "deferRender": true,
        "processing": true,
        "ordering": false,
        "language": {
            "search": "Search: ",
            "loadingRecords": "<br><div class='row'>Loading records...</div><div class='spinner table-spinner'></div>"
        },
        {{ macros.result_page_length(result_per_page) }}
    });
    {% endif -%}
</script>
<!-- End data table javascript -->

<script>
    $('.modal').on('show.bs.modal', function(e) {
        /* Only load the iframe content when the modal is opened */
        var load = $(e.relatedTarget).data('load');
        $(this).find('a').prop('href', function() {
            // Set their src attribute to the value of data-src
            return $(this).data('href').replace('index.html','').concat(load);
        });
        $(this).find('iframe').prop('src', function() {
            // Set their src attribute to the value of data-src
            return $(this).data('src').replace('index.html','').concat(load);
        });

        /* Adjust modal and iframe height based on window size */
        $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
        $('.embed-responsive-item').css('height', $(window).height() * 0.7);
    });

    /* Disable default error alerts from datatables, fold them to the javascript console instead */
    $.fn.dataTable.ext.errMode = 'none';
</script>