<div class="tab-pane" id="hosts-panel">
    <aw-limit-panels max-panels="2" panel-container="hosts-panel"></aw-limit-panels>
    <div ui-view="form"></div>
    <div class="Panel">
        <div class="row Form-tabRow">
            <div class="col-lg-12">
                <div class="Form-tabHolder">
                    <div class="Form-tab " ng-click="$state.go('inventories')" translate>INVENTORIES</div>
                    <div class="Form-tab is-selected" ng-click="$state.go('hosts')" translate>HOSTS</div>
                </div>
            </div>
        </div>
        <div>
            <div class="List-actionHolder List-actionHolder--leftAlign">
                <div class="List-actions">
                    <div ng-include="'/static/partials/shared/list-generator/list-actions.partial.html'"></div>
                </div>
            </div>
            <div ng-hide="hosts.length === 0 && (searchTags | isEmpty)">
                <smart-search
                    django-model="hosts"
                    search-size="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                    single-search-param="host_filter"
                    base-path="hosts"
                    iterator="host"
                    dataset="host_dataset"
                    list="list"
                    collection="hosts"
                    default-params="host_default_params"
                    query-set="host_queryset"
                    search-tags="searchTags">
                </smart-search>
            </div>

            <div class="row" ng-show="hosts.length === 0 && !(searchTags | isEmpty)">
                <div class="col-lg-12 List-searchNoResults" translate>No records matched your search.</div>
            </div>
            <div class="List-noItems" ng-show="hosts.length === 0 && (searchTags | isEmpty)" translate>NO HOSTS HAVE BEEN CREATED</div>
            <div class="list-table-container" ng-show="hosts.length > 0">
                <table id="hosts_table" class="List-table table-no-border" is-extended="false">
                    <thead>
                        <tr class="List-tableHeaderRow">
                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="toggleHost" column-iterator="host" column-no-sort="true" column-label="" column-custom-class="List-staticColumn--toggle" query-set="host_queryset"></th>
                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="active_failures" column-iterator="host" column-no-sort="true" column-label="" column-custom-class="status-column List-staticColumn--smallStatus" query-set="host_queryset"></th>
                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-6 col-md-8 col-sm-8 col-xs-7" query-set="host_queryset"></th>
                            <th base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="col-lg-5 col-md-4 col-sm-4 hidden-xs elllipsis" query-set="host_queryset"></th>
                            <th class="List-tableHeader List-tableHeader--actions actions-column col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right" translate>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-class="{'List-tableRow--selected': $stateParams['host_id'] == host.id}" id="{{ host.id }}" class="List-tableRow host_class" ng-repeat="host in hosts track by host.id">
                            <td class="List-tableCell toggleHost-column List-staticColumn--toggle">
                                <div class="ScheduleToggle" ng-class="{'is-on': host.enabled, 'ScheduleToggle--disabled': host.has_inventory_sources}" aw-tool-tip="<p>Indicates if a host is available and should be included in running jobs.</p><p>For hosts that are part of an external inventory, this flag cannot be changed. It will be set by the inventory sync process.</p>" data-placement="right" data-tip-watch="undefined">
                                    <button ng-disabled="host.has_inventory_sources" ng-show="host.enabled" class="ScheduleToggle-switch is-on" ng-click="toggleHost($event, host)" translate>ON</button>
                                    <button ng-disabled="host.has_inventory_sources" ng-show="!host.enabled" class="ScheduleToggle-switch" ng-click="toggleHost($event, host)" translate>OFF</button>
                                </div>
                            </td>
                            <td class="List-tableCell active_failures-column status-column List-staticColumn--smallStatus">
                                <div class="host-name">
                                    <a href="" ng-click="noop()" aw-tool-tip="{{ host.badgeToolTip }}" aw-pop-over="{{ host.job_status_html }}" data-placement="top" over-title="{{ host.job_status_title }}">
                                        <i class="fa {{ 'fa icon-job-' + host.active_failures }}"></i>
                                    </a>
                                </div>
                            </td>
                            <td class="List-tableCell name-column InventoryManage-breakWord col-lg-6 col-md-8 col-sm-8 col-xs-7">
                                <div class="host-name">
                                    <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
                                </div>
                            </td>
                            <td class="List-tableCell inventory_name-column col-lg-5 col-md-4 col-sm-4 hidden-xs elllipsis">
                                <div class="host-name">
                                    <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
                                </div>
                            </td>
                            <td class="List-actionsContainer">
                                <div class="List-actionButtonCell List-tableCell">
                                    <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="View Insights Data" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
                                        <i class="fa fa-info"></i>
                                    </button>
                                    <button id="edit-action" class="List-actionButton " ng-class="{'List-editButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit') }" data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="Edit host" ng-show="host.summary_fields.user_capabilities.edit">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button id="view-action" class="List-actionButton " data-placement="top" ng-click="editHost(host.id)" aw-tool-tip="View host" ng-show="!host.summary_fields.user_capabilities.edit"><i class="fa fa-search-plus"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- table container -->
            <paginate
                base-path="hosts"
                collection="hosts"
                dataset="host_dataset"
                iterator="host"
                query-set="host_queryset">
            </paginate>
        </div>
    </div>
</div>
