<template name="studyTimepointBrowser">
    {{#let timepointList=timepoints}}
        <div class="studyTimepointBrowser noselect {{#if shallShowViewType timepointList}}viewTypeVisible{{/if}}">
            <div class="timepointButtonContainer p-t-2">
                {{>roundedButtonGroup viewTypeButtonGroupData}}
            </div>
            <div class="studyTimepointScrollArea">
                <div class="p-x-1">
                    {{#if timepointList.length}}
                        {{#each timepoint in timepointList}}
                            <div class="timepoint-browser-item">
                                <div class="timepoint-item p-y-2">
                                    <div class="timepointHeader">
                                        <div class="timepoint-details clearfix">
                                            <div class="timepoint-title pull-left">
                                                {{timepointApi.title timepoint}}
                                            </div>
                                            <div class="timepoint-expand-icon pull-right">
                                                <i class="fa fa-chevron-down"></i>
                                            </div>
                                            <div class="timepoint-date pull-right m-r-1">{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}</div>
                                        </div>
                                        <div class="timepoint-summary">{{modalitiesSummary timepoint}}</div>
                                    </div>
                                    {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
                                </div>
                            </div>
                            <hr>
                        {{/each}}
                        {{#if and this.currentStudy (not showAdditionalTimepoints) hasAdditionalTimepoints}}
                            <div class="study-item-box additional">
                                Show additional timepoints
                            </div>
                        {{/if}}
                    {{else}}
                        <div class="p-t-2">
                            {{>studyTimepoint (clone this studies=studies)}}
                        </div>
                    {{/if}}
                </div>
            </div>
        </div>
    {{/let}}
</template>
