<div id="contact-us-modal">
    <div class="modal-header">
        <h1>[{isys type="lang" ident="LC__CONTRACT_CENTER__CONTACT_US"}]</h1>
        <button type="button" class="btn btn-secondary popup-closer ml-auto" title="[{isys type="lang" ident="LC__POPUP__CLOSE"}]" data-tooltip="1">
            <img class="fr mouse-pointer" alt="" src="[{$dir_images}]axialis/user-interface/window-control-close.svg" />
        </button>
    </div>

    <div class="modal-content p20">
        <p class="mb20">[{isys type="lang" ident="LC__CONTRACT_CENTER__CONTACT_US__DESCRIPTION"}]</p>
        <div class="mb15 display-flex">
            <div class="key">[{isys type="lang" ident="LC__CONTRACT_CENTER__CONTACT_US__EMAIL"}]:</div>
            <div class="value"><a href="mailto:[{$email}]">[{$email}]</a></div>
        </div>
        <div class="mb20 display-flex">
            <div class="key">[{isys type="lang" ident="LC__CONTRACT_CENTER__CONTACT_US__PHONE"}]:</div>
            <div class="value"><a href="tel:[{$phoneNumber}]">[{$phoneNumber}]</a></div>
        </div>
        <div>
            <a href="tel:[{$phoneNumber}]" class="btn mr20">
                <img src="[{$dir_images}]axialis/hardware-network/phone-6.svg" alt="" /><span>[{isys type="lang" ident="LC__CONTRACT_CENTER__CONTACT_US__CALL"}]</span>
            </a>
            <a href="mailto:[{$email}]" class="btn">
                <img src="[{$dir_images}]axialis/web-email/mail-back.svg" alt="" /><span>[{isys type="lang" ident="LC__CONTRACT_CENTER__CONTACT_US__SEND_EMAIL"}]</span>
            </a>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn popup-closer">
            <img src="[{$dir_images}]axialis/basic/symbol-cancel.svg" alt="" /><span>[{isys type="lang" ident="LC__UNIVERSAL__CLOSE"}]</span>
        </button>
    </div>
</div>

<script>
    (function () {
        const $popup = $('contact-us-modal');

        $popup.on('click', '.popup-closer', function () {
            Modal.close($popup.up('.modal'));
        });
    })();
</script>

<style>
    #contact-us-modal .modal-content .key {
        width: 100px;
    }
    #contact-us-modal .modal-content .value {
        width: 200px;
    }
</style>
