<div class="card" id="chat-user-details">
    <div class="card-header border-0 pb-0">
        <h4 class="card-title">{{"Customer Info" | translate}}</h4>
    </div>
    <div class="card-body">
        <ul class="list-unstyled chat-client-info" id="chat-client-info">
            <li>
                <span><i
                        class="ri-user-line font-weight-semibold me-2 align-middle icon-style1"></i>{{customerData.username}}</span>
            </li>
            <li>
                <span><i
                        class="ri-mail-line font-weight-semibold me-2 align-middle icon-style1"></i>{{customerData.email}}</span>
            </li>
            <li>
                <span><i
                        class="ri-phone-line font-weight-semibold me-2 align-middle icon-style1"></i>{{customerData.mobile_number}}</span>
            </li>
            <li>
                <span><i
                        class="ri-computer-line font-weight-semibold me-2 align-middle icon-style1"></i>{{customerData.browser_info}}</span>
            </li>
            <li>
                <span><i
                        class="ri-map-pin-range-line font-weight-semibold me-2 align-middle icon-style1"></i>{{customerData.login_ip}}</span>
            </li>
            <li>
                <span><i
                        class="ri-earth-line font-weight-semibold me-2 align-middle icon-style1"></i>{{customerData.full_address}}</span>
            </li>
            <li>
                <span><i class="ri-map-pin-line font-weight-semibold me-2 align-middle icon-style1"></i>
                    {{customerData.city ? customerData.city + "," : ''}} {{customerData.state ?
                    customerData.state + "," : ''}} {{customerData.country}}
                </span>
            </li>
        </ul>
    </div>
</div>