<!DOCTYPE html>
<html>
<head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link data-load-minified rel="stylesheet" type="text/css" href="/assets/css/zooAll.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    
    <!-- Data Table -->
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.3/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.3/css/dx.light.css" />
    
    <!-- Material Design Lite -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link data-load-minified rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <link data-load-minified rel="stylesheet" type="text/css" href="/assets/css/popup.css">
    
    <script data-load-concat type="text/javascript" src="/assets/vendors/jquery.min.js"></script>
    <script data-load-concat type="text/javascript" src="/assets/vendors/angular.min.js"></script>
    <script data-load-concat type="text/javascript" src="/assets/vendors/dx.all.js"></script>
    
    <script data-load-concat type="text/javascript" src="/assets/vendors/semantic.min.js"></script>
    <script data-load-concat type="text/javascript" src="/assets/vendors/lockr.min.js"></script>
    <script data-load-concat type="text/javascript" src="/assets/vendors/material.min.js"></script>
    <script data-load-concat type="text/javascript" src="/assets/vendors/lodash.min.js"></script>
    
    <script data-load-obfuscate defer type="text/javascript" src="/libs/ChromeBox.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/libs/FoxCommon.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/libs/Snackbar.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/libs/MaterialDesignLite.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/libs/Auth.js"></script>
    
    <script data-load-obfuscate defer type="text/javascript" src="/controllers/localModel.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/controllers/Tabs.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/controllers/welcomeController.js"></script>
    <script data-load-obfuscate defer type="text/javascript" src="/config/app.js"></script>
    
    <script data-load-minify defer type="text/javascript" src="/controllers/index.js"></script>
    
    <style>
        .dx-scrollable-scroll-content{
            background-color: #bfbfbf !important;
        }
        .dx-state-invisible{
            display: block !important;
        }
        .dx-scrollable-scroll{
            height: 15px !important;
        }
        .dx-scrollable-scrollbar{
            height: 15px !important;
        }
        
    </style>
    
</head>

<body ng-app="popupApp" claass="ng-hide hide" ng-cloak>
    
    <div ng-controller="indexController">
        
        <!-- Don't move login from here -->
        <!-- <div class="bg-white w-100 h-100" ng-if="local.activeTab=='login'" style="position: fixed;height: 100vh!important;width: 100%;z-index: 8;" ng-include="'login.html'"></div> -->
        
        <div class="ui p-3 pb-0 mb-0 fluid rounded-0 border-0 borderless" ng-include="'navbar.html'"></div>
        
        <!-- <div class="p-3">
            <ng-include ng-if="local.activeTab=='home'" src="'home.html'"></ng-include>
            <ng-include ng-if="local.activeTab=='about'" src="'about.html'"></ng-include>
            <ng-include ng-if="local.activeTab=='settings'" src="'settings.html'"></ng-include>
            <ng-include ng-if="local.activeTab=='notifications'" src="'notifications.html'"></ng-include>
        </div>  -->
        
        <div class="row p-3 w-100">
            
            
            
            <div class="col-2">
                <div class="ui segment green raised w-100">
                    <p> <i ng-class="local.status ? 'ui icon spinner green loading': 'ui icon green circle' "></i><b>"{{local.activeKeyword}} in {{local.activeLocation}}"</b></p>
                    <div class="field">
                        <label for="">Progress ({{percentComplete().completed+"/"+percentComplete().total}})</label>
                        <div class="progress rounded-0">
                            <div class="progress-bar bg-green" ng-style="{width:percentComplete().percent+'%', transition: 'width 4s ease-in-out'}"></div>
                        </div>
                    </div>
                    
                </div>
                <div class="ui segment raised rounded-0">
                    <form class="ui large form">
                        <div class="field">
                            <label>Email Blacklist ({{local.blackList.length}})</label>
                            <textarea cols="30" rows="2" ng-model="local.blackListTextarea" ng-change="saveAsList()" placeholder="Email to blacklist">{{local.blackListTextarea}}</textarea>
                        </div>
                        <div class="field">
                            <label>Keywords ({{local.keywordList.length}})</label>
                            <textarea ng-model="local.keywordTextarea" ng-change="saveAsList()" cols="30" rows="8" placeholder="Keywords"></textarea>
                        </div>
                        <div class="field">
                            <label>Locations ({{local.locationList.length}})</label>
                            <textarea ng-model="local.locationTextarea" ng-change="saveAsList()" cols="30" rows="8" placeholder="Locations"></textarea>
                        </div>
                    </form>
                </div>
                
            </div>
            
            <div class="col-10">
                
                <div class="ui segment p-3">    
                    
                    <button ng-class="local.status ?'ui button rounded-0 float-right d-inline bg-red text-white' :'ui button rounded-0 float-right d-inline bg-green text-white' "
                    ng-disabled="!local.taskList.length || local.isScrapingEmail" 
                    ng-click="sendMessage(local.status ? 'stop' : 'start'); local.status = !local.status; saveLocal();">
                    {{local.status ? 'Stop' : 'Start'}} Extracting
                </button>
                <button class="ui button rounded-0 float-right d-inline basic text-white"
                ng-disabled="local.status || local.isScrapingEmail || !local.collect.length"
                ng-click="download()">Download</button>
                <button ng-class="local.isScrapingEmail ? 'ui button rounded-0 float-right d-inline basic red text-white' : 'ui button rounded-0 float-right d-inline basic text-white'" 
                ng-disabled="local.status || !local.collect.length" 
                ng-click="scrapeEmails();local.isScrapingEmail=true;">
                <i class="ui icon spinner loading" ng-if="local.isScrapingEmail"></i>
                {{local.isScrapingEmail ? "Stop Scraping Emails" : "Scrape Emails"}} {{emailFiltered() ? '- '+emailFiltered()  : ''}}
            </button>
            <button class="ui button rounded-0 float-right d-inline basic text-white" ng-disabled="local.status || local.isScrapingEmail" ng-click="local.collect=[]; saveLocal(); refreshTable();">Clear Data</button>
            
            
            <!-- Stats -->
            <div class="ui statistics mini d-inline p-0 m-0">
                <div class="mini statistic m-0 px-3">
                    <div class="value">{{local.collect.length}}</div>
                    <div class="label" style="font-size: 12px;">RESULTS FOUND</div>
                </div>
                <!-- <div class="mini statistic m-0 px-3">
                    <div class="value">{{countOf('keyword')}}</div>
                    <div class="label" style="font-size: 12px;">Keywords</div>
                </div>
                <div class="mini statistic m-0 px-3">
                    <div class="value">{{countOf('location')}}</div>
                    <div class="label" style="font-size: 12px;">Locations</div>
                </div> -->
                <div class="mini statistic m-0 px-3">
                    <div class="value">{{countOf('website')}}</div>
                    <div class="label" style="font-size: 12px;">Websites</div>
                </div>
                
            </div>
            <!-- Stats -->    
        </div>
        
        <!-- Results -->
        <!-- <div class="" style="overflow-x: scroll;">
            <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp w-100">
                <thead>
                    <tr class="font-weight-bold">
                        <th class="text-left text-truncate" width="40px">Id</th>
                        <th class="text-left text-truncate" ng-repeat="(key,each) in getKeys()">{{each}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="(key,each) in local.collect track by $index | limitTo:200">
                        <td class="text-left text-truncate">{{key+1}}</td>
                        <td class="text-left text-truncate" ng-repeat="eachKey in getKeys()">{{each[eachKey]}}</td>
                    </tbody>
                </table>
            </div> -->
            <!-- Results -->
            
            <!-- Data Table Results -->
            <!-- <div class="dx-viewport">
                <div id="orders" dx-data-grid="dataGridOptions" style="width: 100%"></div>
            </div> -->
            <div id="gridContainer"></div>
            <!-- Data Table Results -->
            
        </div>
        
    </div>
    
    
    <!-- Login Modal -->
    <div class="{{ local.showLoginModal ? 'ui modal visible active raised border-0' : 'ui modal' }}" style="margin: auto; height: 500px;">
        <div class="header w-100 font-weight-normal">
            <i class="close icon float-right mt-2 link" ng-click="local.showLoginModal=false; saveLocal()"></i>
            Your are currently using a Demo Version with a limit of 50 records and you can't export records to file.
        </div>  
        
        <div class="content">
            <p class="text-center mt-5"><i class="ui icon gift huge blue"></i></p>
            <h5 class="display-5 text-center">Enter License key to unlock all features</h5>
            <div class="row">
                <div class="col-3"></div>
                <div class="col-6">
                    <form class="ui form mx-4" name="testone">
                        <div class="field">
                            <!-- <label>Enter License Key</label> -->
                            <input type="text" ng-model="licenseKey" placeholder="XXXXX-XXXXX-XXXXX-XXXXX-XXXXX" pattern="^(\w{5}\-\w{5}\-\w{5}\-\w{5}\-\w{5})$" required ng-disabled="isCheckingLicense">
                        </div>
                        <div class="field">
                            <div class="row">
                                <div class="col-4"></div>
                                <div class="col-4">
                                    <button class="ui button blue rounded-0 text-center" ng-disabled="!testone.$valid" ng-click="login()"><i ng-if="isCheckingLicense" class="ui icon spinner loading"></i>Submit</button>
                                </div>
                                <div class="col-4"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-3"></div>
            </div>
            
        </div>
    </div>
    <!-- Login Modal -->
    
    
    <!-- Snack Bar -->
    <div ng-class="(snackbar.isShown) ? 'mdl-js-snackbar mdl-snackbar mdl-snackbar--active' : 'mdl-js-snackbar mdl-snackbar'" style="z-index: 10;">
        <div class="mdl-snackbar__text">{{snackbar.text}}</div>
        <button class="mdl-snackbar__action" type="button">Cool</button>
    </div>
    <!-- Snack Bar -->
    
</div>

</body>
</html>