{% set email = "mailto:" ~ entry.email %}
<a href='{{ email | entities }}'>{{ entry.email | entities }}</a>

<a href="tel:+{{ entry.phone|replace({'-':'', ' ':'', '.':'', '(':'', ')':''}) }}">{{ entry.phone }}</a>

{% if craft.app.request.segments %}
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ siteUrl }}">Home</a></li>
                {% for segment in craft.app.request.segments %}
                  {% set segmentEntries = craft.entries.slug(segment).all() %}
                  {% for segmentEntry in segmentEntries.all() %}
                      {% if segmentEntry.id == entry.id %}
                        <li class="breadcrumb-item">
                          {{ segmentEntry.title }}
                        </li>
                      {% else %}
                        <li class="breadcrumb-item">
                          <a href="{{ segmentEntry.url }}">{{ segmentEntry.title }}</a>
                        </li>
                      {% endif %}
                  {% endfor %}
                {% endfor %}
              </ol>
            </nav>
        </div>
    </div>
</div>
{% endif %}

    <ul class="flex mx-auto mt-8 list-reset w-auto font-sans">

      {# set height & width of svg icons here #}
      {% set iconDims = "16" %}

      <li><a href="{{ pageInfo.firstUrl }}" class="block hover:bg-grey-lighter text-base text-orange no-underline pl-0 pr-2 py-2">{{ macros.icon("chevron-double-left", "fill-current inline-block svg-shadow", iconDims, iconDims) }}</a></li>

      {% if pageInfo.prevUrl %}
        <li><a class="block hover:bg-grey-lighter text-base text-orange no-underline pl-0 pr-2 py-2" href="{{ pageInfo.prevUrl }}">{{ macros.icon("chevron-left", "fill-current inline-block svg-shadow", iconDims, iconDims) }}</a></li>
      {% endif %}

      {% for page, url in pageInfo.getPrevUrls(3) %}
        <li><a class="block hover:bg-grey-lighter text-base text-orange no-underline px-4 py-2" href="{{ url }}">{{ page }}</a></li>
      {% endfor %}

      <li><a href="#" class="block bg-grey-lighter text-orange mx-2 px-3 py-2">{{ pageInfo.currentPage }}</a></li>

      {% for page, url in pageInfo.getNextUrls(3) %}
        <li><a class="block hover:bg-grey-lighter text-base text-orange no-underline px-4 py-2" href="{{ url }}">{{ page }}</a></li>
      {% endfor %}

      {% if pageInfo.nextUrl %}
        <li><a class="block hover:bg-grey-lighter text-base text-orange no-underline pl-0 pr-2 py-2" href="{{ pageInfo.nextUrl }}">{{ macros.icon("chevron-right", "fill-current inline-block svg-shadow", iconDims, iconDims) }}</a></li>
      {% endif %}

      <li><a href="{{ pageInfo.lastUrl }}" class="block hover:bg-grey-lighter text-base text-orange no-underline pl-0 pr-2 py-2">{{ macros.icon("chevron-double-right", "fill-current inline-block svg-shadow", iconDims, iconDims) }}</li>

    </ul>