<div class="policy-item">
    {{#equal compliance "COMPLIANT"}}
      <i class="icon fw fw-success fw-3x policy-status"></i>
    {{/equal}}
    {{#equal compliance "NON-COMPLIANT"}}
      <i class="icon fw fw-warning fw-3x policy-status"></i>
    {{/equal}}
    <p>
        <span class="policy-name">{{policy.policyName}}</span>
        <span class="policy-platform">{{deviceType}}</span>
    </p>
    <p>
        <span class="comp-type">Compliance Type : <strong>{{policy.compliance}}</strong></span>
        <span class="ownership-type">Ownership type : <strong>{{policy.ownershipType}}</strong></span>
    </p>
    <div class="actions">
        <div class="action-btn ripple">
            <p><a href="{{appContext}}/policy/effective-policy?type={{deviceType}}&id={{deviceId}}">
              <i class="icon fw fw-view fw-2x"></i> <span>View Policy </span></a></p>
        </div>
    </div>
</div>

<table class="table table-striped table-hover table-bordered display data-table" id="policy-compliance-table">
    <thead>
        <tr class="sort-row">
            <th>Feature</th>
            <th>Compliance</th>
        </tr>
    </thead>
    <tbody>
    {{#each complianceFeatures}}
        <tr data-type="selectable">
            <td data-display="{{featureCode}}" data-grid-label="Feature Code">{{featureCode}}</td>
            <td data-display="{{compliance}}" data-grid-label="Status">
                {{#equal compliance true}}<span><i class="fw fw-success icon-success"></i> Compliant</span>{{/equal}}
                {{#equal compliance false}}<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>{{/equal}}
            </td>
        </tr>
    {{/each}}
    <br class="c-both" />
    </tbody>
</table>
