<div class="card mb-2">
<div class="card-body">
  <div class="row">
    <div class="col-2">
      {% set imgPath = item.pictures.one().getUrl() %}
        <a href="{{ url(item.uri) }}" alt=" item.title}}" class="img">
              <img src="{{ imgPath }}" alt="Image" class="img-fluid">
        </a>

    </div>
      <div class="col-6 property-content">

          <span class="d-block mb-2 text-black-80"
            >{{item.title}}</span
          >
          <span class="city d-block mb-3">{{item.suburb}}, {{item.state}}</span>

          <a data-bs-toggle='collapse' href='#accordCollapse{{item.id}}' class='learn-more'>More Details</a>
      </div>

      <div class="col-4 text-end p-4">
          <a
              href="{{ url(item.uri) }}"
              class="btn btn-primary py-2 px-3"
              >See details
            </a>  
      </div>
  </div>

  <div class="row collapse" id='accordCollapse{{item.id}}'>
    <div class="col-2">
      
    </div>
    <div class="col-10">

      <ul class="nav nav-tabs">
          <li class="nav-item">
              <a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
          </li>
          <li class="nav-item">
              <a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
          </li>
          <li class="nav-item">
              <a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
          </li>
      </ul>
      <div class="tab-content" style='border: 1px solid #dee2e6; border-top:transparent;padding:15px'>
          <div class="tab-pane fade show active" id="home">
                <p>
                <div class="price mb-2"><span>${{ item.price | number_format(0,',')}},000</span></div>
                <div>
                  <div class="specs d-flex mb-4">
                    <span class="d-block d-flex align-items-center me-3">
                      <span class="icon-bed me-2"></span>
                      <span class="caption">2 beds</span>
                    </span>
                    <span class="d-block d-flex align-items-center">
                      <span class="icon-bath me-2"></span>
                      <span class="caption">2 baths</span>
                    </span>
                  </div>
                </div>
                
                </p>

          </div>
          <div class="tab-pane fade" id="profile">
              <p>Profile tab content ...</p>
          </div>
          <div class="tab-pane fade" id="messages">
              <p>Messages tab content ...</p>
          </div>
      </div>      
      </div>
    </div>
<!-- end row !-->

</div>
</div>