
<div id="tools" class="container">

	<div id="accordion">
		<div class="card">
			<div class="card-header" id="headingTwo">
				<h5 class="mb-0">
					<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					Date/Time</button>
				</h5>
			</div>
			<div id="collapseTwo" aria-labelledby="headingTwo"	data-parent="#accordion">
				<div class="card-body">
					<form class="form-inline">
					  <div class="form-group">
						<p>Selected time lines span from 
							<a [routerLink]="" (click)="useMinDate()">{{mindate | date:'yyyy-MM-dd'}}</a>
							to 
							<a [routerLink]="" (click)="useMaxDate()">{{maxdate | date:'yyyy-MM-dd'}}</a>
						</p>
				      </div>
            </form>
            
					<form class="form-inline">
					  <div class="form-group">
					    <label for="lfromdate">Load from:</label>
					    <div class="input-group">
					      <input id="lfromdate" class="form-control" placeholder="yyyy-mm-dd"
					             name="lfromdate" [(ngModel)]="loadfromdate" ngbDatepicker #ldf="ngbDatepicker"
					             (ngModelChange)="loadSpan()">
					      <div class="input-group-append">
					        <button class="btn btn-outline-secondary" (click)="ldf.toggle()" type="button">
					          <img src="assets/img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
					        </button>
					      </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="ltodate">To:</label>
					    <div class="input-group">
					      <input id="ltodate" class="form-control" placeholder="yyyy-mm-dd"
					             name="ltodate" [(ngModel)]="loadtodate" ngbDatepicker #ldt="ngbDatepicker"
					             (ngModelChange)="updateSpan()">
					      <div class="input-group-append">
					        <button class="btn btn-outline-secondary" (click)="ldt.toggle()" type="button">
					          <img src="assets/img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
					        </button>
					      </div>
					    </div>
					  </div>
          </form>

					<form class="form-inline">
					  <div class="form-group">
					    <label for="fromdate">Show from:</label>
					    <div class="input-group">
					      <input id="fromdate" class="form-control" placeholder="yyyy-mm-dd"
					             name="fromdate" [(ngModel)]="fromdate" ngbDatepicker #df="ngbDatepicker"
					             (ngModelChange)="updateSpan()">
					      <div class="input-group-append">
					        <button class="btn btn-outline-secondary" (click)="df.toggle()" type="button">
					          <img src="assets/img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
					        </button>
					      </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="todate">To:</label>
					    <div class="input-group">
					      <input id="todate" class="form-control" placeholder="yyyy-mm-dd"
					             name="todate" [(ngModel)]="todate" ngbDatepicker #dt="ngbDatepicker"
					             (ngModelChange)="updateSpan()">
					      <div class="input-group-append">
					        <button class="btn btn-outline-secondary" (click)="dt.toggle()" type="button">
					          <img src="assets/img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
					        </button>
					      </div>
					    </div>
					  </div>
          </form>
          
				</div>
			</div>
		</div>
		<div class="card">
			<div class="card-header" id="headingOne">
				<h5 class="mb-0">
					<button class="btn btn-link" data-toggle="collapse"	data-target="#collapseOne" aria-expanded="true"	aria-controls="collapseOne">
					Time lines</button>
				</h5>
			</div>
			<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
				<div class="card-body">
					<form>
						<div class="form-check form-check-inline" *ngFor="let t of timelines; let i = index">
							<input class="form-check-input" type="checkbox"
								name="{{t.sourceId}}" id="{{t.sourceId}}" [checked]="t.selected"
								(change)="t.selected = !t.selected; changeSelection(t, t.selected);">
							<label class="form-check-label" for="{{t.sourceId}}">{{t.label}}</label>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="card-header" id="headingThree">
				<h5 class="mb-0">
					<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					Resources</button>
					<span *ngIf="filteredResources.length > 0">
						<code>{{filteredResources[0]}}</code>
						<button class="btn" (click)="clearFilteredResources()">clear</button>
					</span>
				</h5>
			</div>
			<div id="collapseThree" class="collapse" aria-labelledby="headingThree"	data-parent="#accordion">
				<div class="card-body">
					Cosik
				</div>
			</div>
		</div>
	</div>

</div>



<div id="visualization"></div>

<div id="details">
  <!--<div class="event" *ngIf="selectedEvent !== null">
    <time>{{selectedEvent.timestamp.toLocaleString()}}</time> {{selectedEvent.label}}
  </div>
  <app-obj [uri]="c.uri" *ngFor="let c of eventObjects"></app-obj>-->

  <app-event [event]="selectedEvent" [eventObjects]="eventObjects" *ngIf="selectedEvent !== null"></app-event>

</div>
