<div class="row">
    <div class="col-md-5">
        <div class="panel panel-info" style="height:675px; overflow:auto;">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">{{user}}</h4>
            </div>
            <div class="clearfix"></div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6" style="border:1px solid #3a92ab; height:300px;">
                        <h4>Demographics</h4>
                        <p>Gender : N/A</p>
                        <div style="display:none">
                            <div class="progress progress-striped progress-sm active m-t-5">
                                <div class="progress-bar progress-bar-success" style="width: 80%">80%</div>
                            </div>
                            <p>High Income</p>
                            <div class="progress progress-striped progress-sm active m-t-5">
                                <div class="progress-bar progress-bar-success" style="width: 60%">60%</div>
                            </div>
                            <p>Age: 20-40</p>
                            <div class="progress progress-striped progress-sm active m-t-5">
                                <div class="progress-bar progress-bar-success" style="width: 30%">30%</div>
                            </div>
                            <p>Has Children</p>
                            <div class="progress progress-striped progress-sm active m-t-5">
                                <div class="progress-bar progress-bar-success" style="width: 50%">50%</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="border:1px solid #3a92ab; height:300px">
                        <h4>User Attributes</h4>
                        <table class="table table-striped" id="tblplatformdetails" style="font-size: 10px; font-weight: 600;">
                            <tbody>
                                <tr>
                                    <td style="padding:3px; font-size:14px;">
                                        <strong>Variable</strong>
                                    </td>
                                    <td style="padding:3px; font-size:14px;">
                                        <strong>Value</strong>
                                    </td>
                                </tr>
                                <tr ng-if="userAttributes" ng-repeat="attrs in userAttributes">
                                    <td style="padding:3px;">{{attrs.name}}</td>
                                    <td style="padding:3px;">{{attrs.value}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" id="comp_int">
                    <div class="col-md-6" style="border:1px solid #3a92ab; height:300px;">
                        <h4>Competing Apps</h4>
                        <ul class="fa-ul" ng-repeat="competingApp in userDetails.competingapps.apps">
                            <li>
                                <i class="fa-li fa fa-dot-circle-o"></i>
                                {{competingApp.name}}
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6" style="border:1px solid #3a92ab; height:300px;">
                        <h4>Interests</h4>
                            <div ng-repeat="interest in userDetails.Interests">
                                <p> <i class="fa fa-dot-circle-o"></i> {{ interest }}</p>
                            </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">
            <div class="panel panel-info" >
                <div class="panel-heading">
                    <h4 class="panel-title p-heading">Recent Activity</h4>
                </div>
                <div class="panel-body" style="min-height:290px;overflow:auto;">
                    <div>
                        <!-- begin timeline -->
                        <img id="activity_loader" style="width: 100px;
                        height: 85px;
                        margin-left: 30%;
                        position: absolute;
                        margin-top: 25%;
                        z-index: 1000;" src='../assets/img/global_loader.gif'>
                        <div id="recentActivity"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12"  ng-if="screenshotHistory != ''">
            <div class="panel panel-info" style="height:335px; overflow:auto;">
                <div class="panel-heading">
                    <h4 class="panel-title p-heading">Session History</h4>
                </div>
                <div>
                    <!-- Table -->
                    <div style="height:290px; overflow:auto;">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Screens</th>
                                    <th>Duration</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="screenshot in screenshotHistory track by $index">
                                    <td>
                                        <a href="javascript:;" ng-click="screenVideo($index)">{{screenshot.et}}</a>
                                    </td>
                                    <td>{{screenshot.mtd.length}}</td>
                                    <td>{{screenshot.duration}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Modal -->
                    <div class="modal modal-lg fade" id="screenPlayback" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="overflow:hidden">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h3>
                                        <i class="fa fa-film" aria-hidden="true"></i> Session Video</h3>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="well">
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <span id="user-id">#{{user}}</span>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <span id="version">App Version: {{userDetails.av}}</span>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div id="time-and-date">
                                                    <i class="fa fa-clock-o fa-2x" aria-hidden="true"></i>
                                                    <span class="upper-item">{{videoScreenData.duration}}</span>
                                                    <br>
                                                    <span class="bottom-item">{{videoScreenData.et}}</span>
                                                </div>
                                                <hr>
                                                <div id="device-information">
                                                    <i class="fa fa-android fa-2x" aria-hidden="true"></i>
                                                    <span class="upper-item">{{userDetails.d}}</span>
                                                    <span class="upper-item">{{userDetails.c}}</span>
                                                    <span class="upper-item">{{userDetails.av}}</span>
                                                    <br>
                                                    <span class="bottom-item">{{userDetails.p}} {{userDetails.pv}}</span>
                                                </div>
                                                <hr>
                                                <div id="location">
                                                    <i class="fa fa-map-marker fa-lg"></i>
                                                    <span id="city">{{userDetails.cty}}</span>
                                                </div>
                                            </div>
                                            <div id="timeline-section" class="well">
                                                <div class="panel-group d-accordion panel-group-timeline">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading" style="background-color:#3a92ab; color:#ffffff; font-size:18px; font-weight:bold;" data-toggle="collapse"
                                                            data-parent=".d-accordion" href="#aboutus">
                                                            <h4 class="panel-title">Timeline
                                                                <i class="fa fa-chevron-up pull-right"></i>
                                                            </h4>
                                                        </div>
                                                        <div id="aboutus" class="panel-collapse collapse in">
                                                            <div class="panel-body" style="height: 220px;overflow: auto;">
                                                                <table class="table timelineview">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">Action</th>
                                                                            <th scope="col">Time</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr class="timelinetbl" ng-if="videoScreenData.mtd"
                                                                            ng-repeat="meta in videoScreenData.mtd track by $index"
                                                                            data-ng-style="$index ==0 && {'background-color':'rgba(204, 204, 204, 0.32)'}"
                                                                            id="timeline-{{meta.diff}}" data-index="{{$index}}">
                                                                            <td scope="row">{{meta.et}}</td>
                                                                            <td>{{meta.du}}</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <!-- Google Pixel Device -->
                                            <div class="device device-google-pixel device-black">
                                                <div class="device-frame">
                                                    <!-- Device Screen Content -->

                                                    <div class="device-content">
                                                        <div id="overlay" class="video-overlay">
                                                            <div class="spinner">
                                                            </div>
                                                        </div>
                                                        <div id="mp4notsupport">
                                                            Hi! you are using old browser please update latest browser or this browser does not support this video format.
                                                        </div>
                                                        <div id="media-player">
                                                        </div>

                                                        <div style="position: absolute; bottom:0px;" ng-show="showKeyboard">
                                                            <img src="/appimages/Android-keyboard.png" style="width:100%;">
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Device other Features -->
                                                <div class="device-header"></div>
                                                <div class="device-sensors"></div>
                                                <div class="device-btns"></div>
                                                <div class="device-power"></div>
                                                <!-- Device other Features end here -->

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3" id="recency_monetry">
        <div class="panel-info" style="height:675px;">
            <div class="panel-body">
                <div class="background-block" style="border:1px thin #FF9800">
                    <div class="overlay-button" style="background-color:rgba(255, 152, 0, 0.85)">
                        <h2> Recency </h2>
                    </div>
                    <p ng-if="userDetails.ls" style="font-size: 13px;">Seen {{recency.Time}} ago
                    </p>
                    <p style="margin-top: 10px;font-size: 12px;">
                        <span ng-if="userDetails.lsd">
                            <strong>Duration {{recency.min}}
                                <sub>min</sub> {{recency.sec}}
                                <sub>sec</sub> </strong>
                        </span>
                    </p>
                </div>
                <div id="monetary-div"  class="background-block" style="border:1px thin #00FF2A">
                    <div class="overlay-button" style="background-color:rgba(0, 255, 42, 0.85);">
                        <h2> Monetary </h2>
                    </div>
                    <p>0</p>
                </div>
                <div class="background-block" style="border:1px thin #1CC1A2">
                    <div class="overlay-button" style="background-color:rgba(28, 193, 162, 0.85);">
                        <h2> Campaign Engagement </h2>
                    </div>
                    <p>{{engage}}</p>
                </div>
                <div id="cac-div" class="background-block" style="border:1px thin #4265A7">
                    <div class="overlay-button" style="background-color:rgba(66, 101, 167, 0.85);">
                        <h2> CAC / LTV </h2>
                    </div>
                    <p>0</p>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
 var d = new Date();
  var n = d.getTimezoneOffset();
</script>