<div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">

<div ng-if="showHeader()"

ng-class="!showTitlesSeparator || showTitlesSeparator === 'true' ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">

<div class="card-pf-table">

<div class="card-pf-cell">

<h2 class="card-pf-title" ng-class="{'card-pf-filter-header': showFilterInHeader()}">{{headTitle}}</h2>

</div>

<div class="card-pf-cell text-right" ng-if="showFilterInHeader()">

<div class="dropdown btn-group">

<div ng-include="'card/basic/card-filter.html'"></div>

</div>

</div>

</div>

</div>

<span ng-if="subTitle" class="card-pf-subtitle">{{subTitle}}</span>

<div class="card-pf-body">

<div ng-transclude></div>

</div>

<div class="card-pf-footer" ng-if="footer">

<div class="card-pf-table">

<div class="card-pf-cell">

<a href="{{footer.href}}" ng-if="footer.href">

<span class="{{footer.iconClass}} card-pf-footer-text" ng-if="footer.iconClass"></span>

<span class="card-pf-footer-text" ng-if="footer.text">{{footer.text}}</span>

</a>

<a ng-if="footer.callBackFn && !footer.href" ng-click="footerCallBackFn()">

<span class="{{footer.iconClass}} card-pf-footer-text" ng-if="footer.iconClass"></span>

<span class="card-pf-footer-text" ng-if="footer.text">{{footer.text}}</span>

</a>

<span ng-if="!footer.href && !footer.callBackFn">

<span class="{{footer.iconClass}} card-pf-footer-text" ng-if="footer.iconClass"></span>

<span class="card-pf-footer-text" ng-if="footer.text">{{footer.text}}</span>

</span>

</div>

<div class="card-pf-cell text-right" ng-if="filter && filter.filters && (!filter.position || filter.position === 'footer')">

<div class="dropdown btn-group">

<div ng-include="'card/basic/card-filter.html'"></div>

</div>

</div>

</div>

</div>

</div>