{% extends "base.html" %}
{% block title %}Projects / Bill of Materials - BiweeklyBudget{% endblock %}
{% block extra_head_css %}
    <!-- DataTables CSS -->
    <link href="/static/startbootstrap-sb-admin-2/vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="/static/startbootstrap-sb-admin-2/vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

{% endblock %}
{% block body %}
{% include 'notifications.html' %}
            <div class="row" id="toprow" style="padding-top: 0.5em;">
                <div class="col-lg-3">
                    <div class="panel panel-primary" id="panel-total-active">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12 text-right">
                                    <div class="huge" id="active-remaining-cost">{{ remain_active|dollars }}</div>
                                    <div>Remaining Cost - Active Projects</div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /panel -->
                </div>
                <!-- /.col-lg-3 -->
                <div class="col-lg-3">
                    <div class="panel panel-default" id="panel-remaining-active">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12 text-right">
                                    <div class="huge" id="active-total-cost">{{ total_active|dollars }}</div>
                                    <div>Total Cost - Active Projects</div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /panel -->
                </div>
                <!-- /.col-lg-3 -->
            </div>
            <!-- /.row -->
            <div class="row" id="content-row">
                <div class="col-lg-12">
                    <div class="panel panel-info">
                        <div class="panel-heading" style="margin-bottom: 1em;">Projects / Bill of Materials</div>
                        <table id="table-projects" class="table table-striped table-bordered table-hover" width="100%">
                            <thead>
                            <tr>
                                <th>Project</th>
                                <th>Total Cost</th>
                                <th>Remaining Cost</th>
                                <th>Active?</th>
                                <th>Notes</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Project</th>
                                <th>Total Cost</th>
                                <th>Remaining Cost</th>
                                <th>Active?</th>
                                <th>Notes</th>
                            </tr>
                            </tfoot>
                        </table>
                        <div class="row">
                            <div class="col-lg-12" id="add_project_frm_div">
                                <form role="form" id="add_project_frm">
                                    <input type="hidden" id="proj_frm_action" name="action" value="add">
                                    <label for="proj_frm_name">Name</label>
                                    <input class="form-control" id="proj_frm_name" name="name" type="text" size="20" style="display: inline-block; width: auto;">
                                    <label for="proj_frm_notes">Notes</label>
                                    <input class="form-control" id="proj_frm_notes" name="notes" type="text" size="40" style="display: inline-block; width: auto;">
                                    <button type="button" class="btn btn-primary" id="formSaveButton">Add Project</button>
                                </form>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
{% endblock %}
{% block extra_foot_script %}
    <!-- DataTables JavaScript -->
    <script src="/static/startbootstrap-sb-admin-2/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/static/startbootstrap-sb-admin-2/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="/static/startbootstrap-sb-admin-2/vendor/datatables-responsive/dataTables.responsive.js"></script>

<script src="/static/js/forms.js"></script>
<script src="/static/js/formBuilder.js"></script>
<script src="/static/js/projects.js"></script>
{% endblock %}
