{% extends 'base.html' %}
{% load kunj_filters %}

{% block body %}

<div id="wrapper">
    {% include 'navbar.html' %}

    <div id="page-wrapper" class="gray-bg">
        {% include 'header.html' %}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10"><h2>All Projects</h2></div>
            <div class="col-lg-2"></div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-content">
                            <div style="overflow-x: auto;">
                                <table class="footable table-bordered table table-stripped w-100" data-page-size="15">
                                    <thead>
                                        <tr>
                                            <th>S No.</th>
                                            <th class="text-center">Project</th>
                                            <th class="text-center">Program Type</th>
                                            <th class="text-center">Location</th>
                                            <th class="text-center">Start Date</th>
                                            <th class="text-center">End Date</th>
                                            <th class="text-center">Beneficiaries</th>
                                            <th class="text-center">360&deg; View</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for project in projects %}
                                        <tr>
                                            <td>{{forloop.counter}}</td>
                                            <td class="text-center">{{project.project}}</td>
                                            <td class="text-center">{{project.program_type.program_type}}</td>
                                            <td class="text-center">{{project.location|default:"—"}}</td>
                                            <td class="text-center">{{project.start_date|ddmmyyyy|default:"—"}}</td>
                                            <td class="text-center">{{project.end_date|ddmmyyyy|default:"—"}}</td>
                                            <td class="text-center">{{project.beneficiary_count}}</td>
                                            <td class="text-center">
                                                <a href="/admin/program-department/project-detail/{{project.id}}" class="btn btn-w-s btn-primary">360&deg; View</a>
                                            </td>
                                        </tr>
                                        {% empty %}
                                            <tr><td colspan="8" class="text-center">No projects created yet.</td></tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% for message in messages %}
    <script>
        showNotification('{{message}}', '{{message.tags}}')
    </script>
{% endfor %}

{% endblock %}