{% extends "../base.html" %}
{% load crispy_forms_tags %}

{% block page_title %}Income Sources{% endblock page_title %}
{% block content %}
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
            <div class="x_title">
                <h2>Manage Sources</h2>
                <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".add-source-modal">
                    <i class="fa fa-plus"></i>
                    Add Income Source
                </button> 

                <!-- start Income Source list -->
                 {% if income_sources %}
                <table id="datatable-checkbox" class="table table-striped table-bordered bulk_action" style="width:100%">
                    <thead>
                      <tr>
                        <th>
                           <th><input type="checkbox" id="check-all" ></th>
                        </th>
                        <th style="width: 1%">#</th>
                        <th>Source Name</th>
                        <th>Description</th>
                        <th >Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for source in income_sources %}
                    <tr>
                        <td>
                            <th><input type="checkbox" id="check-all" ></th>
                         </td>
                        <td>{{forloop.counter}}</td>
                        <td>{{source.name}}</td>
                        <td>
                            {{source.description}}
                        </td>
                        <td>
                            <a href="{% url 'edit_income_source' source.id %}" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i> </a>
                            <a href="{% url 'delete_income_source' source.id %}" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to Delete this Record?')"><i class="fa fa-trash-o"></i></a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
                {% else %}
                    <div class="card">
                        <div class="card-body">
                            <h4><center>No Sources Available</center></h4>
                        </div>
                    </div>
                {% endif %}
                <!-- end class list -->
            </div>
            </div>
        </div>
    </div>

    <!-- Add source Modal -->
    <div class="modal fade add-source-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Add Source</h4>
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{% url 'add_income_source_page' %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{form|crispy}}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>

          </div>
        </div>
    </div>

{% endblock content%}