<div class="row row-overide">
    {{> info-boxes }}

</div>

<div class="row row-overide">

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="tabbable tabs-below">
                    <div class="tab-content">
                        <div class="tab-pane active" id="panel_one_tab1">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/browser">
                                <i class="fa fa-link fa-lg"></i><h2>Technology - Browser </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="pie-chart" data-type="browser" id="browser-graph"></div>
                        </div>
                        <div class="tab-pane " id="panel_one_tab2">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/operating-system">
                                <i class="fa fa-link fa-lg"></i><h2>Technology - Operating System </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="pie-chart" data-type="operating-system" id="operating-system-graph"></div>
                        </div>
                        <div class="tab-pane" id="panel_one_tab3">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/device-type">
                                <i class="fa fa-link fa-lg"></i><h2>Technology - Device Type </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="pie-chart" data-type="device-type" id="device-type-graph"></div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#panel_one_tab1" data-toggle="tab">Browser</a></li>
                <li><a href="#panel_one_tab2" data-toggle="tab">OS</a></li>
                <li><a href="#panel_one_tab3" data-toggle="tab">Device Type</a></li>
            </ul>
        </div>

    </div>

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <a class="in-link" href="{{url ""}}/webapps/{{appname}}/http-response-codes">
                    <i class="fa fa-link fa-lg"></i><h2>Top 5 HTTP Response codes</h2>
                </a>
                <div class="gadget-holder" data-gadget="bar-chart" data-type="top-http-status" id="top-http-status-graph"></div>
            </div>
        </div>

    </div>
</div>

<div class="row row-overide">
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="tabbable tabs-below">
                    <div class="tab-content">
                        <div class="tab-pane active" id="panel_two_tab1">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/location">
                                <i class="fa fa-link fa-lg"></i><h2>Geo - Location </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="location" data-type="country" id="location-map" ></div>
                        </div>
                        <div class="tab-pane" id="panel_two_tab2">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/language">
                                <i class="fa fa-link fa-lg"></i><h2>Top 5 Languages </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="bar-chart" data-type="language" id="language-graph" ></div>
                        </div>
                    </div>

                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#panel_two_tab1" data-toggle="tab">Location</a></li>
                <li><a href="#panel_two_tab2" data-toggle="tab">Top 5 Languages</a></li>
            </ul>
        </div>

    </div>

    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="tabbable tabs-below">
                    <div class="tab-content">
                        <div class="tab-pane active" id="one3_">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/context">
                                <i class="fa fa-link fa-lg"></i><h2>Context </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="data-table" data-type="context" id="context-table" style="height: 300px"></div>
                        </div>
                        <div class="tab-pane" id="two3_">
                            <a class="in-link" href="{{url ""}}/webapps/{{appname}}/referral">
                                <i class="fa fa-link fa-lg"></i><h2>Referrals </h2>
                            </a>
                            <div class="gadget-holder" data-gadget="data-table" data-type="referral" id="referral-table" style="height: 300px"></div>
                        </div>
                    </div>

                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#one3_" data-toggle="tab">Context</a></li>
                <li><a href="#two3_" data-toggle="tab">Referrals</a></li>
            </ul>
        </div>

    </div>
</div>


