<!--
    This file is part of Accountant.

    Accountant is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Foobar is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang="fr" ng-app="$strap">
  <head>
    <!-- Title -->
    <title>Entries</title>

    <!-- Bootstrap CSS -->
    <link href="third-party/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- Bootstrap datepicker plugin CSS -->
    <link href="third-party/datepicker/css/datepicker.css" rel="stylesheet" media="screen">

    <!-- NVD3 CSS -->
    <link href="third-party/nv.d3/nv.d3.css" rel="stylesheet" media="screen">
  </head>

  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <!-- Navbar with accounts and menu -->
          <div id="top-navbar" class="navbar navbar-fixed-top">
            <div class="navbar-inner" ng-controller="AccountController">
              <!-- Title -->
              <a class="brand" href="#">&nbsp;Accountant</a>

              <ul class="nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Comptes&nbsp;<span class="caret"></span></a>

                  <ul class="dropdown-menu">
                    <!-- Account list -->
                    <li class="dropdown-submenu" ng-repeat="account in accounts">
                      <a ng-class="accountClass(account)" ng-click="selectAccount(account)" href="#">{{account.name}}&nbsp;(<span ng-class="valueClass(account, account.current)">{{account.current}}</span>&nbsp;/&nbsp;<span ng-class="valueClass(account, account.pointed)">{{account.pointed}}</span>)</a>

                      <!-- Dropdown menu -->
                      <ul class="dropdown-menu">
                        <li><a href="#" ng-click="editAccount(account)" bs-modal="'templates/account_edit.html'">Modifier</a></li>
                        <li><a href="#" bs-modal="'templates/account_remove.html'">Supprimer</a></li>
                      </ul>
                    </li>

                    <li class="divider"></li>

                    <!-- New account button -->
                    <li>
                      <a bs-modal="'templates/account_new.html'" href="#">Ajouter un compte</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>

          <!-- Navbar with the months of the selected account -->
          <div class="navbar navbar-fixed-bottom">
            <div class="navbar-inner" ng-controller="MonthController">
              <ul ng-repeat="month in months" class="nav">
                <li ng-class="monthClass(month)"><a href="#" ng-click="selectMonth(month)">{{month.year}}-{{month.month}}</a></li>
              </ul>
            </div>
          </div>

          <!-- Emtpy row with top margin to avoid data under the fixed top navbar -->
          <div id="top-navbar-margin" class="row-fluid" style="margin-top: 46px"></div>

          <!-- Chart row -->
          <div class="row-fluid">
            <!-- Sold evolution chart placeholder -->
            <div class="span8">
              <div id="entries-chart-placeholder">
                <svg style='height:300px'/>
              </div>
            </div>

            <!-- Expense category piechart -->
            <div class="span4">
              <div id="expense-categories-chart-placeholder">
                <svg style='height:300px'/>
              </div>
            </div>
          </div>

          <!-- Message placeholder -->
          <div class="row-fluid">
            <div id="message-placeholder"></div>
          </div>

          <!-- Row with entry table -->
          <div class="row-fluid" ng-controller="EntryController">
            <table class="table table-striped table-condensed table-hover">
              <!-- Head of the table containing column headers and size -->
              <thead>
                <tr>
                  <th style="width: 100px">Date d'op.</th>
                  <th>Libell&eacute; de l'op&eacute;ration</th>
                  <th style="width: 50px">Montant</th>
                  <th style="width: 50px">Solde</th>
                  <th style="width: 100px">Cat&eacute;gorie</th>
                  <th style="width: 60px">Actions</th>
                </tr>
              </thead>

              <!-- Body of the table containing the entries -->
              <tbody>
                <tr id="entry_{{entry.id}}" class="form-inline" ng-class="entryRowClass(entry.sold)" ng-repeat="entry in entries">
                  <td>
                    <input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
                    <span ng-show="isDisplaying(entry)">{{entry.operation_date}}</span>
                  </td>
                  <td>
                    <input ng-show="isEditing(entry)" type="text" class="input-xxlarge" ng-model="entry.label"/>
                    <span ng-show="isDisplaying(entry)">{{entry.label}}</span>
                  </td>
                  <td>
                    <input ng-show="isEditing(entry)" type="text" class="input-mini" ng-model="entry.value"/>
                    <span ng-show="isDisplaying(entry)">{{entry.value}}</span>
                  </td>
                  <td ng-class="entryValueClass(entry.sold)">{{entry.sold}}</td>
                  <td>
                    <input ng-show="isEditing(entry)" type="text" class="input-small" ng-model="entry.category" bs-typeahead="categories"/>
                    <span ng-show="isDisplaying(entry)">{{entry.category}}</span>
                  </td>
                  <td>
                    <div class="btn-group" ng-show="isEditing(entry)">
                      <a class="btn btn-mini btn-success" ng-click="saveEntry(entry)" href="#entry_{{entry.id}}" title="Save"><i ng-class="iconSaveClass(entry)"><span style="display: none">Save</span></i></a>
                      <a class="btn btn-mini" ng-click="cancelEditEntry(entry)" href="#entry_{{entry.id}}" title="Cancel"><i ng-class="iconCancelClass(entry)"><span style="display: none">Cancel</span></i></a>
                      <a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#entry_{{entry.id}}" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
                    </div>
                    <div class="btn-group" ng-show="isDisplaying(entry)">
                      <a class="btn btn-mini" ng-click="editEntry(entry)" href="#entry_{{entry.id}}" title="edit"><i class="icon-edit"><span style="display: none">Edit</span></i></a>
                      <a class="btn btn-mini" bs-modal="'templates/entry_remove.html'" href="#entry_{{entry.id}}" title="remove"><i class="icon-trash"><span style="display: none">Remove</span></i></a>
                      <a class="btn btn-mini" ng-click="pointEntry(entry)" ng-class="pointedEntryClass(entry)" href="#entry_{{entry.id}}" title="point"><i class="icon-pencil"><span style="display: none">Point</span></i></a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- Emtpy row with bottom margin to avoid data under the fixed bottom navbar -->
          <div class="row-fluid" style="margin-bottom: 21px"></div>
        </div>
      </div>
    </div>

    <!-- JQuery Javascript library -->
    <script type="text/javascript" src="third-party/jquery/jquery.js"></script>

    <!-- Bootstrap Javascript library -->
    <script type="text/javascript" src="third-party/bootstrap/js/bootstrap.min.js"></script>
    <!-- Bootstrap datepicker module -->
    <script type="text/javascript" src="third-party/datepicker/js/bootstrap-datepicker.js"></script>

    <!-- Angular Javascript library -->
    <!--<script type="text/javascript" src="angular/angular.min.js"></script>-->
    <script type="text/javascript" src="third-party/angular/angular.min.js"></script>
    <script type="text/javascript" src="third-party/angular/angular-strap.min.js"></script>

    <!-- D3 Plotting framework -->
    <script type="text/javascript" src="third-party/d3/d3.js"></script>

    <!-- NVD3 framework -->
    <script type="text/javascript" src="third-party/nv.d3/nv.d3.js"></script>

    <!-- Custom Javascript library for entries -->
    <script type="text/javascript" src="js/months.js"></script>
    <script type="text/javascript" src="js/accounts.js"></script>
    <script type="text/javascript" src="js/entries.js"></script>
  </body>
</html>

