<!DOCTYPE html>
<html lang="en">
  <!-- CSS stylesheets -->
    <link href="/stylesheets/style.css" rel="stylesheet"/>
    <link href="/stylesheets/bootstrap.css" rel="stylesheet">
<head>
    <meta charset="UTF-8">
    <title>VIR</title>
  </head>
  <body ng-app="VIRS">
    <div class="panel-group">
      <div class="panel">
        <div class="panel-body inner-background">
          
          <nav>
            <ul>
              <li><a class="active" href="#/home">Home</a></li>
              <li><a href="#/landing">Landing</a></li>
              <li><a href="#/k1">High Frequency</a></li>
              <li><a href="#/k2">Medium Frequency</a></li>
              <li><a href="#/offlist">Low Frequency</a></li>
              <li><a href="#/awl">Academic Word List</a></li>
              <li><a href="#/enhanced">Enhanced Text</a></li>
            </ul>
          </nav>
    
        <div style="margin-left:10%;padding:1px 16px;height:600px;">
          <div class="row">
            <div class="col-md-6 col-md-offset-3"> 
              <ui-view></ui-view>
            </div>
          </div>    
        </div>

      </div>
    </div>    
  </div>

  <!--Home Page State -->
    <script type="text/ng-template" id="/home.html">
        <div>
          <img src="/images/VIR_logo.jpg" alt="V.I.R. Logo" class="logo">
        </div>
        <div class="partner">
          <h4>
            <a href="#/landing"> <button type="submit" class="home-button">Proceed to Analyze</button></a>
          </h4>
        </div>
   
    </script>       

  <!--Landing Page State -->
     <script type="text/ng-template" id="/landing.html">
     
      <div class="panel-group">
        <div class="panel">
          <div class="panel-body">
            <div id= "header-text">
              <h1>Analyze Your Text</h1>
            </div>
          </div>
        </div>
      </div>
        
        <div class="panel-group">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>Type your text</h3>
                <input class="form-control" placeholder="Enter Text" ng-model="text"> </input>
                <button ng-click="processText()" class="btn btn-primary">Process Text</button>  
              </div>
            </div>
          </div>

        <table class="table>">
          <thead>
            <tr>
              <th>
                <div class="panel-group">
                  <div class="panel panel-default">
                    <div class="panel-body">
                      <h3> Insert Image File</h3>
                      <input src="/images/jpglogo.png" style="width:100px; height:100px;" type="image" value="file" ngf-select=""
                              accept="all/*" ngf-pattern=".jpg" ngf-max-height="2000" ngf-max-size="10MB">
                      </input>
                      <br><br>
                      File:
                      <div style="font:smaller">
                      </div> 
                      <button ng-click="" class="btn btn-primary">Process Text</button> 
                    </div>
                  </div>
                </div>
              <th>
              <th>
                <div class="panel-group">
                  <div class="panel panel-default">
                    <div class="panel-body">
                      <h3>Insert PDF File</h3>
                      <input src="/images/pdflogo.jpeg" style="width:100px; height:100px;" type="image" value="file" ngf-select="uploadFiles($file, $invalidFiles)"
                              accept="pdf/*" ngf-pattern=".pdf" ngf-max-height="2000" ngf-max-size="10MB">
                      </input>
                      <br><br>
                      File:
                      <div style="font:smaller">
                        {{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
                      </div>     
                      {{errorMsg}}
                      <button ng-click="processPDFText()" class="btn btn-primary">Process Text</button> 
                    </div>
                  </div>
                </div>
              </th>
            </tr>
          <thead>
        </table>
            
            <div id="data" class="panel-group">
              <div class="panel panel-default">
                
                  <table class="table ">
                    <thead>
                      <strong>
                          <th></th>
                          <th><h3>Number of words</h3></th>
                          <th><th>               
                      </strong>
                    </thead>
                    <tbody>
                      <tr>
                        <td><a href="#/k1"> <button type="submit" class="button">High frequency</button></a></td>
                        <td><h3>{{ amountHighFrequency }}</h3></td>
                        <td></td>
                      </tr>
                      <tr> 
                        <td><a href="#/k2"> <button type="submit" class="button">Medium Frequency</button></a></td>
                        <td><h3>{{ amountMedFrequency }}</h3></td>
                        <td></td>
                      </tr>
                      <tr> 
                        <td><a href="#/offlist"> <button type="submit" class="button">Low Frequency</button></a></td>
                        <td><h3>{{ amountLowFrequency }}</h3></td>
                        <td></td>
                      </tr>
                      <tr> 
                        <td><a href="#/awl"> <button type="submit" class="button">Academic Word List</button></a></td>
                        <td><h3>{{ amountAWLFrequency }}</h3></td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                
              </div>
            </div>
            <a href="#/enhanced"> <button type="submit" class="button">Proceed to Enhanced Text</button></a>
                 
        </script>
        
        <!--K1/High-Frequency Words page state-->
      <script type="text/ng-template" id="/k1.html">
       
        <div class="panel-group">
          <div class="panel">
            <div class="panel-body">
              <div id="header-text">
                <h1>High-Frequency Words</h1>
              </div>
            </div>
          </div>
        </div>

              <div class="panel-group">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <table class="table ">
                      <thead>
                        <strong>
                          <th>Word</th>
                          <th>Type</th>
                          <th>Definition</th>                                                         
                        </strong>
                      </thead>
                      <tbody>
                        <tr ng-repeat="word in words">
                          <td>{{ word.theword }}</td>
                          <td>{{ word.wordtype }}</td>
                          <td>{{ word.definition }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            
        </script>

        <!--K2/Medium-Frequency Words page state-->
        <script type="text/ng-template" id="/k2.html">
        <div class="panel-group">
          <div class="panel">
            <div class="panel-body">
              <div id="header-text">
                <h1>Medium-Frequency Words</h1>
               </div>
              </div>
            </div>
          </div>

              <div class="panel-group">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <table class="table ">
                      <thead>
                        <strong>
                          <th>Word</th>
                          <th>Type</th>
                          <th>Definition</th>                                                         
                        </strong>
                      </thead>
                      <tbody>
                        <tr ng-repeat="word in words">
                          <td>{{ word.theword }}</td>
                          <td>{{ word.wordtype }}</td>
                          <td>{{ word.definition }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
          
        </script>

        <!--Offlist/Low-Frequency Words page state-->
        <script type="text/ng-template" id="/offlist.html">
          
        <div class="panel-group">
          <div class="panel">
            <div class="panel-body">
              <div id="header-text">
                <h1>Low-Frequency Words</h1>
               </div>
              </div>
            </div>
          </div>
            
              <div class="panel-group">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <table class="table ">
                      <thead>
                        <strong>
                          <th>Word</th>
                          <th>Type</th>
                          <th>Definition</th>                                                         
                        </strong>
                      </thead>
                      <tbody>
                        <tr ng-repeat="word in words">
                          <td>{{ word.theword }}</td>
                          <td>{{ word.wordtype }}</td>
                          <td>{{ word.definition }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
          
        </script>

        <!--AWL Words page state-->
        <script type="text/ng-template" id="/awl.html">
        <div class="panel-group">
          <div class="panel">
            <div class="panel-body">
              <div id="header-text">
                <h1>Academic World List</h1>
               </div>
              </div>
            </div>
          </div>

              <div class="panel-group">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <table class="table ">
                      <thead>
                        <strong>
                          <th>Word</th>
                          <th>Type</th>
                          <th>Definition</th>                                                         
                        </strong>
                      </thead>
                      <tbody>
                        <tr ng-repeat="word in words">
                          <td>{{ word.theword }}</td>
                          <td>{{ word.wordtype }}</td>
                          <td>{{ word.definition }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
        
        </script>

        <!--Enhanced Text page state-->
        <script type="text/ng-template" id="/enhanced.html">
        <div class="panel-group">
          <div class="panel">
            <div class="panel-body">
              <div id="header-text">
                <h1>Enhanced Text</h1>
               </div>
              </div>
            </div>
          </div>
          <div class="panel-group">
            <div class="panel panel-default">
              <div class="panel-body">
                <table class="table ">
                  <thead>
                    <strong>
                      <th class="high"> High Frequency</th>
                      <th class="med"> Medium Frequency</th>        
                      <th class="low"> Low Frequency</th>   
                      <th class="awl"> AWL</th>                                                    
                    </strong>
                  </thead>
                </table>
                <p>
                  <span ng-repeat="text in texts">
                    <span ng-class="text.words.color"> {{ text.words.word }} </span>
                  </span>
                </p>
              </div>
            </div>
          </div>
        </script>
        
  </body>
    
    <!-- External libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
    
    <!-- Angular App -->
    <script src="/javascripts/angularApp.js"></script>
    
    <!-- Angular Controllers -->
    <script src="/javascripts/controllers.js"></script>
    
    <!-- Angular Routes -->
    <script src="/javascripts/routes.js"></script>

    <!-- Angular Services -->
    <script src="/javascripts/services.js"></script>

    <!-- ng-file-upload library for uploading file into the App -->
    <!-- Source: https://github.com/danialfarid/ng-file-upload -->
    <script src="/javascripts/ng-file-upload-shim.js"></script>
    <script src="/javascripts/ng-file-upload.js"></script>

    <!-- pdf.js library for scanning pdf files in the App -->
    <!-- Source: https://github.com/mozilla/pdf.js -->
    <script src="/javascripts/pdf.js"></script>
       

</html>