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

{% block title %}My Saved Properties | {{ site.site_name }}{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Saved Properties</h1>
            <p>You have {{ properties.count }} saved propert{{ properties.count|pluralize:'y,ies' }}</p>
        </div>
    </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>
            <a href="{% url 'properties:list' %}">Properties</a>
            <span>&rsaquo;</span>
            <span class="current">Saved</span>
        </nav>
    </div>
</div>

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

        {% if properties %}
        <div class="properties-grid">
            {% for prop in properties %}
            <article class="property-card card fade-up" id="prop-card-{{ prop.id }}">
                <a href="{% url 'properties:detail' prop.slug %}" aria-label="{{ prop.title }}">
                    <div class="card-image">
                        {% with img=prop.get_primary_image %}
                        {% if img %}
                        <img src="{{ img.image.url }}" alt="{{ prop.title }}" loading="lazy">
                        {% else %}
                        <div class="card-img-placeholder"><i class="fas fa-image"></i></div>
                        {% endif %}
                        {% endwith %}
                        <div class="card-badges">
                            <span class="badge badge-{{ prop.listing_type|cut:'for_' }}">{{ prop.get_listing_type_display }}</span>
                            <span class="badge badge-{{ prop.status }}">{{ prop.get_status_display }}</span>
                        </div>
                        <div class="card-price">{{ prop.formatted_price }}</div>
                        <button type="button" onclick="event.preventDefault(); toggleFavoriteList({{ prop.id }}, this)" 
                            style="position: absolute; top: 10px; right: 10px; background: white; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10;">
                            <i class="fa{% if prop.id in favorites %}s{% else %}r{% endif %} fa-heart" style="color: {% if prop.id in favorites %}red{% else %}#555{% endif %}; font-size: 1.1rem;"></i>
                        </button>
                    </div>
                </a>
                <div class="card-body">
                    <h2 class="card-title">
                        <a href="{% url 'properties:detail' prop.slug %}">{{ prop.title }}</a>
                    </h2>
                    <p class="card-location">
                        <i class="fas fa-map-marker-alt"></i> {{ prop.city }}, {{ prop.state }}
                    </p>
                    <div class="card-specs">
                        {% if prop.bedrooms is not None %}
                        <div class="spec"><i class="fas fa-bed"></i> {{ prop.bedrooms }} Beds</div>
                        {% endif %}
                        {% if prop.bathrooms is not None %}
                        <div class="spec"><i class="fas fa-bath"></i> {{ prop.bathrooms }} Baths</div>
                        {% endif %}
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <i class="far fa-heart" style="font-size: 3rem; color: #ccc; margin-bottom: 20px;"></i>
            <h3>No Saved Properties</h3>
            <p>You haven't saved any properties yet. Browse our listings and click the heart icon to save them here.</p>
            <a href="{% url 'properties:list' %}" class="btn btn-primary mt-10">Browse Properties</a>
        </div>
        {% endif %}

    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
function toggleFavoriteList(id, btnElement) {
    fetch(`/properties/toggle-favorite/${id}/`)
        .then(res => res.json())
        .then(data => {
            if(data.status === 'ok') {
                if(!data.added) {
                    // Remove card from DOM
                    const card = document.getElementById(`prop-card-${id}`);
                    if(card) {
                        card.remove();
                    }
                    // Optionally refresh if empty
                    if(document.querySelectorAll('.property-card').length === 0) {
                        location.reload();
                    }
                }
            }
        });
}
</script>
{% endblock %}