<div data-role="header" class="ui-header ui-bar-a ui-corner-top">
    <h1 class="ui-title" role="heading"><%- title %></h1>
</div>
<div data-role="content" class="ui-content ui-corner-bottom">

    <%
        var className = "alert-icon";

        if (typeof code !== "undefined" && code === "200"){
            className = "alert-success";
        }
    %>

    <% if (typeof alertMessage !== "undefined" && alertMessage !== "") { %>
    <h3 class="popup-alert">
        <span class="<%- className %>"></span>
        <span><%- alertMessage %></span>
    </h3>
    <% } %>

    <% if (typeof listOfItems !== "undefined" && listOfItems.length) { %>
    <ul>
        <% _.each(listOfItems, function (item) { %><li><%- item %></li><% }) %>
    </ul>
    <% } %>

    <% if (typeof message !== "undefined" && message !== "") { %>
    <h3><%- message %></h3>
    <% } %>

    <% if (typeof serverMessage !== "undefined" && serverMessage !== "") { %>
    <h3>Server Message:</h3>
    <div class="server-message"><%- serverMessage %></div>
    <% } %>

    <div class="buttons-<%- btnNames.length %>">
    <% for (var i = 0 ; i < btnNames.length && i < 3 ; i++){ %>
        <button id="popup-btn-<%- i %>" data-index="<%- i %>" ><%- btnNames[i] %></button>
    <% } %>
    </div>
</div>