<!--***************************************************************************
    *   Copyright (C) 2008 by S. MANKOWSKI / G. DE BURE support@mankowski.fr  *
    *                                                                         *
    *   This program is free software; you can redistribute it and/or modify  *
    *   it under the terms of the GNU General Public License as published by  *
    *   the Free Software Foundation; either version 2 of the License, or     *
    *   (at your option) any later version.                                   *
    *                                                                         *
    *   This program 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 General Public License for more details.                          *
    *                                                                         *
    *   You should have received a copy of the GNU General Public License     *
    *   along with this program.  If not, see <http://www.gnu.org/licenses/>  *
    ***************************************************************************-->
  <!--
    Know Skrooge tags:
      document: the document object
	All SKGDocument properties.
	By using filters, you can search in tables and get attributes
	  Example:
	    <h2>List account (for TEST)</h2>      
	    <table class="table">
	      <tr class="tabletitle">
		<th align="center">{{ document|display:"t_name" }}</th>
		<th align="center">{{ document|display:"f_CURRENTAMOUNT" }}</th>
	      </tr>
	      {% for item in document|table:"v_account_display,t_close='N' ORDER BY t_name" %}
		<tr>
		  <td>{{ item|att:"t_name" }}</td>
		  <td align="right">{{ item|att:"f_CURRENTAMOUNT"|money|safe }}</td>
		</tr>      
	      {% empty %}
	      No account
	      {% endfor %} 
	      </table>       
	
      report: the report object  
        previous: The report object of the previous period
	period: The current period
	previous_period: The previous period
	budget_table: The budget table
	unit_table: The unit table
	bank_table: The bank table	
	bank_table: The bank table	
	scheduled_operations: The scheduled operations
	categories_period: The main categories of the period
	categories_previous_period: The main categories of the previous period
	categories_variations: The main categories variations
	advice: The current advice
	networth: The net worth
	annual_spending: The annual spending
	personal_finance_score: The personal finance score
	personal_finance_score_details: The personal finance score + (success, warning or danger) + advice string
	colors:
	color_negativetext
	color_positivetext
	color_neutraltext
	color_normaltext
	color_inactivetext
	color_activetext
	color_linktext
	color_visitedtext
	white	
	color_activebackground
	
	font_family
	
	Skrooge logo:
	logo
	logo_black
	
	Messages:
	title_main
	title_budget
	title_main_categories
	title_variations
	title_account
	title_unit
	title_advice
	title_portfolio
	title_highlighted
	title_networth
	title_annual_spending
	title_personal_finance_score
	
	msg_no_variation
	msg_no_scheduled
	msg_no_highlighted
	msg_no_budget
	msg_no_share
	msg_amount_unit_date
	
	About:
	about_welcome
	about_programname
	about_version
	about_bugaddress
	about_copyrightstatement
	about_homepage
	about_forumpage
	about_newspage
	about_operationpage
	about_accountpage
	about_shortdescription
	about_othertext
	about_maintext
	
    Know Skrooge filters:
      dump: To dump all objects
	Examples:
	  report|dump|safe
	  document|table:"v_account_display"|dump|safe
      table: To get objects of a table or a view
	Examples:
	  document|table:"v_account_display"
	  document|table:"v_account_display,t_close='N' ORDER BY t_name"
      att: To get value of an attribute of an object
      display: To title associate to an attribute
	Examples:
	  document|display:"f_CURRENTAMOUNT_EXPENSE"  
      percent: To format a value in pourcent
      money: To format a value in money format (you have to use |safe)
	Examples:
	  item|att:"f_CURRENTAMOUNT"|money|safe
	  item|att:"f_CURRENTAMOUNT"|money:"1"|safe
	  item|att:"f_CURRENTAMOUNT"|money:"2"|safe
      encode: To encode an URL
	Examples:      
	  <a href="skg://Skrooge_operation_plugin/?account={{ item.1|encode }}">{{ item.1 }}</a>
  -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <style>
    body {padding-top: 70px; padding-bottom: 70px; }
    td {white-space: nowrap;}
    @media print {a[href]:after {content: "" !important;}} 
    meter {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
  
        width: 200px;
        height: 30px;
    }
    meter::-webkit-meter-bar {
        background: #EEE;
        box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
        border-radius: 3px;
    }

    meter::-webkit-meter-optimum-value {
        background: #86CC00; /* Green */
        border-radius: 3px;
    }

    meter::-webkit-meter-suboptimum-value {
        background: #FFDB1A; /* Yellow */
        border-radius: 3px;
    }

    meter::-webkit-meter-even-less-good-value {
        background: #CC4600; /* Red */
        border-radius: 3px;
    }    
    </style>
  </head>
  <body>
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
        <h1>{{ title_main }}</h1>
        </div>
      </div>
    </div>  

    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
      <div class="container">
    <small>Date: {{ current_date }}</small><br/>
    <small>File name: {{ document.fileName }}</small><br/> 
    <small>* {{ msg_amount_unit_date }}</small>    
      </div>
    </div>  
  </div>
  
<div class="container">  
    <h2>{{ title_personal_finance_score }}</h2>
    <span class="btn btn-{{ report.personal_finance_score_details.level }} btn-lg">{{ report.personal_finance_score_details.value|floatformat }}
        <span class="badge">
        {{ title_annual_spending }} / {{ title_networth }}</br>
        {{ report.annual_spending|money|safe }} / {{ report.networth|money|safe }}
        </span>
    </span>  
    <p>{{ report.personal_finance_score_details.message }}</p>
    
    <h2>{{ document|display:"f_CURRENTAMOUNT_INCOME" }} &amp; {{ document|display:"f_CURRENTAMOUNT_EXPENSE" }} *</h2>
    {% include "default/income_vs_expenditure_table.html" %}
    <img src="http://chart.apis.google.com/chart?cht=bvs&chxs=0,{{ color_normaltext }}|1,{{ color_normaltext }}&chbh=100&chxt=x,y&chxr=1,0,{{ report.income_vs_expenditure.4.3 }}&chf=bg,s,{{ white }}&chco={{ color_negativetext }}|{{ color_positivetext }}&chd=t:{{ report.income_vs_expenditure.2.3 }},{{ report.income_vs_expenditure.1.3 }}&chds=0,{{ report.income_vs_expenditure.4.3 }}&chs=300x200&chl={{ document|display:"f_CURRENTAMOUNT_EXPENSE" }}|{{ document|display:"f_CURRENTAMOUNT_INCOME" }}&chts={{ color_normaltext }}&chtt={{ document|display:"f_CURRENTAMOUNT_EXPENSE" }} vs {{ document|display:"f_CURRENTAMOUNT_INCOME" }}|{{ report.period }}"/>
    
    <h2>{{ title_budget }}</h2>
    {% include "default/budget_table.html" %}
            
    <h2>{{ title_main_categories }}</h2>
    <table>
      <tr>
	<td align="center">
	  {% include "default/categories_previous_period_table.html" %}

	  <img src="http://chart.apis.google.com/chart?cht=p3&chf=bg,s,{{ white }}&chco={{ color_negativetext }}&chd=t:{{ report.categories_previous_period.1.2 }},{{ report.categories_previous_period.2.2 }},{{ report.categories_previous_period.3.2 }},{{ report.categories_previous_period.4.2 }},{{ report.categories_previous_period.5.2 }}&chs=300x100&chl=1|2|3|4|5&chds=0,400000000" />
	</td>
	<td align="center">
	  {% include "default/categories_period_table.html" %}
	
	  <img src="http://chart.apis.google.com/chart?cht=p3&chf=bg,s,{{ white }}&chco={{ color_negativetext }}&chd=t:{{ report.categories_period.1.2 }},{{ report.categories_period.2.2 }},{{ report.categories_period.3.2 }},{{ report.categories_period.4.2 }},{{ report.categories_period.5.2 }}&chs=300x100&chl=1|2|3|4|5&chds=0,400000000" />	  
	</tr>
    </table>
    <h2>{{ title_variations }}</h2>
     {% include "default/categories_variations.html" %}
    
    <h2>{{ title_account }} *</h2>
     {% include "default/bank_table.html" %}
     <br/>
     {% include "default/account_table.html" %}
     
    <h2>{{ title_unit }} *</h2>
     {% include "default/unit_table.html" %}      
     
    <h2>{{ title_portfolio }} *</h2>
     {% include "default/portfolio.html" %}  
     {% if report.portfolio|length %}
     <img src="http://chart.apis.google.com/chart?cht=p3&chf=bg,s,{{ white }}&chco={{ color_negativetext }}&chd=t:{% for item in report.portfolio %}{% if forloop.first %}{% else %}{% if forloop.last %}{{ item.5 }}{% else %}{{ item.5 }},{% endif %}{% endif %}{% endfor %}&chs=300x100&chl={% for item in report.portfolio %}{% if forloop.first %}{% else %}{% if forloop.last %}{{ item.0 }}{% else %}{{ item.0 }}|{% endif %}{% endif %}{% endfor %}&chds=0,400000000" />	  
     {% endif %}
    <h2>{{ title_highlighted }}</h2>
    {% include "default/highlighted_operations.html" %}     
</div>

<script language="javascript">
    var item = document.getElementById("table_unit");
    item.className= "table table-bordered table-striped table-condensed";
    
    var item = document.getElementById("table_portfolio");
    item.className= "table table-bordered table-striped table-condensed";
    
    var item = document.getElementById("table_income_vs_expenditure");
    item.className= "table table-bordered table-striped table-condensed";
    
    var item = document.getElementById("table_categories_previous_period");
    item.className= "table table-bordered table-striped table-condensed";
    
    var item = document.getElementById("table_categories_period");
    item.className= "table table-bordered table-striped table-condensed";

    var item = document.getElementById("table_budget");
    item.className= "table table-bordered table-striped table-condensed";

    var item = document.getElementById("table_bank");
    item.className= "table table-bordered table-striped table-condensed";    
    
    var item = document.getElementById("table_account");
    item.className= "table table-bordered table-striped table-condensed";       
</script> 
  </body>
</html>
