{% load static %}
{% if projects %}
 <!-- Table 2: Projects -->
        <div class="panel h-full w-full">
            <div class="mb-5 text-lg font-bold">Projects Framework Table.
                <div class="mb-2 text-sm font-semibold">Projects Table.</div>
            </div>
                <div class="table-responsive" style="display: block; max-height: 360px; overflow-y: auto; overflow-x:auto;">
                    <table>
                        <thead>
                            <tr>
                                <th class="whitespace-nowrap ltr:rounded-l-md rtl:rounded-r-md">Project Title</th>
                                <th class="whitespace-nowrap">Results</th>
                                <th class="whitespace-nowrap">Activities</th>
                                <th class="whitespace-nowrap">Milestones</th>
                                <th class="whitespace-nowrap">Core Problems</th>
                                <th class="whitespace-nowrap">Solution Trees</th>
                                <th class="text-center ltr:rounded-r-md rtl:rounded-l-md">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for project in projects %}
                            <tr>
                                <td class="font-semibold whitespace-nowrap">{{ forloop.counter }}. {{ project.title }}</td>

                                <td class="whitespace-nowrap">
                                    {% if project.results.exists %}
                                        <ul>
                                            {% for result in project.results.all %}
                                                <li>✅ <a href="{{ result.get_absolute_url }}" class="badge whitespace-nowrap bg-primary">{{ forloop.counter }} Result for {{ project.title }}</a></li>
                                                <br/>
                                            {% endfor %}
                                        </ul>
                                    {% else %}
                                        <p>No results listed</p>
                                    {% endif %}
                                </td>

                                <td class="whitespace-nowrap">
                                    {% if project.activities.all %}
                                        <ul>
                                            {% for activity in project.activities.all %}
                                                <li>✅ <a href="{{ activity.get_absolute_url }}" class="badge whitespace-nowrap bg-secondary" >{{ forloop.counter }} {{ activity.name }}</a></li> 
                                            <br/>
                                            {% endfor %}
                                        </ul>
                                    {% else %}
                                        <p>No activities listed</p>
                                    {% endif %}
                                </td>

                                <td class="whitespace-nowrap">
                                    {% if project.milestones.exists %}
                                        <ul>
                                            {% for milestone in project.milestones.all %}
                                                <li>✅ <a href="{{ milestone.get_absolute_url }}" class="badge whitespace-nowrap bg-warning">{{ forloop.counter }} {{ milestone.name }}</a></li>
                                                <br/>
                                            {% endfor %}
                                        </ul>
                                    {% else %}
                                        <p>No milestones listed</p>
                                    {% endif %}
                                </td>

                                <td class="whitespace-nowrap">
                                    {% if project.solution_trees.all %}
                                        <ul>
                                            {% for solution_tree in project.solution_trees.all %}
                                                <li>✅ <a href="{{ solution_tree.get_absolute_url }}" class="badge whitespace-nowrap bg-danger">{{ forloop.counter }} Core Problem: "{{ solution_tree.core_problem.name }}"</a></li>
                                                <br/>
                                            {% endfor %}
                                        </ul>
                                    {% else %}
                                        <p>No core problems listed</p>
                                    {% endif %}
                                </td>

                                <td class="whitespace-nowrap">
                                    {% if project.solution_trees.all %}
                                        <ul>
                                            {% for solution_tree in project.solution_trees.all %}
                                                <li>✅ <a href="{{ solution_tree.get_absolute_url }}" class="badge whitespace-nowrap bg-success">{{ forloop.counter }} Solution to: "{{ solution_tree.core_problem.name }}"</a></li>
                                                <br/>
                                            {% endfor %}
                                        </ul>
                                    {% else %}
                                        <p>No solution trees listed</p>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge whitespace-nowrap badge-outline-success">
                                        <a href="{% url 'project_framework_pdf' project.slug %}" class="hover:text-info" x-tooltip="Project Framework" data-theme="info">Download Framework
                                        </a>
                                    </span >
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                    No projects found.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="mt-6 flex justify-between items-center">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Showing {{ projects.paginator.count }} results.
                        </p>
                    </div>
                    <div class="flex space-x-2">
                        {% if projects.has_previous %}
                            <a href="?project_page=1" class="btn btn-success">First</a>
                            <a href="?project_page={{ projects.previous_page_number }}" class="btn btn-secondary">Previous</a>
                        {% endif %}
                        {% if projects.has_next %}
                            <a href="?project_page={{ projects.next_page_number }}" class="btn btn-primary">Next</a>
                            <a href="?project_page={{ projects.paginator.num_pages }}" class="btn btn-info">Last</a>
                        {% endif %}
                    </div>
                </div>

        </div>
        <br/>
        {% endif %}
        <br/>