{% trans_default_domain 'front' %}

{% set hasBtn = options.btn is defined %}
{% set btnClasses = hasBtn ? " btn btn-" ~ options.btn ~ " hbtn hb-fill-right" : null %}
{% set labelHTML = '' %}

{% if icon and (phone.type == 'office' or phone.type == 'fixe') %}
    {% set labelHTML = '<i class="fal fa-phone mr-2"></i>' %}
{% elseif icon and phone.type == 'mobile' %}
    {% set labelHTML = '<i class="fal fa-mobile mr-2"></i>' %}
{% elseif icon and phone.type == 'fax' %}
    {% set labelHTML = '<i class="fal fa-fax mr-2"></i>' %}
{% elseif options.icon is defined %}
    {% set labelHTML = '<i class="' ~ options.icon ~ ' mr-2"></i>' %}
{% elseif entitled %}
    {% set entitled = phone.type == 'fax' ? 'Fax.'|trans|raw : 'Tel.'|trans|raw %}
    {% set labelHTML = '<span class="entitled">' ~ entitled ~ '</span>' %}
{% elseif options.img is defined and options.webpack is defined %}
    {% set width = options.width is defined ? options.width : 20 %}
    {% set height = options.height is defined ? options.height : 20 %}
    {% set labelHTML = '<img data-src="' ~ asset(options.img, options.webpack) ~ '"
                             src="' ~ asset("build/vendor/images/lazy-point.svg", "vendor") ~ '"
                             class="img-fluid lazyload mr-2"
                             title="' ~ 'Téléphone'|trans|striptags ~ '"
                             alt="' ~ 'Téléphone'|trans|striptags ~ '"
                             width="' ~ width ~ '"
                             height="' ~ height ~ '" />' %}
{% endif %}

{% if not hasBtn and labelHTML %}
    {{ labelHTML|raw }}
{% endif %}

<a href="#" data-tel="{{ phone.tagNumber|encrypt(website) }}"
   class="phone-link d-inline-block loading {% if isMobile() %}has-mobile{% else %}has-desktop{% endif %}{{ btnClasses }}"
   data-tel-text="{{ phone.number|encrypt(website) }}"
   data-id="{{ website.id }}">
    {% if hasBtn and labelHTML %}
        {{ labelHTML|raw }}
    {% endif %}
    {% if options.text is defined %}
        {{ options.text }}
    {% else %}
        <span class="phone-text"><i class="fal fa-spin fa-spinner mr-1"></i>{{ "Chargement du numéro de téléphone"|trans|raw }}</span>
    {% endif %}
</a>