{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/admin_maps.css">
{% endblock %}

{% block content %}
<div class="pl-root pl-listing-detail" data-plugin="property-listings"
     data-listing-id="{{ listing_id }}"
     data-unlocked="{{ unlocked | json_encode }}"
     data-gateway-script="{{ gateway_script_url | default(value='') }}"
     data-unlock-price="{{ contact_unlock_price | default(value=10) }}"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    {% if listing.error is defined %}
    <div class="alert alert-warning">{{ listing.error }}</div>
    {% else %}
    <div class="pl-page-header">
        <span class="pl-badge pl-badge-{{ listing.status }}">{{ listing.status }}</span>
        <h1>{{ listing.title }}</h1>
        <p class="pl-meta">{{ listing.property_type | capitalize }}{% if listing.display_area %} · {{ listing.display_area }}{% endif %}</p>
        {% if listing.distance_label %}
        <p class="pl-distance"><i class="fas fa-location-arrow"></i> ~{{ listing.distance_label }} from you</p>
        {% endif %}
    </div>

    {% if listing.photos and listing.photos | length > 0 %}
    <div class="pl-gallery">
        {% for photo in listing.photos %}
        <img src="{{ photo }}" alt="{{ listing.title }}">
        {% endfor %}
    </div>
    {% elif listing.thumbnail %}
    <div class="pl-gallery">
        <img src="{{ listing.thumbnail }}" alt="{{ listing.title }}">
    </div>
    {% elif listing.photos_json %}
    {% endif %}

    <div class="pl-price-row">
        {% if listing.sale_price %}
        <span><strong>Sale:</strong> {{ currency_symbol }}{{ listing.sale_price | price }}</span>
        {% endif %}
        {% if listing.rent_price_monthly %}
        <span><strong>Rent/mo:</strong> {{ currency_symbol }}{{ listing.rent_price_monthly | price }}</span>
        {% endif %}
        {% if listing.lease_price_3yr %}
        <span><strong>Lease (3 yr):</strong> {{ currency_symbol }}{{ listing.lease_price_3yr | price }}</span>
        {% endif %}
        {% if listing.token_advance %}
        <span><strong>Token:</strong> {{ currency_symbol }}{{ listing.token_advance | price }}</span>
        {% endif %}
    </div>

    <div class="pl-card pl-spaced-links">
        <h2>Area</h2>
        <div class="pl-price-row">
            {% if listing.area_sqft %}<span>{{ listing.area_sqft }} sq ft</span>{% endif %}
            {% if listing.area_sqm %}<span>{{ listing.area_sqm }} sq m</span>{% endif %}
            {% if listing.volume_cum %}<span>{{ listing.volume_cum }} cu m</span>{% endif %}
        </div>
    </div>

    {% if listing.description %}
    <div class="pl-card">
        <h2>Description</h2>
        <div class="pl-description pl-description-html">{{ listing.description | safe }}</div>
    </div>
    {% endif %}

    {% if unlocked %}
    <div class="pl-contact-revealed" id="pl-contact-revealed">
        <h2>Contact &amp; location</h2>
        {% if listing.contact_name %}<p><strong>{{ listing.contact_name }}</strong></p>{% endif %}
        {% if listing.contact_phone %}<p>Phone: <a href="tel:{{ listing.contact_phone }}">{{ listing.contact_phone }}</a></p>{% endif %}
        {% if listing.contact_whatsapp %}<p>WhatsApp: <a href="https://wa.me/{{ listing.contact_whatsapp }}">{{ listing.contact_whatsapp }}</a></p>{% endif %}
        {% if listing.contact_email %}<p>Email: <a href="mailto:{{ listing.contact_email }}">{{ listing.contact_email }}</a></p>{% endif %}
        {% if listing.address_text %}<p>{{ listing.address_text }}</p>{% endif %}
        {% if listing.latitude and listing.longitude %}
        <div class="pl-map-wrap blocks-core-map"
             data-markers='[{"lat":{{ listing.latitude }},"lng":{{ listing.longitude }},"title":"{{ listing.title | escape }}","popup":"{{ listing.title | escape }}"}]'></div>
        {% endif %}
    </div>
    {% elif listing.status == "active" and not is_owner %}
    <div class="pl-unlock-box" id="pl-unlock-box">
        <p>Exact location and contact details are hidden.</p>
        <p>Unlock for <strong>{{ currency_symbol }}{{ contact_unlock_price | price }}</strong> (one-time)</p>
        <button type="button" class="blocks-button blocks-button-primary" id="pl-unlock-btn">
            <i class="fas fa-lock-open"></i> Unlock contact &amp; location
        </button>
    </div>
    {% elif is_owner %}
    <div class="alert alert-info">You own this listing.</div>
    {% endif %}

    <p class="pl-spaced-links">
        <a href="/plugins/property-listings/search" class="blocks-button blocks-button-secondary">&larr; Back to search</a>
    </p>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-map.js"></script>
<script src="/plugins/property-listings/assets/js/listing.js"></script>
{% endblock %}