<commit_before><div class="tab-pane" id="jobs-detail">
    <div ng-cloak id="htmlTemplate">

        <div class="row">
            <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
                <ul class="ansible-breadcrumb" id="breadcrumb-list">
                    <li><a href="/#/jobs">Jobs</a></li>
                    <li class="active"><a href="">{{ job_id }} - {{ job.name }}</a></li>
                </ul>
            </div>
        </div>

        <div class="row" style="position: relative;">
            <div id="job-detail-container">
                <div class="job_well">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <a href="/#/jobs/{{ job_id }}/stdout" id="view-stdout-button" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-external-link"></i></a>
                            <a href="" ng-click="deleteJob()" id="cancel-job-button" ng-show="job_status.status == 'running'" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Cancel" data-placement="top"><i class="fa fa-minus-circle"></i></a>
                            <a href="" ng-click="deleteJob()" id="delete-job-button" ng-show="job_status.status != 'running'" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Delete" data-placement="top"><i class="fa fa-trash-o"></i></a>
                            <a href="" ng-click="relaunchJob()" id="relaunch-job-button" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Relaunch using the same parameters" data-placement="top"><i class="fa fa-rocket"></i></a>
                            <button type="button" id="summary-button" class="btn btn-primary btn-xs" ng-click="toggleSummary()" aw-tool-tip="View summary" data-placement="top"><i class="fa fa-arrow-circle-left"></i></button>
                        </div>
                    </div>

                    <div class="form-horizontal" role="form" id="job-status-form">

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                <i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }} {{ job_status.explanation }}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Started</label>
                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                <div ng-show="job_status.started" id="started-time">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
                                <div ng-show="job_status.finished" id="finished-time">Finished &nbsp;{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</div>
                                <div ng-show="job_status.finished" id="elapsed-time">Elapsed &nbsp;{{ job_status.elapsed }}</div>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job_template_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job_type">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Type</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job_type }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="inventory_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="project_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.playbook">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Playbook</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.playbook }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="credential_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Machine Credential</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ credential_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="cloud_credential_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Cloud Credential</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ cloud_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ cloud_credential_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.forks">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Forks</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.forks }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.limit">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Limit</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.limit }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="verbosity">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Verbosity</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ verbosity }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.job_tags">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Tags</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.job_tags }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="variables">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Extra Variables</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <div id="pre-formatted-variables">{{ variables }}</div>
                                <!-- <pre>{{ variables }}</pre> -->
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12 more-or-less">
                                <a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more <i class="fa fa-angle-down"></i></a>
                                <a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
                            </div>
                        </div>

                        <hr>

                    </div>

                    <div id="job-detail-tables">
                        <div id="play-section" class="section">

                            <div class="row title-row">
                                <div class="col-lg-1 col-md-2 col-sm-2 col-xs-1 title">Plays</div>
                                <div class="col-lg-11 col-md-10 col-sm-10 col-xs-11" style="text-align:right;">
                                    <div id="play-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_play_name" ng-model="search_play_name"
                                                        placeholder="Play Name" ng-keypress="searchPlaysKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchPlaysEnabled" ng-click="searchPlays()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchPlaysEnabled" ng-click="search_play_name=''; searchPlays()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterPlayStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-header">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column">Status</th>
                                            <th class="col-lg-7 col-md-6 col-sm-6 col-xs-4">Name</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="plays-table-detail" class="table-detail" lr-infinite-scroll="playsScrollDown"
                                scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <tbody>
                                        <tr class="cursor-pointer" ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ play.created | date: 'HH:mm:ss' }}</td>
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
                                                data-placement="top">{{ play.elapsed }}</td>
                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
                                            <td class="col-lg-7 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
                                        </tr>
                                        <tr ng-show="plays.length === 0">
                                            <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="playsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->

                        <div id="task-section" class="section" tasks=>

                            <div class="row title-row">
                                <div class="col-lg-1 col-md-2 col-sm-2 title">Tasks</div>
                                <div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
                                    <div id="task-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_task_name" ng-model="search_task_name"
                                                        placeholder="Task Name" ng-keypress="searchTasksKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchTasksEnabled" ng-click="searchTasks()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchTasksEnabled" ng-click="search_task_name=''; searchTasks()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterTaskStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-header">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column">Status</th>
                                            <th class="col-lg-3 col-md-3 col-sm-6 col-xs-4">Name</div>
                                            <th class="col-lg-4 col-md-3 hidden-xs hidden-sm">Host Status</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="tasks-table-detail" class="table-detail" lr-infinite-scroll="tasksScrollDown"
                                scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <tbody>
                                        <tr class="cursor-pointer" ng-repeat="task in taskList = (tasks) track by $index" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
                                                    data-placement="top">{{ task.elapsed }}</td>
                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ task.status_tip }}"
                                                data-tip-watch="task.status_tip" data-placement="top"><i class="fa icon-job-{{  task.status }}"></i></td>
                                            <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><span ng-show="hasRoles">{{ task.role }}</span> {{ task.name }}</td>
                                            <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                        </tr>
                                        <tr ng-show="taskList.length === 0">
                                            <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="tasksMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->

                        <div id="task-hosts-section" class="section">

                            <div class="row title-row">
                                <div class="col-lg-2 col-md-2 col-sm-2 title">Host Events</div>
                                <div class="col-lg-10 col-md-10 col-sm-10" style="text-align:right;">
                                    <div id="host-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_host_name" ng-model="search_host_name"
                                                        placeholder="Host Name" ng-keypress="searchHostsKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchHostsEnabled" ng-click="searchHosts()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchHostsEnabled" ng-click="search_host_name=''; searchHosts()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterHostStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-header" id="hosts-table-header">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column">Status</th>
                                            <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Host</th>
                                            <th class="col-lg-4 col-md-4 col-sm-3 col-xs-3">Item</th>
                                            <th class="col-lg-4 col-md-4 col-sm-3 col-xs-3">Message</th>
                                            <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <div id="hosts-table-detail" class="table-detail" lr-infinite-scroll="hostResultsScrollDown" scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed">
                                    <tbody>
                                        <tr ng-repeat="result in results = (hostResults) track by $index">
                                            <td class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="fa icon-job-{{ result.status }}"></i><i ng-show="result.status_text == 'Unreachable'" class="fa icon-job-unreachable"></i></a></td>
                                            <td class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top">{{ result.name }}</a></td>
                                            <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3 item-column">{{ result.item }}</td>
                                            <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                            <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a href="" ng-click="editHost(result.host_id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                        </tr>
                                        <tr ng-show="results.length === 0">
                                            <td colspan="5" class="col-lg-12 loading-info">No matching hosts</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="hostResultsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->
                    </div><!-- job-detail-tables -->

                </div><!-- well -->

            </div><!-- job-detail-container -->

            <div id="job-summary-container">
                <div class="job_well">
                    <div id="summary-well-top-section">
                        <div id="hide-summary-button" style="display: hidden;">
                            <a href="" class="btn btn-xs btn-primary" ng-click="toggleSummary('hide')" aw-tool-tip="Hide summary" data-placement="top"><i class="fa fa-arrow-circle-right"></i></a>
                        </div>

                        <div id="hosts-summary-section" class="section">

                            <div class="row title-row">
                                <div class="col-lg-2 col-md-2 col-sm-2 title">Summary</div>
                                <div class="col-lg-10 col-md-10 col-sm-10" style="text-align:right;">
                                    <div id="task-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_host_summary_name" ng-model="search_host_summary_name"
                                                        placeholder="Host Name" ng-keypress="searchHostSummaryKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchHostSummaryEnabled" ng-click="searchHostSummary()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchHostSummaryEnabled" ng-click="search_host_summary_name=''; searchHostSummary()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterHostSummaryStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row legend-row">
                                <div class="col-md-12">
                                    <div class="legend"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                                </div>
                            </div>

                            <div class="table-header">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</th>
                                            <th class="col-lg-5 col-md-5 col-sm-5 col-xs-5">Completed Tasks</th>
                                            <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed">
                                    <tbody>
                                        <tr ng-repeat="host in summaryList = (hosts) track by $index" id="{{ host.id }}">
                                            <td class="name col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events" data-placement="top">{{ host.name }}</a></td>
                                            <td class="col-lg-5 col-md-5 col-sm-5 col-xs-5 badge-column">
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
                                            <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="host.id" href="" ng-click="editHost(host.id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                        </tr>
                                        <tr ng-show="summaryList.length === 0">
                                            <td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="hostSummariesMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->
                    </div><!-- summary-well-top-section -->

                    <div id="graph-section" class="section">
                        <div class="header">
                            <div class="title">Status Summary</div>
                            <div class="legend" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                    <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                        </div>
                    </div><!-- graph section -->
                </div>
            </div><!-- col-md-5 -->

        </div>

        <div id="job-detail-footer" class="footer-row"></div>

    </div>

    <div ng-include="'/static/partials/eventviewer.html'"></div>

    <div id="host-events-modal-dialog" style="display:none;">
        <div id="search-form" class="form-inline">
            <div class="form-group" style="position:relative;">
                <label>Search</label>
                <div class="search-name" style="display:inline-block; position:relative;">
                    <input type="text" class="form-control input-sm" id="host-events-search-name" ng-model="host_events_search_name" placeholder="Host name" ng-keypress="searchEventKeyPress($event)" >
                    <div id="search-all-input-icons">
                        <a class="search-icon" ng-show="!eventsSearchActive" ng-click="searchEvents()"><i class="fa fa-search"></i></a>
                        <a class="search-icon" ng-show="eventsSearchActive" ng-click="host_events_search_name=''; searchEvents()"><i class="fa fa-times"></i></a>
                    </div>
                </div>
            </div>
            <div class="form-group" id="status-field">
                <label>Status</label>
                <select id="host-events-search-status" class="form-control input-sm" ng-model="host_events_search_status" name="host-events-search-name" ng-change="searchEvents()">
                    <option value="all">All</option>
                    <option value="changed">Changed</option>
                    <option value="failed">Failed</option>
                    <option value="ok">OK</option>
                    <option value="unreachable">Unreachable</option>
                </select>
            </div>
            <div class="form-group" id="search-indicator" ng-show="hostViewSearching"><i class="fa fa-lg fa-spin fa-cog"></i></div>
        </div>
        <!-- lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500" -->
        <div id="host-events-table">
            <table id="fixed-table-header" class="table">
                <thead>
                    <tr><th class="col-md-3">Status</th>
                        <th class="col-md-3">Host</th>
                        <th class="col-md-3">Play</th>
                        <th class="col-md-3">Task</th>
                    </tr>
                </thead>
            </table>
            <div id="host-events" lr-infinite-scroll="hostEventsScrollDown" scroll-threshold="10" time-threshold="500"></div>
        </div>
   </div>

   <div id="host-modal-dialog" style="display: none;" class="dialog-content"></div>

</div>
<commit_msg>Job detail page refactoration If host result does not have a host_id value, don't present the edit host link. Broke the status message out into its own grid column to improve spacing/readability.<commit_after><div class="tab-pane" id="jobs-detail">
    <div ng-cloak id="htmlTemplate">

        <div class="row">
            <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
                <ul class="ansible-breadcrumb" id="breadcrumb-list">
                    <li><a href="/#/jobs">Jobs</a></li>
                    <li class="active"><a href="">{{ job_id }} - {{ job.name }}</a></li>
                </ul>
            </div>
        </div>

        <div class="row" style="position: relative;">
            <div id="job-detail-container">
                <div class="job_well">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <a href="/#/jobs/{{ job_id }}/stdout" id="view-stdout-button" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-external-link"></i></a>
                            <a href="" ng-click="deleteJob()" id="cancel-job-button" ng-show="job_status.status == 'running'" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Cancel" data-placement="top"><i class="fa fa-minus-circle"></i></a>
                            <a href="" ng-click="deleteJob()" id="delete-job-button" ng-show="job_status.status != 'running'" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Delete" data-placement="top"><i class="fa fa-trash-o"></i></a>
                            <a href="" ng-click="relaunchJob()" id="relaunch-job-button" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Relaunch using the same parameters" data-placement="top"><i class="fa fa-rocket"></i></a>
                            <button type="button" id="summary-button" class="btn btn-primary btn-xs" ng-click="toggleSummary()" aw-tool-tip="View summary" data-placement="top"><i class="fa fa-arrow-circle-left"></i></button>
                        </div>
                    </div>

                    <div class="form-horizontal" role="form" id="job-status-form">

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
                            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</div>
                            <div class="col-lg-8 col-md-7 col-sm-6 col-xs-5">{{ job_status.explanation }}</div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Started</label>
                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                <div ng-show="job_status.started" id="started-time">{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>
                                <div ng-show="job_status.finished" id="finished-time">Finished &nbsp;{{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}</div>
                                <div ng-show="job_status.finished" id="elapsed-time">Elapsed &nbsp;{{ job_status.elapsed }}</div>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job_template_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job_type">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Type</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job_type }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="inventory_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="project_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.playbook">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Playbook</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.playbook }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="credential_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Machine Credential</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ credential_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="cloud_credential_name">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Cloud Credential</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <a href="{{ cloud_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ cloud_credential_name }}</a>
                            </div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.forks">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Forks</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.forks }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.limit">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Limit</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.limit }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="verbosity">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Verbosity</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ verbosity }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="job.job_tags">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Tags</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.job_tags }}</div>
                        </div>

                        <div class="form-group toggle-show" style="display:none;" ng-show="variables">
                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Extra Variables</label>
                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                <div id="pre-formatted-variables">{{ variables }}</div>
                                <!-- <pre>{{ variables }}</pre> -->
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12 more-or-less">
                                <a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more <i class="fa fa-angle-down"></i></a>
                                <a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
                            </div>
                        </div>

                        <hr>

                    </div>

                    <div id="job-detail-tables">
                        <div id="play-section" class="section">

                            <div class="row title-row">
                                <div class="col-lg-1 col-md-2 col-sm-2 col-xs-1 title">Plays</div>
                                <div class="col-lg-11 col-md-10 col-sm-10 col-xs-11" style="text-align:right;">
                                    <div id="play-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_play_name" ng-model="search_play_name"
                                                        placeholder="Play Name" ng-keypress="searchPlaysKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchPlaysEnabled" ng-click="searchPlays()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchPlaysEnabled" ng-click="search_play_name=''; searchPlays()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterPlayStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-header">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column">Status</th>
                                            <th class="col-lg-7 col-md-6 col-sm-6 col-xs-4">Name</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="plays-table-detail" class="table-detail" lr-infinite-scroll="playsScrollDown"
                                scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <tbody>
                                        <tr class="cursor-pointer" ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ play.created | date: 'HH:mm:ss' }}</td>
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
                                                data-placement="top">{{ play.elapsed }}</td>
                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
                                            <td class="col-lg-7 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
                                        </tr>
                                        <tr ng-show="plays.length === 0">
                                            <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="playsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->

                        <div id="task-section" class="section" tasks=>

                            <div class="row title-row">
                                <div class="col-lg-1 col-md-2 col-sm-2 title">Tasks</div>
                                <div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
                                    <div id="task-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_task_name" ng-model="search_task_name"
                                                        placeholder="Task Name" ng-keypress="searchTasksKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchTasksEnabled" ng-click="searchTasks()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchTasksEnabled" ng-click="search_task_name=''; searchTasks()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterTaskStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-header">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
                                            <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Elapsed</th>
                                            <th class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column">Status</th>
                                            <th class="col-lg-3 col-md-3 col-sm-6 col-xs-4">Name</div>
                                            <th class="col-lg-4 col-md-3 hidden-xs hidden-sm">Host Status</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="tasks-table-detail" class="table-detail" lr-infinite-scroll="tasksScrollDown"
                                scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed" style="table-layout:fixed;">
                                    <tbody>
                                        <tr class="cursor-pointer" ng-repeat="task in taskList = (tasks) track by $index" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
                                            <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
                                                    data-placement="top">{{ task.elapsed }}</td>
                                            <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ task.status_tip }}"
                                                data-tip-watch="task.status_tip" data-placement="top"><i class="fa icon-job-{{  task.status }}"></i></td>
                                            <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><span ng-show="hasRoles">{{ task.role }}</span> {{ task.name }}</td>
                                            <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                        </tr>
                                        <tr ng-show="taskList.length === 0">
                                            <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="tasksMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->

                        <div id="task-hosts-section" class="section">

                            <div class="row title-row">
                                <div class="col-lg-2 col-md-2 col-sm-2 title">Host Events</div>
                                <div class="col-lg-10 col-md-10 col-sm-10" style="text-align:right;">
                                    <div id="host-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_host_name" ng-model="search_host_name"
                                                        placeholder="Host Name" ng-keypress="searchHostsKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchHostsEnabled" ng-click="searchHosts()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchHostsEnabled" ng-click="search_host_name=''; searchHosts()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterHostStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-header" id="hosts-table-header">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column">Status</th>
                                            <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Host</th>
                                            <th class="col-lg-4 col-md-4 col-sm-3 col-xs-3">Item</th>
                                            <th class="col-lg-4 col-md-4 col-sm-3 col-xs-3">Message</th>
                                            <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <div id="hosts-table-detail" class="table-detail" lr-infinite-scroll="hostResultsScrollDown" scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed">
                                    <tbody>
                                        <tr ng-repeat="result in results = (hostResults) track by $index">
                                            <td class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="fa icon-job-{{ result.status }}"></i><i ng-show="result.status_text == 'Unreachable'" class="fa icon-job-unreachable"></i></a></td>
                                            <td class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top">{{ result.name }}</a></td>
                                            <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3 item-column">{{ result.item }}</td>
                                            <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                            <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="result.host_id" href="" ng-click="editHost(result.host_id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                        </tr>
                                        <tr ng-show="results.length === 0">
                                            <td colspan="5" class="col-lg-12 loading-info">No matching hosts</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="hostResultsMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->
                    </div><!-- job-detail-tables -->

                </div><!-- well -->

            </div><!-- job-detail-container -->

            <div id="job-summary-container">
                <div class="job_well">
                    <div id="summary-well-top-section">
                        <div id="hide-summary-button" style="display: hidden;">
                            <a href="" class="btn btn-xs btn-primary" ng-click="toggleSummary('hide')" aw-tool-tip="Hide summary" data-placement="top"><i class="fa fa-arrow-circle-right"></i></a>
                        </div>

                        <div id="hosts-summary-section" class="section">

                            <div class="row title-row">
                                <div class="col-lg-2 col-md-2 col-sm-2 title">Summary</div>
                                <div class="col-lg-10 col-md-10 col-sm-10" style="text-align:right;">
                                    <div id="task-search-form" class="search-form form-inline">
                                        <div class="form-group">
                                            <div class="search-name" style="display:inline-block; position:relative;">
                                                <input type="text" class="input-xs form-control" id="search_host_summary_name" ng-model="search_host_summary_name"
                                                        placeholder="Host Name" ng-keypress="searchHostSummaryKeyPress($event)" >
                                                <div id="search-all-input-icons">
                                                    <a class="search-icon" ng-show="searchHostSummaryEnabled" ng-click="searchHostSummary()"><i class="fa fa-search"></i></a>
                                                    <a class="search-icon" ng-show="!searchHostSummaryEnabled" ng-click="search_host_summary_name=''; searchHostSummary()"><i class="fa fa-times"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="btn-group" aw-toggle-button data-after-toggle="filterHostSummaryStatus">
                                                <button class="btn btn-xs btn-primary active">All</button>
                                                <button class="btn btn-xs btn-default">Failed</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row legend-row">
                                <div class="col-md-12">
                                    <div class="legend"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                                </div>
                            </div>

                            <div class="table-header">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</th>
                                            <th class="col-lg-5 col-md-5 col-sm-5 col-xs-5">Completed Tasks</th>
                                            <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
                                <table class="table table-condensed">
                                    <tbody>
                                        <tr ng-repeat="host in summaryList = (hosts) track by $index" id="{{ host.id }}">
                                            <td class="name col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events" data-placement="top">{{ host.name }}</a></td>
                                            <td class="col-lg-5 col-md-5 col-sm-5 col-xs-5 badge-column">
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
                                            <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="host.id" href="" ng-click="editHost(host.id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                        </tr>
                                        <tr ng-show="summaryList.length === 0">
                                            <td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="scroll-spinner" id="hostSummariesMoreRows"><i class="fa fa-cog fa-spin"></i></div>
                        </div><!-- section -->
                    </div><!-- summary-well-top-section -->

                    <div id="graph-section" class="section">
                        <div class="header">
                            <div class="title">Status Summary</div>
                            <div class="legend" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                    <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                        </div>
                    </div><!-- graph section -->
                </div>
            </div><!-- col-md-5 -->

        </div>

        <div id="job-detail-footer" class="footer-row"></div>

    </div>

    <div ng-include="'/static/partials/eventviewer.html'"></div>

    <div id="host-events-modal-dialog" style="display:none;">
        <div id="search-form" class="form-inline">
            <div class="form-group" style="position:relative;">
                <label>Search</label>
                <div class="search-name" style="display:inline-block; position:relative;">
                    <input type="text" class="form-control input-sm" id="host-events-search-name" ng-model="host_events_search_name" placeholder="Host name" ng-keypress="searchEventKeyPress($event)" >
                    <div id="search-all-input-icons">
                        <a class="search-icon" ng-show="!eventsSearchActive" ng-click="searchEvents()"><i class="fa fa-search"></i></a>
                        <a class="search-icon" ng-show="eventsSearchActive" ng-click="host_events_search_name=''; searchEvents()"><i class="fa fa-times"></i></a>
                    </div>
                </div>
            </div>
            <div class="form-group" id="status-field">
                <label>Status</label>
                <select id="host-events-search-status" class="form-control input-sm" ng-model="host_events_search_status" name="host-events-search-name" ng-change="searchEvents()">
                    <option value="all">All</option>
                    <option value="changed">Changed</option>
                    <option value="failed">Failed</option>
                    <option value="ok">OK</option>
                    <option value="unreachable">Unreachable</option>
                </select>
            </div>
            <div class="form-group" id="search-indicator" ng-show="hostViewSearching"><i class="fa fa-lg fa-spin fa-cog"></i></div>
        </div>
        <!-- lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500" -->
        <div id="host-events-table">
            <table id="fixed-table-header" class="table">
                <thead>
                    <tr><th class="col-md-3">Status</th>
                        <th class="col-md-3">Host</th>
                        <th class="col-md-3">Play</th>
                        <th class="col-md-3">Task</th>
                    </tr>
                </thead>
            </table>
            <div id="host-events" lr-infinite-scroll="hostEventsScrollDown" scroll-threshold="10" time-threshold="500"></div>
        </div>
   </div>

   <div id="host-modal-dialog" style="display: none;" class="dialog-content"></div>

</div>

{'fraction_non_alphanumeric': 0.15073607700061045, 'fraction_numerical': 0.011115685467270481, 'mean_word_length': 1.1976726047483854, 'pattern_counts': {'":': 0, '<': 1293, '<?xml version=': 0, '>': 1293, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 563, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '807085', 'n_tokens_mistral': 18305, 'n_tokens_neox': 17514, 'n_words': 3297}