<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:jsf="http://xmlns.jcp.org/jsf">
    <!-- Dialog Contact Form -->
    <p:dialog id="contactDialog" header="#{sendFeedbackDialog.getFormHeader()}" widgetVar="contactForm" modal="true">
        <p:fragment>
            <h:form id="emailForm" class="form-horizontal">
                <div class="form-group">
                    <label for="messageTo" class="col-sm-3 control-label">#{bundle['contact.to']}</label>
                    <div class="col-sm-9">
                        <p id="messageTo" class="form-control-static">#{sendFeedbackDialog.getMessageTo()}</p>
                    </div>
                </div>
                <ui:fragment rendered="#{sendFeedbackDialog.isLoggedIn()}">
                    <div class="form-group">
                        <label for="userEmailStatic" class="col-sm-3 control-label">#{bundle['contact.from']}</label>
                        <div class="col-sm-9">
                            <p id="userEmailStatic" class="form-control-static">#{sendFeedbackDialog.loggedInUserEmail()}</p>
                        </div>
                    </div>
                </ui:fragment>
                <ui:fragment rendered="#{!sendFeedbackDialog.isLoggedIn()}">
                    <div class="form-group">
                        <label for="userEmail" class="col-sm-3 control-label">#{bundle['contact.from']}</label>
                        <div class="col-sm-9">
                            <p:inputText id="userEmail" styleClass="form-control" size="30" value="#{sendFeedbackDialog.userEmail}"
                                         validator="#{sendFeedbackDialog.validateUserEmail}" validatorMessage="#{bundle['contact.from.invalid']}" requiredMessage="#{bundle['contact.from.required']}" required="#{param['DO_VALIDATION']}"/>
                        <h:message for="userEmail" styleClass="bg-danger text-danger"/>
                        </div>
                    </div>
                </ui:fragment>
                <div class="form-group">
                    <label for="messageSubject" class="col-sm-3 control-label">#{bundle['contact.subject']} <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}" jsf:rendered="#{sendFeedbackDialog.recipient!=null}"/></label>
                    <div class="col-sm-9">
                        <p:inputText id="messageSubject" styleClass="form-control" value="#{sendFeedbackDialog.messageSubject}"
                                     requiredMessage="#{bundle['contact.subject.required']}" required="#{param['DO_VALIDATION']}" rendered="#{sendFeedbackDialog.recipient!=null }"/>
                        <ui:fragment rendered="#{sendFeedbackDialog.recipient==null}">
                            <p id="messageSubject" class="form-control-static">#{sendFeedbackDialog.messageSubject}</p>
                        </ui:fragment>
                        <h:message for="messageSubject" styleClass="bg-danger text-danger"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="userMessage" class="col-sm-3 control-label">#{bundle['contact.msg']} <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}"/></label>
                    <div class="col-sm-9">
                        <p:inputTextarea  id="userMessage" styleClass="form-control"  value="#{sendFeedbackDialog.userMessage}"
                            required="#{param['DO_VALIDATION']}" requiredMessage="#{bundle['contact.msg.required']}" rows="10"/>
                        <h:message for="userMessage" styleClass="bg-danger text-danger"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <p>
                            <h:outputText styleClass="highlightBold" value="#{bundle['contact.question']}"/> <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}"/>
                        </p>
                        <h:outputFormat value="#{sendFeedbackDialog.op1} + #{sendFeedbackDialog.op2} = "/>
                        <p:inputText id="messageSum" label="Sum" size="4" value="#{sendFeedbackDialog.userSum}" converterMessage="#{bundle['contact.sum.converterMessage']}"
                                     required="#{param['DO_VALIDATION']}" requiredMessage="#{bundle['contact.sum.required']}"
                                     validatorMessage="#{bundle['contact.sum.invalid']}" validator="#{sendFeedbackDialog.validateUserSum}">
                            <f:convertNumber integerOnly="true" type="number"/>
                        </p:inputText>
                        <h:message for="messageSum" styleClass="bg-danger text-danger"/>
                    </div>
                </div>
                <div class="button-block">
                    <p:commandLink styleClass="btn btn-default" value="#{bundle['contact.send']}"
                                    update="@form" oncomplete="if (args &amp;&amp; !args.validationFailed) contactForm.hide();" actionListener="#{sendFeedbackDialog.sendMessage}">
                        <f:param name="DO_VALIDATION" value="true"/>
                    </p:commandLink>
                    <button type="button" onclick="contactForm.hide()" class="btn btn-default" value="#{bundle.cancel}">
                        #{bundle.cancel}
                    </button>
                </div>
            </h:form>
        </p:fragment>
    </p:dialog>
</ui:composition>