{% extends "base.html" %}

{% block title %}Job List{% endblock %}

{% block content %}
<div class="container">
    <h2 class="my-4">Jobs</h2>

    <!-- Search Form -->
    <form method="GET" class="mb-3">
        <div class="input-group">
            <input type="text" name="q" placeholder="Search projects..." value="{{ query }}" class="form-control w-50 d-inline">
            <button type="submit" class="btn btn-primary">Search</button>
            <a href="{% url 'project_list' %}" class="btn btn-secondary">Reset</a>
        </div>
    </form>

    <!-- Add Job Button -->
    <a href="{% url 'add_project' %}" class="btn btn-success mb-3">Add New Job</a>
    <!-- Job Table -->
    <table class="table table-striped table-bordered">
        <thead class="table-dark">
            <tr>
                <th>#</th>
                <th>Job Title</th>
                <th>Job Description</th>
                <th>Remarks</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for project in page_obj %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ project.project_title }}</td>
                <td>{{ project.project_description }}</td>
                <td>{{ project.remarks }}</td>
                <td>
                    {% if project.end_date %}
                        <span class="badge bg-success">Completed</span>
                    {% else %}
                        <span class="badge bg-warning text-dark">In Progress</span>
                    {% endif %}
                </td>
                <td>
                    {% if project.end_date %}
                        <a href="{% url 'edit_project' project.id %}" class="btn btn-sm btn-primary">View</a>
                        <a href="{% url 'project_dashboard' project.id %}" class="btn btn-sm btn-secondary">Dashboard</a>
                        <!-- <button class="btn btn-sm btn-secondary" disabled>Delete</button> -->
                    {% else %}
                        <a href="{% url 'edit_project' project.id %}" class="btn btn-sm btn-primary">View / Edit</a>
                        <a href="{% url 'delete_project' project.id %}" class="btn btn-sm btn-danger">Delete</a>
                        <a href="{% url 'project_dashboard' project.id %}" class="btn btn-sm btn-secondary">Dashboard</a>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="text-center">No projects found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination -->
    <nav>
        <ul class="pagination">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if query %}&q={{ query }}{% endif %}">&laquo; First</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if query %}&q={{ query }}{% endif %}">Previous</a>
            </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if query %}&q={{ query }}{% endif %}">Next</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if query %}&q={{ query }}{% endif %}">Last &raquo;</a>
            </li>
            {% endif %}
        </ul>
    </nav>

    
</div>
{% endblock %}