{% extends 'base.html' %}
{% load static %}
{% block title %}Our Projects | {{ site.site_name }}{% endblock %}
{% block meta_description %}Explore {{ site.site_name }} real estate projects — upcoming, ongoing and completed developments across Nigeria.{% endblock %}

{% block content %}
<div class="page-hero" style="background:linear-gradient(135deg,#071a60 0%,#0D2D96 60%,#1a4dd4 100%);">
    <div class="container">
        <h1>Our Projects</h1>
        <p>Premium real estate developments built for the future</p>
    </div>
</div>

<div class="breadcrumb-bar">
    <div class="container">
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="{% url 'core:home' %}">Home</a>
            <span>&rsaquo;</span>
            <span class="current">Projects</span>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">

        <!-- Status filter tabs -->
        <div class="project-filter-tabs" style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;">
            <a href="{% url 'projects:list' %}" class="project-tab {% if not active_status %}active{% endif %}">All Projects</a>
            {% for value, label in status_choices %}<a href="?status={{ value }}" class="project-tab {% if active_status == value %}active{% endif %}">{{ label }}</a>{% endfor %}
        </div>

        {% if projects %}
        <div class="projects-grid">
            {% for project in projects %}
            <article class="project-card">
                <a href="{% url 'projects:detail' project.slug %}" class="project-card-link">
                    <div class="project-card-image">
                        {% if project.cover_image %}<img src="{{ project.cover_image.url }}" alt="{{ project.title }}" loading="lazy">{% else %}<div class="project-card-no-img"><i class="fas fa-building"></i></div>{% endif %}
                        <span class="project-status-badge project-status-{{ project.status }}">{{ project.get_status_display }}</span>
                        {% if project.is_featured %}<span class="project-featured-badge"><i class="fas fa-star"></i> Featured</span>{% endif %}
                    </div>
                    <div class="project-card-body">
                        <h2 class="project-card-title">{{ project.title }}</h2>
                        <p class="project-card-location"><i class="fas fa-map-marker-alt"></i> {{ project.location }}</p>
                        <div class="project-card-specs">
                            {% if project.bedrooms_display %}<span><i class="fas fa-bed"></i> {{ project.bedrooms_display }}</span>{% endif %}
                            {% if project.price_display %}<span><i class="fas fa-tag"></i> {{ project.price_display }}</span>{% endif %}
                            {% if project.delivery_date %}<span><i class="far fa-calendar"></i> {{ project.delivery_date }}</span>{% endif %}
                        </div>
                        <div class="project-card-actions">
                            <span class="btn btn-primary btn-sm">View Details <i class="fas fa-arrow-right"></i></span>
                            {% if project.brochure %}<span class="btn btn-outline btn-sm"><i class="fas fa-download"></i> Brochure</span>{% endif %}
                        </div>
                    </div>
                </a>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div style="text-align:center;padding:80px 20px;">
            <i class="fas fa-building" style="font-size:4rem;color:var(--border);margin-bottom:20px;display:block;"></i>
            <h3 style="color:var(--text-muted);">No projects found</h3>
            <p style="color:var(--text-muted);">Check back soon for exciting new developments.</p>
            <a href="{% url 'projects:list' %}" class="btn btn-primary" style="margin-top:16px;">View All Projects</a>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_css %}
<style>
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.project-card { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--white); transition:var(--transition); }
.project-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.project-card-link { text-decoration:none; color:inherit; display:block; }
.project-card-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); }
.project-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover .project-card-image img { transform:scale(1.06); }
.project-card-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--border); }
.project-status-badge { position:absolute; top:14px; left:14px; padding:4px 12px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.project-status-upcoming { background:rgba(232,160,32,.9); color:#fff; }
.project-status-ongoing { background:rgba(13,45,150,.9); color:#fff; }
.project-status-completed { background:rgba(34,197,94,.9); color:#fff; }
.project-featured-badge { position:absolute; top:14px; right:14px; background:rgba(232,160,32,.95); color:#fff; padding:3px 10px; border-radius:16px; font-size:.7rem; font-weight:700; }
.project-card-body { padding:20px; }
.project-card-title { font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--dark); margin-bottom:6px; }
.project-card-location { color:var(--text-muted); font-size:.83rem; margin-bottom:12px; display:flex; align-items:center; gap:5px; }
.project-card-location i { color:var(--primary); }
.project-card-specs { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.project-card-specs span { font-size:.8rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.project-card-specs i { color:var(--primary); }
.project-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.project-tab { padding:8px 18px; border-radius:30px; font-size:.85rem; font-weight:600; border:2px solid var(--border); color:var(--text-muted); text-decoration:none; transition:var(--transition); }
.project-tab:hover, .project-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
</style>
{% endblock %}