<div class="datatable">
  <rd-widget>
    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
    <rd-widget-body classes="no-padding">
      <div class="actionBar">
        <div class="row">
          <div class="col-sm-12">
            <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.templates.new" ng-if="$ctrl.showAddAction">
              <i class="fa fa-plus space-right" aria-hidden="true"></i>Add template
            </button>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <template-list-dropdown
              options="$ctrl.state.categories"
              on-change="($ctrl.applyCategoriesFilter)"
              placeholder="'Category'"
              value="$ctrl.state.selectedCategory"
            ></template-list-dropdown>
          </div>
          <div class="col-sm-3">
            <template-list-dropdown
              options="$ctrl.state.typeFilters"
              on-change="($ctrl.applyTypeFilter)"
              placeholder="'Type'"
              value="$ctrl.state.filterByType"
            ></template-list-dropdown>
          </div>
          <div class="col-sm-3 col-sm-offset-3">
            <template-list-sort
              on-change="($ctrl.changeOrderBy)"
              on-descending="($ctrl.invertOrder)"
              options="$ctrl.state.orderByFields"
              sort-by-button="true"
              sort-by-descending="$ctrl.state.orderDesc"
              placeholder="'Sort By'"
              value="$ctrl.state.selectedOrderBy"
            ></template-list-sort>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <div class="searchBar items-center flex gap-1">
              <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
              <input
                type="text"
                class="searchInput"
                ng-model="$ctrl.state.textFilter"
                ng-change="$ctrl.onTextFilterChange()"
                placeholder="Search..."
                auto-focus
                ng-model-options="{ debounce: 300 }"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
        <template-item
          ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
          model="template"
          type-label="{{ template.Type === 1 ? 'container' : 'stack' }}"
          on-select="($ctrl.selectAction)"
        >
          <template-item-actions ng-if="template.Type === 2 || template.Type === 3">
            <button ng-click="$event.stopPropagation(); $ctrl.duplicateTemplate(template)" class="btn btn-primary btn-xs"> Copy as Custom </button>
          </template-item-actions>
        </template-item>
        <div ng-if="!$ctrl.templates" class="text-center text-muted"> Loading... </div>
        <div
          ng-if="($ctrl.templates | filter: $ctrl.filterByTemplateType | filter: $ctrl.filterByCategory | filter: $ctrl.state.textFilter).length === 0"
          class="text-center text-muted"
        >
          No templates available.
        </div>
      </div>
    </rd-widget-body>
  </rd-widget>
</div>
