{% import './components/icon.html' as icons %}
<div id="filters" class="flex-between container chip-container">
    <input type="checkbox" id="show-passed" class="chip-input" checked onchange="toggleChip(this)">
    <label for="show-passed" class="chip passed" title="Show / hide passed scenarios">
        <span class="chip-icon icon-on">{{ icons.circle_full() }}</span>
        <span class="chip-icon icon-off">{{ icons.circle() }}</span>
        <span class="chip-label">Passed</span>
    </label>

    <input type="checkbox" id="show-skipped" class="chip-input" checked onchange="toggleChip(this)">
    <label for="show-skipped" class="chip skipped" title="Show / hide skipped scenarios">
        <span class="chip-icon icon-on">{{ icons.circle_full() }}</span>
        <span class="chip-icon icon-off">{{ icons.circle() }}</span>
        <span class="chip-label">Skipped</span>
    </label>

    <input type="checkbox" id="show-failed" class="chip-input" checked onchange="toggleChip(this)">
    <label for="show-failed" class="chip failed" title="Show / hide failed scenarios">
        <span class="chip-icon icon-on">{{ icons.circle_full() }}</span>
        <span class="chip-icon icon-off">{{ icons.circle() }}</span>
        <span class="chip-label">Failed</span>
    </label>
</div>