<!doctype html> <html lang=“en”> <head>

<title>Statements</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap-theme.css"/>
<link rel="stylesheet" href="vendor/datepicker3.css"/>
<link rel="stylesheet" href="css/main.css"/>
<script src="q/accounts.js"></script>
<script src="vendor/jquery-2.1.3.js"></script>
<script src="vendor/underscore.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/bootstrap-datepicker.js"></script>
<script src="js/main.js"></script>

</head> <body> <div class=“container-fluid”>

<div class="row">
    <div class="col-sm-3 sidebar">
        <form>
            <div class="form-group">
                <label for="order">Order</label>
                <select id="order" name="order" class="form-control">
                    <option selected value="posted_at desc, document_line desc">Newest first</option>
                    <option value="posted_at asc, document_line desc">Oldest first</option>
                    <option value="description asc, posted_at asc, document_line asc">Alphabetical</option>
                    <option value="abs(amount) desc, description asc, posted_at asc, document_line asc">High value first</option>
                    <option value="abs(amount) asc, description asc, posted_at asc, document_line asc">Low value first</option>
                </select>
            </div>
            <div class="form-group">
                <label for="date-start">Period</label>
                <div class="input-daterange input-group" id="date-range">
                    <input type="text" class="input-sm form-control" name="date-start" id="date-start" placeholder="Start"/>
                    <span class="input-group-addon">to</span>
                    <input type="text" class="input-sm form-control" name="date-end" id="date-end" placeholder="Finish"/>
                </div>
            </div>
            <div class="form-group">
                <label for="text">Search</label>
                <input type="text"
                       class="form-control"
                       name="text"
                       id="text"
                       placeholder="Partial description"/>
            </div>
            <div class="form-group">
                <label>Type</label>
                <div id="type" class="btn-group btn-group-justified" role="group">
                    <a role="button" class="btn btn-default" data-type="credits">Credits</a>
                    <a role="button" class="btn btn-default active" data-type="both">Both</a>
                    <a role="button" class="btn btn-default" data-type="debits">Debits</a>
                </div>
            </div>
            <div class="form-group">
                <label>Colour</label>
                <div id="colour" class="btn-group btn-group-justified" role="group" data-toggle="buttons">
                    <a role="button" class="btn btn-default active colour-white"></a>
                    <a role="button" class="btn btn-default active colour-red"></a>
                    <a role="button" class="btn btn-default active colour-yellow"></a>
                    <a role="button" class="btn btn-default active colour-green"></a>
                    <a role="button" class="btn btn-default active colour-cyan"></a>
                    <a role="button" class="btn btn-default active colour-blue"></a>
                    <a role="button" class="btn btn-default active colour-magenta"></a>
                </div>
            </div>
            <div class="form-group">
                <label>Accounts</label>
                <div id="account-buttons"
                     class="btn-group-vertical btn-group-xs"
                     role="group"
                     style="width:100%"
                     data-toggle="buttons"></div>
                <script>populate_accounts('#account-buttons')</script>
            </div>
            <div>
                <div id="account-button-bulk" class="btn-group btn-group-justified" role="group">
                    <a role="button" class="btn btn-default" data-set="on">All</a>
                    <a role="button" class="btn btn-default" data-set="off">None</a>
                </div>
            </div>
        </form>
        <footer>
            <p>For my Anna ❤️</p>
        </footer>
    </div>
    <div id="content" class="col-sm-9 content">

    </div>
</div>

</div> </body> </html>