<div class="col-12" style="max-height: 600px; overflow-y: auto; overflow-x: hidden;" [ngClass]="{'col-6': errPropertiesVisible, 'col-12': !errPropertiesVisible}">
    <div *ngIf="stacktrace" ngClass="errProperties ? 'col-6' : 'col-12'">
        <div *ngFor="let stackElement of stacktrace; let i = index">
            <div *ngIf="i === 0">
                <p *ngFor="let msg of stackElement.text">{{msg}}</p>
            </div>

            <a class="col-6" style="cursor: pointer;" *ngIf="i === 0 && (!!stackElement.stackText || stackElement.text.length > 1)"
                (click)="toggleStackElement(stackElement)">{{(stackElement.visible ? 'Hide ' : 'View ')}}Stack-Trace</a>
            <a class="col-6" style="cursor: pointer;" *ngIf="i === 0 && errProperties" (click)="toggleErrorProperties()">{{errPropertiesVisible ? 'Hide ' : 'View '}}properties</a>
            <div *ngIf="stackElement.visible && stacktrace[i === 0 ? 0 : i-1].visible">
                <div *ngIf="i > 0">
                    <p *ngFor="let msg of stackElement.text">{{msg}}</p>
                </div>
                <p>{{stackElement.error}}</p>
                <textarea disabled class="form-control col-12" style="background-color: white; cursor: default; margin-top: 5px; min-height: 250px;">
                                            {{stackElement.stackText}}
                                        </textarea>
                <a style="cursor: pointer;" *ngIf="stacktrace[i+1]" (click)="toggleStackElement(stacktrace[i+1])">Caused by
                    <span class="caret"></span>
                </a>
            </div>
        </div>
    </div>
</div>
<div [hidden]="!errPropertiesVisible" class="col-6">
    <kendo-grid [data]="errProperties" [height]="400" class="col-12" style="padding-left: 0px; padding-right: 0px" scrollable="true">
        <kendo-grid-column field="Name"></kendo-grid-column>
        <kendo-grid-column field="Value"></kendo-grid-column>
    </kendo-grid>
    <!--
              <table *ngIf="errPropertiesVisible" class="table table-condensed table-striped">
                   <thead>
                       <tr>
                         <th>Property</th>
                         <th>Value</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr *ngFor="let property of errProperties">
                          <td>{{property.name}}</td>
                          <td>{{property.value}}</td>
                        </tr>
                  </tbody>
              </table>
              
              <a style="cursor: pointer" ngIf="sessionInfo" (click)="toggleSessionInfo()">Session Information <span class="caret"></span></a>
              <table class="table table-condensed table-striped" *ngIf="sessionInfoVisible">
                     <thead>
                       <tr>
                         <th>Property</th>
                         <th>Value</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr *ngFor="let sessionProp of sessionInfo">
                          <td>{{sessionProp.Name}}</td>
                          <td>{{sessionProp.Value}}</td>
                        </tr>
                  </tbody>
              </table>
              -->
</div>