{% extends "frontend/surround.html" %}

{% block content %} 
<nav aria-label="Page navigation">
            <ul class="pagination">
                {% if table.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for(request.endpoint, page=table.prev_num)  }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}
                {% for p in table.iter_pages() %}
                    {% if p %}
                        {% if p == table.page %}
                            <li class="page-item active"><span class="page-link">{{ p }}</span></li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="{{ url_for(request.endpoint,  page=p) }}">{{ p }}</a></li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    {% endif %}
                {% endfor %}
                {% if table.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for(request.endpoint, page=table.next_num)}}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>  
    <div class="row">  
        {% for item in table %}
            <div class="col-md-3">
                <div class="card mb-4 shadow-sm h-100">
                    {% set allImages = item['allImages'] %}
                    
                    {% if allImages %}
                        {% set imageList = allImages.split(',') %}
                        <div id="carousel-{{ loop.index }}" class="carousel slide" data-bs-ride="false">
                            <div class="carousel-inner">
                                {% for image in imageList %}
                                    <div class="carousel-item {% if loop.first %}active{% endif %}">
                                        <img src="https://wercr.net{{image.strip()}}" class="d-block w-100 card-img-top" style="height: 200px; object-fit: cover;" alt="{{item['PropertyName']}}">
                                    </div>
                                {% endfor %}
                            </div>

                            {% if imageList|length > 1 %}
                                <button class="carousel-control-prev" type="button" data-bs-target="#carousel-{{ loop.index }}" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Anterior</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carousel-{{ loop.index }}" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Siguiente</span>
                                </button>
                            {% endif %}
                        </div>
                    {% endif %}

                    <div class="card-body">
                        <h5 class="card-title text-truncate">{{item['PropertyName']}}</h5>
                        <p class="card-text text-muted" style="font-size: 0.9rem;">
                            {% if item['Description']%}
                            {{ item['Description'][:100] }}{% if item['Description']|length > 100 %}...{% endif %}
                            {% else %}
                            Sin Descripción
                            {% endif %}
                        </p>
                        <div class="d-flex justify-content-between align-items-center mt-auto">
                            <strong class="text-primary">{{item['MinPrice'] | money_format}}</strong>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}