index.njk

---
layout: default.njk
---

<ul class="houses">
    {% for house in collections.homes %}
        <li class="house card">
            <div class="card-title">
                <h2>
                    <a href="{{house.link}}">
                        {{house.title}}
                    </a>
                    <span class="price">
                        {{house.price}}
                    </span>
                </h2>
                <div class="address">
                    <a href="https://www.google.com/maps/place/{{house.address}}">
                        {% include "assets/icons/map-pin.svg" %}
                        {{house.address}}
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="card-data">
                    <ul class="data-items">
                        <li class="bedrooms">
                            {% include "assets/icons/bed.svg" %}
                            <span>{{house.bedrooms}}</span>
                        </li>
                        <li class="bathrooms">
                            {% include "assets/icons/bath.svg" %}
                            <span>{{house.bathrooms}}</span>
                        </li>
                        <li class="cats pets {% if house.dogs %} allowed {% endif %}">
                            {% include "assets/icons/dog.svg" %}
                            <span>{% if house.dogs %} ✔ {% else %} ✗ {% endif %}</span>
                        </li>
                        <li class="dogs pets {% if  house.cats %} allowed {% endif %}">
                            {% include "assets/icons/cat.svg" %}
                            <span>{% if house.cats %} ✔ {% else %} ✗ {% endif %}</span>
                        </li>
                    </ul>
                </div>
                <img src="/assets/images/{{house.thumbnail}}" alt="{{house.title}}">
            </div>
            <div class="card-footer">
                <ul class="family">
                    {% for fam in house.family %}
                    <li class="fam">
                        <img src="/assets/profiles/{{fam.name}}.jpg" alt="{{fam.name}}">
                        <div class="distance">
                            <span class="num">{{fam.distance.text.split(" ")[0]}}</span>
                            <span class="units">{{fam.distance.text.split(" ")[1]}}</span>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </li>
    {% endfor %}
</ul>