<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">#<%= mem.id %> -
        <%= mem.Name %>
    </h5>
    <button type="button" class="close" data-dismiss="modal"
            aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<form method="post" class="editRanking">
    <div class="modal-body">
        <p>From 0 to 100</p>
        <input type="hidden" name="id" value="<%= mem.id %>">
        <input type="hidden" name="directorate" value="<%= mem.Directorate %>">
        <!--April-->
        <div class="input-group mb-3 rankingmonth">
            <div class="input-group-prepend">
                <button type="button" class="RankingButton btn <% if (mem.Ranking.April === null){%> btn-danger<%}else{%>btn-success<%}%>">April</button>
            </div>
            <!-- /btn-group -->
            <input type="text" class="form-control rankinginput" name="April"
                    <% if (mem.Ranking.April !== null){%> value="<%=mem.Ranking.April%>" <%}%>  <% if (mem.Ranking.April === null){%>disabled<%}%>>
        </div>
        <!--May-->
        <div class="input-group mb-3 rankingmonth">
            <div class="input-group-prepend">
                <button type="button" class="RankingButton btn <% if (mem.Ranking.May === null){%> btn-danger<%}else{%>btn-success<%}%>">May</button>
            </div>
            <!-- /btn-group -->
            <input type="text" class="form-control rankinginput" name="May"
                    <% if (mem.Ranking.May !== null){%> value="<%=mem.Ranking.May%>" <%}%>  <% if (mem.Ranking.May === null){%>disabled<%}%>>
        </div>
        <!--June-->
        <div class="input-group mb-3 rankingmonth">
            <div class="input-group-prepend">
                <button type="button" class="RankingButton btn <% if (mem.Ranking.June === null){%> btn-danger<%}else{%>btn-success<%}%>">June</button>
            </div>
            <!-- /btn-group -->
            <input type="text" class="form-control rankinginput" name="June"
                    <% if (mem.Ranking.June !== null){%> value="<%=mem.Ranking.June%>" <%}%>  <% if (mem.Ranking.June === null){%>disabled<%}%>>
        </div>
        <!--July-->
        <div class="input-group mb-3 rankingmonth">
            <div class="input-group-prepend">
                <button type="button" class="RankingButton btn <% if (mem.Ranking.July === null){%> btn-danger<%}else{%>btn-success<%}%>">July</button>
            </div>
            <!-- /btn-group -->
            <input type="text" class="form-control rankinginput" name="July"
                    <% if (mem.Ranking.July !== null){%> value="<%=mem.Ranking.July%>" <%}%>  <% if (mem.Ranking.July === null){%>disabled<%}%>>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-dismiss="modal">Cancel
        </button>
        <input type="submit" value="Save"
               class="btn btn-outline-success">
    </div>
</form>
<style>
    .RankingButton{
        width: 90px;
        text-align: center;
    }
</style>