<div class="row">
    <div class="col">
        <h4 class="display-4 d-flex"><span class='flex-fill'>{{ profile.display_name }}</span>
            <button class="d-lg-none btn btn-primary align-self-center" type="button" onclick="showContacts()"><i
                    class="bi bi-people-fill"></i></button>
        </h4>
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Voornaam:
    </div>
    <div class="col">{{ profile.first_name }}
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Achternaam:
    </div>
    <div class="col">{{ profile.last_name }}
    </div>
</div>
<hr>
<div class="row">
    <div class="col-4 fst-italic">E-mailadres:
    </div>
    <div class="col">{{ profile.email }}
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Telefoonnummer:
    </div>
    <div class="col">{{ profile.phone }}
    </div>
</div>
<hr>
<div class="row">
    <div class="col-4 fst-italic">Straatnaam:
    </div>
    <div class="col">{{ profile.street }}
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Huisnummer:
    </div>
    <div class="col">{{ profile.number }}
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Postcode:
    </div>
    <div class="col">{{ profile.postal }}
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Stad:
    </div>
    <div class="col">{{ profile.city }}
    </div>
</div>
<div class="row">
    <div class="col-4 fst-italic">Land:
    </div>
    <div class="col">{{ profile.country }}
    </div>
</div>
{% if profile.lat and profile.lon %}
<div class="row mt-3">
    <div class="col">
        <div id="osm-map-small" data-lat="{{ profile.marker.lat }}" data-lon="{{ profile.marker.lon }}"
            data-label="{{ profile.marker.label }}"></div>
    </div>
</div>
{% endif %}
<hr>

<div class="row">
    <div class="col-4 fst-italic">Verjaardag:
    </div>
    <div class="col">{% if profile.birthdate %}{{ profile.birthdate | date_format }}{% endif %}
    </div>
</div>
<hr>
<div class="row">
    <div class="col text-center"><em>Laatst bijgewerkt: {{ profile.last_updated | datetime_format }}</em>
    </div>
</div>