{% extends 'base.html' %}
{% block title %}View Listing{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="text-center">{{ listing.title }}</h1>
    {% if listing.images|length > 0 %}
        <img src="{{ listing.images[0].url }}" class="img-fluid mb-4">
    {% endif %}
    <p><strong>Description:</strong> {{ listing.description }}</p>
    <p><strong>Price:</strong> ${{ listing.price }}</p>
    <p><strong>Location:</strong> {{ listing.location }}</p>
    <p><strong>Property Type:</strong> {{ listing.property_type }}</p>
    <p><strong>Max Guests:</strong> {{ listing.guests }}</p>
    <p><strong>Rooms:</strong> {{ listing.rooms }}</p>
    <p><strong>Bathrooms:</strong> {{ listing.bathrooms }}</p>
    <p><strong>Beds:</strong> {{ listing.beds }}</p>

    <a href="/booking/{{ listing.id }}" class="btn btn-primary mt-3">Book This Listing</a>
</div>
{% endblock %}