<div class="jumbotron py-4">
    <div class="lead">
        Reminder
    </div>
    <hr class="my-4">
    <div class="row">
        <div *ngIf="noCriteria()" class="col-12 font-weight-bold">
            No criteria selected
        </div>
        <div *ngIf="!noCriteria()" class="col-auto">
            <dl class="row mb-2 mb-lg-0">
                <dt class="col-auto">
                    Criteria <span class="badge badge-secondary">{{ criteriaList.length }}</span>
                </dt>
                <div class="w-100 d-block d-sm-none"></div>
                <dd class="col mb-0">
                    <span *ngIf="coneSearch !== null" class="mb-0">
                        Cone search:
                        <ul class="pl-4 list-unstyled">
                            <li>RA = {{ coneSearch.ra }}°</li>
                            <li>DEC = {{ coneSearch.dec }}°</li>
                            <li>radius = {{ coneSearch.radius }}</li>
                        </ul>
                    </span>
                    <ng-container *ngIf="criteriaList.length > 0">
                        <p *ngFor="let criterion of criteriaList" class="mb-0">
                            {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
                        </p>
                    </ng-container>
                </dd>
            </dl>
        </div>
        <div class="col">
            <span class="font-weight-bold">Output list</span>
            <tabset>
                <tab *ngFor="let family of outputFamilyList" [heading]="family.label">
                    {{ family.label }}
                </tab>
            </tabset>
        </div>
    </div>
</div>