<div class="ui vertical stripe  segment">
    <div class="ui segment basic container">
        <h2>Transaction History</h2>
    </div>
    <div class="ui container">
        <div class="ui top attached tabular menu">
            {{#each accountList }}
                <a class="item {{#if selected }}active{{/if}}" data-tab="{{ alias }}">{{ name }}</a>
            {{/each }}
        </div>
        {{#each accountList }}
            <div class="ui bottom attached tab segment {{#if selected }}active{{/if}}" data-tab="{{ alias }}">
                <a class="ui button" href="/clerk/transaction/{{ alias }}"><i class="icon plus"></i> Add</a>
                <table class="ui celled table striped">
                    <thead>
                        <tr>
                            <!-- <th>State</th> -->
                            <th>Edit</th>
                            <!-- <th>Sort</th> -->
                            <!--<th>Date</th> -->
                            <th>Clear Date</th>
                            <th>Source</th>
                            <th>Notes</th>
                            <th>Credit</th>
                            <th>Debit</th>
                            <th>Balance</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each history }}
                        <tr>
                            <!-- <td>
                                {{ _info }}
                            </td> -->
                            <td id={{ _key }}>
                                <div class="ui buttons">
                                    <a class="ui icon button" href="/clerk/transaction/{{ _key }}/edit"><i class="icon edit"></i></a>
                                    <a class="ui icon button" href="/clerk/transaction/{{ _key }}/move?adjust=-1"><i class="icon down chevron"></i></a>
                                    <a class="ui icon button" href="/clerk/transaction/{{ _key }}/move?adjust=1"><i class="icon up chevron"></i></a>
                                </div>
                            </td>
                            <!-- <td>{{ sortOrder }}</td> -->
                            <!--<td>{{ date }}</td> -->
                            <td>{{ clearDate }}</td>
                            <td>
                                <!-- {{#if sortOrder}}{{ sortOrder }}: {{/if }} -->
                                <!-- {{ sortOrder }} -->
                                {{ source }}
                            </td>
                            <td>
                                {{#if sortOrder }}
                                    {{ sortOrder }}
                                    {{#if note }} - {{/if }}
                                {{/if }}
                                <!-- {{#if sortOrder }}{{ sortOrder }} - {{ else }}0: {{/if }} -->
                                {{ note }}

                                <!-- {{#if sortOrder }}
                                <span class="ui label">sort order: {{ sortOrder }}</span>
                                {{/if }} -->
                                <!-- <span>
                                {{#each tagList }}
                                <span class="ui label">{{ this }}</span>
                                {{/each }}
                                </span> -->
                            </td>
                            <td class="right aligned {{#if credit}}positive{{/if }}">{{ credit }}</td>
                            <td class="right aligned {{#if debit}}negative{{/if }}">{{ debit }}</td>
                            <td class="right aligned {{ balanceWarning }}">{{ balance }}</td>
                        </tr>
                        {{/each }}
                    </tbody>
                    <tfoot>
                    </tfoot>
                </table>
            </div>
        {{/each }}
    </div>
</div>

<script>
$(document).ready (function () {
    // elmnt.scrollIntoView();
    // location.reload();
    // function scrollToAnchor(aid){
    //     var aTag = $("a[name='"+ aid +"']");
    //     $('html,body').animate({scrollTop: aTag.offset().top},'slow');
    // }
    // scrollToAnchor('2141');

    // function scroll_to_anchor(anchor_id){
    //     var tag = $("#"+anchor_id+"");
    //     $('html,body').animate({scrollTop: tag.offset().top},'slow');
    // }
    // scroll_to_anchor (window.location.hash)
    // scroll_to_anchor ('2141')
});

</script>
