
<!-- <link rel="import" href="../bower_components/core-scaffold/core-scaffold.html"> -->
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-menu/core-submenu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-selector/core-selector.html">

<link rel="import" href="../bower_components/paper-input/paper-input.html">

<link rel="import" href="model.html">

<polymer-element name="min-accounting">
    <template>
        <style>
            .accounts {
                width: 300px;
                /*height: 100%;*/
                background-color: #fffec5;
            }
            .header {
                background-color: green;
            }
            .content {
                background-color: yellow;
            }
            .menuItem {

            }
            #sidebar {
                background-color: #EEE;
            }
            #toolbar {
                color: #EEE;
                background-color: #1f2036;
            }
            #content {
                padding: 5px;
            }
            #txTable {
                border: 1px solid black;
                border-collapse: collapse;
            }
            #txTable th {
                font-weight: bold;
                border: 1px solid black;
            }
            #txTable td {
                border: 1px solid black;
                white-space: nowrap;
            }
            td.numeric {
                text-align: right;
            }
        </style>
        <!-- <polymer-localstorage id="dataStore" name="foobar" value="{{commands}}"></polymer-localstorage> -->
        <min-accounting-model id="model"></min-accounting-model>

        <!--<button on-click="{{printData}}">Print data</button>-->

<!--              
 --><!--             
 -->
                                    <!-- <core-pages selected="{{model.selectedPage}}"> -->
                                    <!-- <div> -->
            <!--  -->
<!--                                     <datalist id="searchOptions">
            <template repeat="{{account in model.accounts}}">
                <option>{{account.name}}</option>
            </template>
            </datalist>
 -->
<!--             <input type="text" list="searchOptions" value="{{model.txFilter}}">
                </div>
                <div>
                    foo
                </div>
            </core-pages>
 -->
<!--             
 -->

<core-drawer-panel>
    <core-header-panel drawer mode="waterfall" id="sidebar">
        <core-toolbar>min(accounting)</core-toolbar>
        <core-menu theme="core-light-theme" selected="{{model.selectedPage}}">
            <template repeat="{{page in model.pages}}">
                <!-- <template if="{{page.children}}"> -->
                    <core-submenu label="{{page.name}}" selected="{{model.selectedSubPage}}" on-click="{{subMenuClick}}">
                        <template repeat="{{child in page.children}}">
                            <core-item class="menuItem" label="{{child}}" on-click="{{menuItemClick}}">
                            </core-item>
                        </template>
                    </core-submenu>
                <!-- </template> -->
<!--                 <template if="{{!page.children}}">
                    <core-item class="menuItem" label="{{page.name}}" on-click="{{menuItemClick}}">
                    </core-item>
                </template>
 -->            </template>
        </core-menu> 
    </core-header-panel>
    <core-header-panel main mode="waterfall">
        <core-toolbar id="toolbar">
            <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
            <div flex>{{model.pages[model.selectedPage].name}}</div>
            <template if="{{model.selectedPage === 0}}">
            <paper-input label="Suche" on-change="{{search}}" value="{{model.searchString}}"></paper-input>
            <core-icon-button icon="search" on-click="{{search}}"></core-icon-button>
            </template>
        </core-toolbar>
        <div id="content">
            <core-pages selected="{{model.selectedPage}}">
                <section id="page1">
                    <table id="txTable">
                        <thead>
                            <tr>
                                <th>Datum</th>
                                <th>Von</th>
                                <th>Nach</th>
                                <th>?</th>
                                <th>Brutto</th>
                                <th>St.</th>
                                <th>Netto</th>
                                <th>UST</th>
                                <th>VOST</th>
                            </tr>
                        </thead>
                        <tbody>
                        <template repeat="{{tx in model.selectedTransactions}}">
                            <tr>
                                <td>{{tx.date | formatDate}}</td>
                                <td>{{tx.fromAccount.name}}</td>
                                <td>{{tx.toAccount.name}}</td>
                                <td>{{tx.type}}</td>
                                <td class="numeric">{{tx.brutto | toEuro}}</td>
                                <td class="numeric">{{tx.tax | toPercent}}</td>
                                <td class="numeric">{{tx.netto | toEuro}}</td>
                                <td class="numeric">{{tx.ust | toEuro}}</td>
                                <td class="numeric">{{tx.vost | toEuro}}</td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </section>
                <section id="page2">
                    {{model.pages[model.selectedPage].children[model.selectedSubPage]}}
                    <table id="txTable">
                        <thead>
                            <tr>
                                <th>Datum</th>
                                <th>Konto</th>
                                <th>Brutto</th>
                                <th>St.</th>
                                <th>Netto</th>
                                <th>UST</th>
                                <th>VOST</th>
                                <th>Saldo</th>
                            </tr>
                        </thead>
                        <tbody>
                        <template repeat="{{tx in model.selectedAccountTransactions}}">
                            <tr>
                                <td>{{tx.date | formatDate}}</td>
                                <td>{{tx.account.name}}</td>
                                <td class="numeric">{{tx.brutto | toEuro}}</td>
                                <td class="numeric">{{tx.tax | toPercent}}</td>
                                <td class="numeric">{{tx.netto | toEuro}}</td>
                                <td class="numeric">{{tx.ust | toEuro}}</td>
                                <td class="numeric">{{tx.vost | toEuro}}</td>
                                <td class="numeric">{{tx.saldo | toEuro}}</td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </section>
                <section id="page3">
                    Steuer:
                    <table class="reportTable">
                        <tbody>
                            <tr>
                                <td>Summe UST</td><td>{{model.total_ust | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Summe VOST</td><td>{{model.total_vost | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Steuerlast</td><td>{{model.total_tax | toEuro}}</td>
                            </tr>
                        </tbody>
                    </table>
                    Einnahmen/Ausgaben:
                    <table class="reportTable">
                        <thead>
                            <tr><th></th><th>Netto</th><th>Brutto</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Einnahmen 0%</td>
                                <td class="numeric">{{model.total_income_0 | toEuro}}</td>
                                <td class="numeric">{{model.total_income_0 | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Einnahmen 10%</td>
                                <td class="numeric">{{model.total_income_10 | toEuro}}</td>
                                <td class="numeric">{{model.total_income_10 * 1.1 | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Einnahmen 20%</td>
                                <td class="numeric">{{model.total_income_20 | toEuro}}</td>
                                <td class="numeric">{{model.total_income_20 * 1.2 | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Einnahmen gesamt</td>
                                <td class="numeric">{{model.total_income | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Ausgaben 0%</td>
                                <td class="numeric">{{model.total_expense_0 | toEuro}}</td>
                                <td class="numeric">{{model.total_expense_0 | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Ausgaben 10%</td>
                                <td class="numeric">{{model.total_expense_10 | toEuro}}</td>
                                <td class="numeric">{{model.total_expense_10 * 0.1| toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Ausgaben 20%</td>
                                <td class="numeric">{{model.total_expense_20 | toEuro}}</td>
                                <td class="numeric">{{model.total_expense_20 * 0.2 | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Ausgaben gesamt</td>
                                <td class="numeric">{{model.total_expense | toEuro}}</td>
                            </tr>
                            <tr>
                                <td>Erlös</td>
                                <td class="numeric">{{model.total_total | toEuro}}</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
            </core-pages>
        </div>
    </core-header-panel>
</core-drawer-panel>

<!--         <polymer-flex-layout></polymer-flex-layout>
        <div flex>
            <h1>Transactions</h1>
            <paper-tabs selected="{{model.selectedAccount}}">
              <paper-tab>TAB 1</paper-tab>
              <paper-tab>TAB 2</paper-tab>
              <paper-tab>TAB 3</paper-tab>
            </paper-tabs>
        </div>
        <div class="accounts">
            <core-menu selected="0">
                <template repeat="{{accountType in model.accountTypes}}">
                <core-submenu label="{{accountType}}">
                <template repeat="{{account in model.accounts[accountType]}}">
                  <core-item class="menuItem" label="{{account}}" on-click="{{menuItemClick}}">
                  </core-item>
                </template>
                </core-submenu>
                </template>
            </core-menu>
        </div>
 -->    </template>
    <script src="min-accounting.js"></script>
</polymer-element>