<%--
 ~
 ~ Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.
 ~
 ~ This software is the property of WSO2 Inc. and its suppliers, if any.
 ~ Dissemination of any information or reproduction of any material contained
 ~ herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
 ~ You may not alter or remove any copyright or other notice from copies of this content."
 ~
--%>

<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page import="org.owasp.encoder.Encode" %>

<%
    String username = StringUtils.isNotEmpty(request.getParameter("username"))
        ? Encode.forHtmlAttribute(request.getParameter("username"))
        : "";
%>

<div class="tracking-reference-container ${ param.align }">
    <p id="tracking-reference-title" class="tracking-reference-title">
        Tracking Ref:
    </p>
    <div class="ui fluid action right labeled input copy-input tracking-reference">
        <input id="tracking-reference" readonly="" type="text">
        <button type="button" class="ui icon button copy-input-action" onclick="copyValueToClipboard()">
            <i aria-hidden="true" class="copy icon"></i>
        </button>
    </div>
</div>

<!-- Retrieve the x-azure-ref from the request header -->
<%
    String trackingRefs = request.getHeader("X-Azure-Ref");
    String trackingRef = null;
    // Display only the first ref if there are multiple refs
    if (trackingRefs != null) {
        trackingRef = trackingRefs.split(",")[0];
    }
%>

<script>
    const trackingRefInput = document.getElementById("tracking-reference");
    
    // set tracking reference input element's value
    trackingRefInput.value = "<%=trackingRef%>";

    // copy tracking reference input element's value to the clipboard
    function copyValueToClipboard() {
        navigator.clipboard.writeText(trackingRefInput.value);
    }
</script>
