<template name="studyAssociationTable">
    <div id="studyAssociationTable">
        <div id="associationInstructions" class="row">
            <div class="col-md-12">
                <h5>Instructions</h5>
                <p>Select the studies you would like to associate to a time point. Only one follow-up time point can be associated at the same time.</p>
                <p>We have automatically retrieved all studies within 14 days ({{formatDA this.earliestDate}} to {{formatDA latestDate}}) of your selected studies, in case you forgot to select a study.</p>
            </div>
        </div>

        <div class="tableHeaderBackground">
        </div>
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th class="center">Include Study?</th>
                    <th class="center">Study Date</th>
                    <th class="center">Patient Name</th>
                    <th class="center">Study Description</th>
                    <th class="center">Timepoint Type</th>
                </tr>
            </thead>

            <tbody>
                {{#each relevantStudies}}
                    <tr class="{{#if autoselected}}disabled{{/if}}">
                        <td class="checkboxWrapper center">
                            <label>
                                <input type="checkbox" class="includeStudy" {{valueIf autoselected '' 'checked'}}/> <span></span>
                            </label>
                        </td>
                        <td class="center studyDataCell">
                            {{#if autoselected}}
                                <p class="studyDate autoselected"
                                   data-toggle="tooltip"
                                   title="This study was autoselected.">
                                    {{formatDA studyDate}}
                                </p>
                            {{else}}
                                <p class="studyDate">{{formatDA studyDate}}</p>
                            {{/if}}
                        </td>
                        <td class="center studyDataCell">
                            <p>{{formatPN patientName}}</p>
                        </td>
                        <td class="studyDataCell">
                            <p>{{studyDescription}}</p>
                        </td>
                        <td class="timepointOptions center studyDataCell noselect">
                            {{#each timepointOptions}}
                                <label class="noselect">
                                    <input type="radio"
                                          name="{{../_id}}"
                                          value="{{value}}"
                                          class="timepointOption"
                                          {{valueIf checked 'checked' ''}}
                                          {{valueIf ../autoselected 'disabled' ''}}>
                                        <span></span>{{name}}
                                </label>
                            {{/each}}
                        </td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</template>
