<%
    var subheadingTitle;

    if (clinics && clinics.length > 0) {
        subheadingTitle = "SELECT UP TO: 5";
    } else {
        subheadingTitle = "NO CLINICS AVAILABLE";
    }
%>
<div data-role="header" class="ui-header ui-bar-c">
    <h1 class="ui-title" role="heading">Clinics</h1>
    <a href="#" id="close-btn" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
    <% if (subheadingTitle === "SELECT UP TO: 5") { %>
        <button id="clear-btn" data-role="none" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b" title="Clear">Clear</button>
    <% } %>
</div>
<form id="clinics-form">
    <div class="select-countdown ui-li ui-li-divider ui-bar-b"><%- subheadingTitle %></div>
    <div data-role="controlgroup" data-corners="false" class="ui-selectmenu-list ui-listview" id="calendar-clinic-menu" role="listbox" aria-labelledby="calendar-clinic-button">
        <%
            var i = 0;

            _.each(clinics, function (clinic) {
                %>
                    <label for="clinic-<%- i %>"><%- clinic.name %></label>
                    <input type="checkbox" id="clinic-<%- i %>" clinic-id="<%- clinic.id %>" value="<%- clinic.link[0].href %>" name="<%- clinic.name %>" class="ui-li" data-theme="c" data-iconpos="right" />
                <%
                i++;
            });
        %>
    </div>
<% if(clinics){ %>
    <div class="desired-date">
        <%
            var disabled;

            if (typeof desiredDate !== "undefined" && desiredDate !== "") {
                disabled = "disabled";
            }
        %>
        <p class="error-message date-error hidden"><span class="alert-icon"></span><span>The date cannot be in the past and must no more than 90 days in the future</span></p>
        <label for="desired-date">Desired Date of Appointment</label>
        <input name="desired-date" id="desired-date" placeholder="MM/DD/YYYY" autocomplete="off" <%- disabled %> value="<%- desiredDate %>" />
        <button id="date-picker-btn" class="date-picker-btn" data-role="none" <%- disabled %> ><span class="icon-calendar"></span>Select Date</button>
    </div>
<% } else { %> 
    <p class="error-message-text">
        It appears there is something wrong with the clinic configuration... Please contact your Systems Administrator.
    </p>
<% }; %>
</form>
<div id="appointment-button">
    <button data-role="none" data-inset="true" disabled="disabled" data-theme="b" class="ok-button ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b">VIEW AVAILABILITY</button>
</div>