{% extends 'rental_app/base_rental.html' %}
{% load static %}
{% block title %}Private Rental Listings{% endblock %}

{% block content %}
<section class="package-list-hero py-5">
    <div class="container text-center">
        <span class="section-mini-title">Private Access</span>
        <h1 class="fw-bold mb-3">Private Rental Listings</h1>
        <p class="lead text-muted">
            Approved private rental listings available only to confirmed foreigners with private access.
        </p>
    </div>
</section>

<section class="pb-5">
    <div class="container">
        <div class="row g-4">
            {% for listing in listings %}
            <div class="col-md-6 col-xl-3">
                <div class="package-card h-100 package-featured">
                    {% if listing.images.first %}
                        <img src="{{ listing.images.first.image.url }}" class="package-image" alt="{{ listing.title }}">
                    {% else %}
                        <div class="package-image package-image-placeholder d-flex align-items-center justify-content-center">
                            <i class="bi bi-house-lock-fill"></i>
                        </div>
                    {% endif %}

                    <div class="package-body">
                        <h4 class="fw-bold mb-2">{{ listing.title }}</h4>

                        <div class="package-price mb-2">
                            ${{ listing.monthly_rent_usd }}<span>/month</span>
                        </div>

                        {% if listing.short_description %}
                            <p class="text-muted">{{ listing.short_description|truncatechars:110 }}</p>
                        {% endif %}

                        <ul class="package-mini-list">
                            <li>
                                <i class="bi bi-geo-alt-fill"></i>
                                {{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}
                            </li>
                            {% if listing.property_type %}
                            <li>
                                <i class="bi bi-house-door-fill"></i>
                                {{ listing.get_property_type_display }}
                            </li>
                            {% endif %}
                            {% if listing.bedrooms %}
                            <li>
                                <i class="bi bi-door-open-fill"></i>
                                {{ listing.bedrooms }} bedroom{{ listing.bedrooms|pluralize }}
                            </li>
                            {% endif %}
                        </ul>

                        <div class="mt-4 d-grid">
                            <a href="{% url 'rental_app:rental_detail' listing.slug %}" class="btn btn-dark">
                                View Property
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="detail-card text-center">
                    <p class="mb-0">No private rentals available yet.</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}