<template>
    
    <div class="metric-grid" show.bind="outputs.metricGrid.pages[ 0 ]">
        <div class="row"> 
            <div class="col col-2 grid-header">Student</div>
            <div class="col col-1 grid-header">Key Sigs</div>
            <div class="col col-4 grid-header">Intervals</div>
            <div class="col col-3 grid-header">Triads</div>
            <div class="col col-2 grid-header">Fretboard Knowledge</div>
        </div>
        <div class="row">
            <div class="col col-2"></div>
            <div class="col col-1"></div>
            <div class="col col-1">Test A</div>
            <div class="col col-1">Test 1</div>
            <div class="col col-1">Test 2</div>
            <div class="col col-1">Test 3</div>
            <div class="col col-1">Test 1</div>
            <div class="col col-1">Test 2</div>
            <div class="col col-1">Test 3</div>
            <div class="col col-1">Int frets 1-5</div>
            <div class="col col-1">Adv frets 1-12</div>       
        </div>

        <div class="row" repeat.for="student of outputs.metricGrid.data">
            <div class="col col-2 student-cell">${ student.name }</div>
            <div class="col col-1" repeat.for="metric of student.metricStatus[ 0 ]">           
                <em class="fa fa-fw fa-check-circle olive" show.bind="metric === true"></em>
                <em class="fa fa-fw fa-square-o gray" show.bind="metric !== true"></em>
            </div>
        </div>
    </div>

</template>