<% def currentNode = uicomponent.getNode();
   def userNameProp = "exo:name";
   def userEmailProp = "exo:email";
   def userPhoneProp = "exo:phone";
   def userMessageProp = "exo:message";
%> 
<div class="contactUsArea">
  <table class="uiGrid table table-hover table-striped contactUsInfoTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <%
        if (currentNode.hasProperty(userNameProp)) {
          %>
          <td><%= _ctx.appRes("contact.view.label.YourName") %></td>
          <td><%= currentNode.getProperty(userNameProp).getString() %></td>
        <%
        }
        %>   
      </tr>
      
      <tr>
        <%
        if (currentNode.hasProperty(userEmailProp)) {
          %>
          <td><%= _ctx.appRes("contact.view.label.YourEmail") %></td>
          <td><%= currentNode.getProperty(userEmailProp).getString() %></td>
        <%
        }
        %>   
      </tr>
      
      <tr>
        <%
        if (currentNode.hasProperty(userPhoneProp)) {
          %>
          <td><%= _ctx.appRes("contact.view.label.YourPhone") %></td>
          <td><%= currentNode.getProperty(userPhoneProp).getString() %></td>
        <%
        }
        %>   
      </tr>


      <tr>
        <%
        if (currentNode.hasProperty(userMessageProp)) {
          %>
          <td><%= _ctx.appRes("contact.view.label.YourMessage") %></td>
          <td><%= currentNode.getProperty(userMessageProp).getString() %></td>
        <%
        }
        %>   
      </tr>

    </tbody>
  </table>
</div>
<style type="text/css">
  .contactUsArea {
  padding: 10px;
  }
  .contactUsInfoTable {
  margin-bottom: 0;
  }
  .contactUsInfoTable tr th {
  text-align: left
  }
  .contactUsInfoTable tr th:first-child {
  width: 165px;
  }
  .contactUsInfoTable tr td:first-child {
  text-transform: capitalize;
  }
</style>