Primefaces Dialog doesnt show up

Question

Main page where i want my pop dialog to be shown

    <p:commandLink value="Login now "
       oncomplete="PF('LoginDialog').show()" update=":form:loginDialog">
    </p:commandLink> 

</h:body>
    <ui:include src="/job/login.xhtml"></ui:include>

</html>

The page am trying to make as a pop-up

<ui:composition>

    <h:head>

        <title>Login now</title>

    </h:head>
    <h:form id="form">
        <p:dialog id="loginDialog" header="Login Now" widgetVar="LoginDialog"
            showEffect="fade" hideEffect="fade" appendTo="@(body)" modal="true" resizable="true" >



                <p:messages id="messages" />
                <label class="text-black" for="fusername">Username </label>

                <p:inputText id="username" value="#{login.username}" required="true"
                    requiredMessage="Username is mandatory" class="form-control">
                    <p:watermark for="username" value="Username" />
                </p:inputText>


                <label class="text-black" for="fname">Password</label>
                <p:password id="password" value="#{login.password}" required="true"
                    class="form-control" requiredMessage="Password is mandatory">
                    <p:watermark for="password" value="Password" />
                </p:password>


                <p:commandButton value="Login" icon="ui-icon-star"
                    action="#{login.submit}" ajax="false"
                    class="btn px-4 btn-primary text-white">
                </p:commandButton>
        </p:dialog>

            </h:form>

</ui:composition>
</html>

I don't understand why this is not showing up in the main page,can somebody help? It doesn't give me any errors but it's not shown.