<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Customer Insights</title>
  <!-- angular js-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- bootstrap css -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- bootstrap js -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- app logic (js) -->

  <script src="/scripts/index.js"></script>
  <!-- custom styles . -->
  <link rel="stylesheet" href="/styles/style.css">

  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>

<body ng-app="myApp">
  <div id="header" class="navbar-fixed-top navbar-header">
      <h1>Customer Insights
        <small>Delve Deeper</small>
      </h1>
      <p>
        User information, insights into demographics and "Safe to Spend" allowance
      </p>
  </div>

<div id="wrap">
  <div id="main" class="container" ng-controller="InfoController">
     <div class="row">
        <h2>Customer ID:</h2>

        <div id="custom-search-input">
          <form class="input-group col-md-12" id="id-input-form" ng-submit="find(customer.id)">
              <input type="number" class="search-query form-control" ng-model="customer.id" ng-minlength="0" ng-maxlength="100000" required name="id-input" placeholder="Enter a number between 1 and 10'000">
              <span class="input-group-btn">
                <button class="btn btn-primary" ng-click="find(customer.id)" ng-disabled="!customer.id">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </span>
          </form>
        </div>
      </div>

<div class="checkbox">
  <label><input type="checkbox" ng-model="showReq">Show Raw JSON Request</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="showRes">Show Raw JSON Response</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="hideProf">Hide User Profile</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="hideRent">Hide Rent Transactions</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="hideTrans">Hide Transactions</label>
</div>

<pre ng-show="showReq">JSON Request: <br>{{customer | json}}</pre>
<pre ng-show="showRes">JSON Response: {{ user | json }}</pre>

<!-- user panel -->
  <!-- <div>
    <p ng-class="{'text-lowercase':editMode}">Hello World</p>
  </div> -->

<div id="panel" class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" ng-show="id && !hideProf">
  <div class="panel" ng-class="{'panel-primary':status=='open', 'panel-danger':status=='closed', 'panel-warning':status=='unknown'}">
    <div class="panel-heading">
      <h3 class="panel-title">ID: {{ id }}</h3>
    </div>
    <div class="panel-body">
      <div class="row">
        <!--<div class="col-xs-10 col-sm-10 hidden-md hidden-lg"> <br>
          <dl>
            <dt>DEPARTMENT:</dt>
            <dd>Administrator</dd>
            <dt>HIRE DATE</dt>
            <dd>11/12/2013</dd>
            <dt>DATE OF BIRTH</dt>
               <dd>11/12/2013</dd>
            <dt>GENDER</dt>
            <dd>Male</dd>
          </dl>
        </div>-->
        <form class="col-md-9 col-lg-9" name="userForm">
          <table class="table table-user-information">
            <tbody>
              <tr>
                <td>Balance:</td>
                <td>{{ balance | currency:"€" }}</td>
              </tr>
              <tr>
                <td>Status:</td>
                <td>{{ status }}</td>
              </tr>
              <tr>
                <td>Income</td>
                <td>{{ income | currency:"€" }}</td>
              </tr>
              <tr>
                <td>Payday</td>
                <td>
                  <span ng-hide="editMode">{{ payday }}</span>
                  <input ng-show="editMode" type="text" ng-model="payday" autofocus min="1" max="31" required>
                </td>
              </tr>
                <td>Age</td>
                <td>{{ age }}</td>
              </tr>
              <tr>
                <td>Sex</td>
                <td>{{ sex }}</td>
              </tr>
                <td>County</td>
                <td>
                  <span ng-hide="editMode">{{ county }}</span>
                  <input ng-show="editMode" type="text" ng-model="county" autofocus ng-minlength="5" ng-maxlength="10" required>
                  <!-- <span ng-hide="county.editing" ng-dblclick="editItem(county)">{{ county }}</span> -->
                  <!-- <input ng-show="county.editing" ng-model="county.name" ng-blur="doneEditing(county)" autofocus /> -->
                </td>
              </tr>
            </tbody>
          </table>

          <a ng-hide="editMode" class="btn btn-primary" ng-click="deacUser(id)"> {{ btnActivate }} </a>
          <a ng-hide="editMode" class="btn btn-primary" ng-click="editUser()">Edit Account</a>

          <a ng-disabled="userForm.$invalid" ng-show="editMode" class="btn btn-primary" ng-click="userForm.$valid && saveEdits(id, payday, county)">Save</a>
          <a ng-show="editMode" class="btn btn-primary" ng-click="cancelEdits()">Cancel</a>
        </form>
      </div>
    </div>

  </div>
</div>

<!-- Rent/Mortgage  -->
<table class="table table-condensed table-striped table-hover" ng-show="id  && !hideRent">
<thead>
  <tr>
    <th align="center" colspan="5">
      <h2>Rent/Mortgage Transactions<commit_msg>Updated form to have min 4 chars for county edit<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Customer Insights</title>
  <!-- angular js-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- bootstrap css -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- bootstrap js -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- app logic (js) -->

  <script src="/scripts/index.js"></script>
  <!-- custom styles . -->
  <link rel="stylesheet" href="/styles/style.css">

  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>

<body ng-app="myApp">
  <div id="header" class="navbar-fixed-top navbar-header">
      <h1>Customer Insights
        <small>Delve Deeper</small>
      </h1>
      <p>
        User information, insights into demographics and "Safe to Spend" allowance
      </p>
  </div>

<div id="wrap">
  <div id="main" class="container" ng-controller="InfoController">
     <div class="row">
        <h2>Customer ID:</h2>

        <div id="custom-search-input">
          <form class="input-group col-md-12" id="id-input-form" ng-submit="find(customer.id)">
              <input type="number" class="search-query form-control" ng-model="customer.id" ng-minlength="0" ng-maxlength="100000" required name="id-input" placeholder="Enter a number between 1 and 10'000">
              <span class="input-group-btn">
                <button class="btn btn-primary" ng-click="find(customer.id)" ng-disabled="!customer.id">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </span>
          </form>
        </div>
      </div>

<div class="checkbox">
  <label><input type="checkbox" ng-model="showReq">Show Raw JSON Request</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="showRes">Show Raw JSON Response</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="hideProf">Hide User Profile</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="hideRent">Hide Rent Transactions</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" ng-model="hideTrans">Hide Transactions</label>
</div>

<pre ng-show="showReq">JSON Request: <br>{{customer | json}}</pre>
<pre ng-show="showRes">JSON Response: {{ user | json }}</pre>

<!-- user panel -->
  <!-- <div>
    <p ng-class="{'text-lowercase':editMode}">Hello World</p>
  </div> -->

<div id="panel" class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" ng-show="id && !hideProf">
  <div class="panel" ng-class="{'panel-primary':status=='open', 'panel-danger':status=='closed', 'panel-warning':status=='unknown'}">
    <div class="panel-heading">
      <h3 class="panel-title">ID: {{ id }}</h3>
    </div>
    <div class="panel-body">
      <div class="row">
        <!--<div class="col-xs-10 col-sm-10 hidden-md hidden-lg"> <br>
          <dl>
            <dt>DEPARTMENT:</dt>
            <dd>Administrator</dd>
            <dt>HIRE DATE</dt>
            <dd>11/12/2013</dd>
            <dt>DATE OF BIRTH</dt>
               <dd>11/12/2013</dd>
            <dt>GENDER</dt>
            <dd>Male</dd>
          </dl>
        </div>-->
        <form class="col-md-9 col-lg-9" name="userForm">
          <table class="table table-user-information">
            <tbody>
              <tr>
                <td>Balance:</td>
                <td>{{ balance | currency:"€" }}</td>
              </tr>
              <tr>
                <td>Status:</td>
                <td>{{ status }}</td>
              </tr>
              <tr>
                <td>Income</td>
                <td>{{ income | currency:"€" }}</td>
              </tr>
              <tr>
                <td>Payday</td>
                <td>
                  <span ng-hide="editMode">{{ payday }}</span>
                  <input ng-show="editMode" type="text" ng-model="payday" autofocus min="1" max="31" required>
                </td>
              </tr>
                <td>Age</td>
                <td>{{ age }}</td>
              </tr>
              <tr>
                <td>Sex</td>
                <td>{{ sex }}</td>
              </tr>
                <td>County</td>
                <td>
                  <span ng-hide="editMode">{{ county }}</span>
                  <input ng-show="editMode" type="text" ng-model="county" autofocus ng-minlength="4" ng-maxlength="10" required>
                  <!-- <span ng-hide="county.editing" ng-dblclick="editItem(county)">{{ county }}</span> -->
                  <!-- <input ng-show="county.editing" ng-model="county.name" ng-blur="doneEditing(county)" autofocus /> -->
                </td>
              </tr>
            </tbody>
          </table>

          <a ng-hide="editMode" class="btn btn-primary" ng-click="deacUser(id)"> {{ btnActivate }} </a>
          <a ng-hide="editMode" class="btn btn-primary" ng-click="editUser()">Edit Account</a>

          <a ng-disabled="userForm.$invalid" ng-show="editMode" class="btn btn-primary" ng-click="userForm.$valid && saveEdits(id, payday, county)">Save</a>
          <a ng-show="editMode" class="btn btn-primary" ng-click="cancelEdits()">Cancel</a>
        </form>
      </div>
    </div>

  </div>
</div>

<!-- Rent/Mortgage  -->
<table class="table table-condensed table-striped table-hover" ng-show="id  && !hideRent">
<thead>
  <tr>
    <th align="center" colspan="5">
      <h2>Rent/Mortgage Transactions
{'fraction_non_alphanumeric': 0.1985363753766681, 'fraction_numerical': 0.013000430477830392, 'mean_word_length': 2.2647554806070826, 'pattern_counts': {'":': 0, '<': 385, '<?xml version=': 0, '>': 385, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1601698', 'n_tokens_mistral': 3950, 'n_tokens_neox': 3725, 'n_words': 722}