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

{% block content %}
<div class="container py-5">
    <h1 class="fw-bold text-center mb-2" style="color: #0e2e63;">Our Projects</h1>
    <p class="text-center text-muted mb-4">Explore our work and success stories</p>

    <!-- Search -->
    <div class="row g-3 mb-4">
        <div class="col-md-6 mx-auto">
            <form method="get" class="d-flex">
                <input type="text" name="search" class="form-control" placeholder="Search projects..." value="{{ search }}" style="border-radius: 8px 0 0 8px;">
                <button type="submit" class="btn" style="background: #0e2e63; color: #fff; border-radius: 0 8px 8px 0;">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- Categories -->
    <div class="text-center mb-4">
        <a href="{% url 'projects_list' %}" class="badge bg-secondary text-decoration-none me-1">All</a>
        {% for category in categories %}
        <a href="?category={{ category.slug }}" class="badge bg-primary text-decoration-none me-1">{{ category.name }}</a>
        {% endfor %}
    </div>

    <!-- Projects Grid -->
    {% if projects %}
    <div class="row g-4">
        {% for project in projects %}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0" style="border-radius: 12px;">
                {% if project.cover_image %}
                <img src="{{ project.cover_image.url }}" class="card-img-top" alt="{{ project.title }}" style="height: 200px; object-fit: cover; border-radius: 12px 12px 0 0;">
                {% else %}
                <div style="height: 200px; background: #0e2e63; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px;">
                    <i class="fas fa-folder-open"></i>
                </div>
                {% endif %}
                <div class="card-body">
                    <span class="badge bg-primary mb-2">{{ project.category.name|default:"Project" }}</span>
                    <h5 class="card-title fw-bold">
                        <a href="{% url 'projects_detail' project.slug %}" class="text-decoration-none" style="color: #0e2e63;">
                            {{ project.title }}
                        </a>
                    </h5>
                    <p class="card-text text-muted">{{ project.description|truncatechars:100 }}</p>
                    <p class="text-muted small">
                        <i class="fas fa-user me-1"></i> {{ project.client_name }}
                    </p>
                    <a href="{% url 'projects_detail' project.slug %}" class="btn btn-sm" style="background: #0e2e63; color: #fff; border-radius: 6px;">
                        View Details <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if projects.has_other_pages %}
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            {% if projects.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ projects.previous_page_number }}">Previous</a></li>
            {% endif %}
            {% for num in projects.paginator.page_range %}
            <li class="page-item {% if projects.number == num %}active{% endif %}">
                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
            </li>
            {% endfor %}
            {% if projects.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ projects.next_page_number }}">Next</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    {% else %}
    <div class="text-center py-5">
        <i class="fas fa-folder-open fa-4x text-muted mb-3"></i>
        <h5 class="text-muted">No projects found</h5>
    </div>
    {% endif %}
</div>
{% endblock %}