{% extends "base.html" %}
{% block title %}Project {{ project_id }} - {{ project_name }} - 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">

    <!-- Bootstrap Datepicker CSS -->
    <link href="/static/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">

{% endblock %}
{% block body %}
{% include 'notifications.html' %}
            <div class="row" id="panels-row">
                <div class="col-lg-3">
                    <div class="panel panel-primary" id="panel-remaining">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12 text-right">
                                    <div class="huge" id="div-remaining-amount">{{ remaining|dollars }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <span class="pull-right">Remaining</span>
                            <div class="clearfix"></div>
                        </div>
                    </div> <!-- /panel -->
                </div> <!-- /col -->
                <div class="col-lg-3">
                    <div class="panel panel-info" id="panel-total">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12 text-right">
                                    <div class="huge" id="div-total-amount">{{ total|dollars }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <span class="pull-right">Total</span>
                            <div class="clearfix"></div>
                        </div>
                    </div> <!-- /panel -->
                </div> <!-- /col -->
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Notes</div>
                        <div class="panel-body" id="div-notes">{{ project_notes }}</div>
                    </div> <!-- /panel -->
                </div> <!-- /col -->
            </div>
            <!-- /.row -->
            <div class="row" id="content-row">
                <div class="col-lg-12">
                    <table id="table-items" class="table table-striped table-bordered table-hover" width="100%">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Quantity</th>
                            <th>Unit Cost</th>
                            <th>Line Cost</th>
                            <th>Notes</th>
                            <th>Active?</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Name</th>
                            <th>Quantity</th>
                            <th>Unit Cost</th>
                            <th>Line Cost</th>
                            <th>Notes</th>
                            <th>Active?</th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
{% include 'modal.html' %}
{% 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>

    <!-- BootStrap DatePicker JS -->
    <script src="/utils/datetest.js"></script>
    <script src="/static/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script>
var project_id = {{ project_id }};
</script>

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