<html ng-app="BNPChrome" ng-csp="">

<head>
    <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/jquery.resizableColumns.css">
    <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/style.css">

    <link rel="stylesheet" type="text/css" href="assets/stylesheets/panel.css">

    <link href="vendor/assets/stylesheets/jsoneditor.css" rel="stylesheet" type="text/css">

    <script src="vendor/assets/javascripts/jsoneditor.js"></script>

    <script src="vendor/assets/javascripts/jquery-2.2.4.min.js"></script>
    <script src="vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="vendor/assets/javascripts/keymaster.min.js"></script>
    <script src="vendor/assets/javascripts/angular.min.js"></script>
    <script src="vendor/assets/javascripts/jquery.resizableColumns.min.js"></script>
    <script src="vendor/assets/javascripts/prettydiff.min.js"></script>
    <script src="vendor/assets/javascripts/rawinflate.js"></script>

    <script src="vendor/assets/javascripts/FileSaver.min.js"></script>
</head>

<body ng-controller='PanelController' ng-init="init()" ng-cloak>

    <section class="wrapper">
        <section class="request">
            <div class="search">
                <input ng-model="search" type="text" placeholder='Add search term then ENTER' title='prefix with "-" to remove from search results' on-search="customSearch()" />
                <div class="filtering">
                    <span class="label">Filtering for:</span>
                    <span ng-repeat="term in searchTerms">
                        <span title="Click to remove"
                            class="searchterm"
                            ng-class="{ neg: term[0] == '-'}"
                            ng-click="removeSearchTerm($index)">{{term}}</span>
                        <span class="operator" ng-hide="$last" ng-click="toggleSearchType()">{{ andFilter && 'and' || 'or' }}</span>
                    </span>
                </div>
                <div class="recent-searches">
                    <span class="label">Recent searches:</span>
                    <span ng-repeat="term in oldSearchTerms"
                          title="Click to Search, right click to permanently remove from history"
                          class="recents"
                          ng-class="{ neg: term[0] == '-'}"
                          ng-click="addSearchTerm($index)"
                          ng-right-click="deleteSearchTerm($index)">{{term}}</span>
                </div>
            </div>
            <div class="requests">
                <table class="header styled" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
                    <thead>
                        <tr>
                            <th class='request'>
                                Path
                            </th>
                            <th class='apextype'>
                                Apex Type
                            </th>
                            <th class='apexmethod'>
                                Apex Method
                            </th>
                            <th class='method'>
                                Method
                            </th>
                            <th class='status'>
                                Status
                            </th>
                            <th class='time'>
                                Time
                            </th>
                            <th class='datetime'>
                                Started
                            </th>
                        </tr>
                    </thead>
                </table>
                <div class="data-container">
                    <table id="requests" class="styled" resizable-columns data-resizable-columns-sync="#requests-header">
                        <tr class="sizing">
                            <td class='request'></td>
                            <td class='apextype'></td>
                            <td class='apexmethod'></td>
                            <td class='method'></td>
                            <td class='status'></td>
                            <td class='time'></td>
                            <td class='datetime'></td>
                        </tr>
                        <tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'" scroll-to-new
                            ng-click="!request.separator && setActive(request.id)" ng-class="getClass(request.id, request.separator)">
                            <!-- scroll-to-new -->
                            <td class='request' title="{{request.request_url || titleIfSeparator(request.separator) }}">{{request.request_url}}</td>
                            <td class='apextype' title="{{request.request_apex_type || titleIfSeparator(request.separator) }}">{{request.request_apex_type}}</td>
                            <td class='apexmethod' title="{{request.request_apex_method || titleIfSeparator(request.separator) }}">{{request.request_apex_method}}</td>
                            <td class='method' title="{{request.request_method || titleIfSeparator(request.separator) }}">{{request.request_method}}</td>
                            <td class='status' title="{{request.response_status || titleIfSeparator(request.separator) }}">{{request.response_status}}</td>
                            <td class='time' title="{{request.time || titleIfSeparator(request.separator) }}">{{ request.time / 1000 | number : 2 }} s</td>
                            <td class='datetime' title="{{request.startedDateTime || titleIfSeparator(request.separator) }}">{{ request.startedDateTime | date: "mediumTime" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </section>

        <section class="response">
            <div id="tabs" class="tabbed-pane">
                <div class="tabbed-pane-header">
                    <div class="tabbed-pane-header-contents">
                        <ul class="tabbed-pane-header-tabs">
                            <li class="tabbed-pane-header-tab">
                                <a href="#tab-response" class="tabbed-pane-header-tab-title"
                                    ng-click="selectDetailTab('tab-response')">
                                    <span ng-show="showOriginal">Raw</span>
                                    <span ng-hide="showOriginal">Formatted</span>
                                    Response</a>
                            </li>
                            <li class="tabbed-pane-header-tab">
                                <a href="#tab-request" class="tabbed-pane-header-tab-title"
                                    ng-click="selectDetailTab('tab-request')">
                                    <span ng-show="showOriginal">Raw</span>
                                    <span ng-hide="showOriginal">Formatted</span>
                                    Request</a>
                            </li>
                            <li class="tabbed-pane-header-tab">
                                <a href="#tab-request-stats" class="tabbed-pane-header-tab-title"
                                    ng-click="selectDetailTab('tab-request-stats')">Request</a>
                            </li>
                            <li class="tabbed-pane-header-tab">
                                <a href="#tab-response-stats" class="tabbed-pane-header-tab-title"
                                    ng-click="selectDetailTab('tab-response-stats')">Response</a>
                            </li>
                            <li class="tabbed-pane-header-tab">
                                <a href="#tab-settings" class="tabbed-pane-header-tab-title"
                                    ng-click="selectDetailTab('tab-settings')">Panel Settings</a>
                            </li>
                        </ul>
                    </div>

                    <div class="toolbar"></div>

                </div>

                <div class="tabbed-pane-content data-grid data-grid-details">

                    <div id="tab-request-stats">
                        <table id="postData" class="styled" ng-show="activePostData.length" title="Click to open Request preview tab">
                            <thead>
                                <tr>
                                    <th colspan="2">Request POST Data</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activePostData" ng-click="selectDetailTab('tab-request', true)">
                                    <td class="key">{{param.name}}</td>
                                    <td>
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table id="request-data" class="styled" ng-show="activeRequest.length">
                            <thead>
                                <tr>
                                    <th colspan="2">Request Data</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activeRequest">
                                    <td class="key">{{param.name}}</td>
                                    <td class="value">
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table id="headers" class="styled" ng-show="activeHeaders.length">
                            <thead>
                                <tr>
                                    <th colspan="2">Request Headers</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activeHeaders">
                                    <td class="key">{{param.name}}</td>
                                    <td class="value">
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table id="request-cookies" class="styled" ng-show="activeResponseCookies.length">
                            <thead>
                                <tr>
                                    <th colspan="2">Request Cookies</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activeCookies">
                                    <td class="key">{{param.name}}</td>
                                    <td>
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div id="tab-response-stats">
                        <table id="response-data" class="styled" ng-show="activeResponseData.length">
                            <thead>
                                <tr>
                                    <th colspan="2">Response Data</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activeResponseData">
                                    <td class="key">{{param.name}}</td>
                                    <td class="value">
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table id="response-headers" class="styled" ng-show="activeResponseHeaders.length">
                            <thead>
                                <tr>
                                    <th colspan="2">Response Headers</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activeResponseHeaders">
                                    <td class="key">{{param.name}}</td>
                                    <td class="value">
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table id="response-cookies" class="styled" ng-show="activeResponseCookies.length">
                            <thead>
                                <tr>
                                    <th colspan="2">Response Cookies</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="param in activeResponseCookies">
                                    <td class="key">{{param.name}}</td>
                                    <td>
                                        <pretty-print data="param.value" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div id="tab-response">
                        <div id="response-jsoneditor"></div>
                    </div>

                    <div id="tab-request">
                        <div id="request-jsoneditor"></div>
                    </div>

                    <div id="tab-settings">
                        <h3>Settings</h3>
                        <div class="form-group">
                            <label for="scroll-to-new">Auto Scroll Network Log</label>
                            <input type="checkbox" name="scroll-to-new" id="scroll-to-new" ng-model="scrollToNew">
                        </div>
                        <div class="form-group">
                            <label for="clear-on-refresh">Clear Network Log on Page Refresh</label>
                            <input type="checkbox" name="clear-on-refresh" id="clear-on-refresh" ng-model="clearOnRefresh">
                        </div>
                        <div class="form-group">
                            <label for="auto-json-parse-depth-response">Auto JSON Parse Depth (Response)</label>
                            <input type="number" name="auto-json-parse-depth-response" id="auto-json-parse-depth-response" ng-model="autoJSONParseDepthRes">
                        </div>
                        <div class="form-group" title="Not implemented yet">
                            <label for="auto-json-parse-depth-request">Auto JSON Parse Depth (Request)</label>
                            <input type="number" name="auto-json-parse-depth-request" id="auto-json-parse-depth-request" ng-model="autoJSONParseDepthReq">
                        </div>
                        <h3>More Coming Soon...</h3>
                    </div>


                    <script src="assets/javascripts/app.js"></script>
                    <script src="assets/javascripts/panel.js"></script>
                    <script src="assets/javascripts/toolbar.js"></script>

                </div>
            </div>
        </section>
    </section>
</body>

</html>