<% if (locals.approverRequests && locals.approverRequests.length > 0) { %>
    <div class="panel panel-border-narrow alert-default" tabindex="0">
        <% if (locals.approverRequests.length === 1) { %>
            <p>There is <strong class="bold-small"><%= locals.approverRequests.length %> request</strong> you need to
                action - <a href=<%=locals.servicesUrl%>/access-requests>view requests</a></p>
        <% } else { %>
            <p>There are <strong class="bold-small"><%= locals.approverRequests.length %> requests</strong> you need to
                action - <a href=<%=locals.servicesUrl%>/access-requests>view requests</a></p>
        <% } %>
    </div>
<% } %>
<% if (locals.flash.info) { %>
<div class="notification notification-success" tabindex="-1">
    <%= locals.flash.info %>
</div>
<% } %>
<% if(locals.pendingEmail) { %>
<div class="notification notification-information" tabindex="0">
    <h2>Pending email address change</h2>
    <p>Waiting for you to confirm the new email address of <%=pendingEmail%>.</p>
    <p>
    <form method="post" action="/change-email/cancel">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>"/>
        <button class="button-text">Cancel change email</button>
    </form>
    </p>
</div>
<% } %>

<div class="row">
    <div class="col-8">
        <h1 class="heading-xlarge">
            Profile
        </h1>
        <dl class="inline">
            <dt>First name</dt>
            <dd><%= locals.user.given_name %></dd>
            <dt>Last name</dt>
            <dd><%= locals.user.family_name %></dd>
            <dt>Email</dt>
            <dd><%= locals.user.email %></dd>
        </dl>
    </div>
    <div class="col-4">
        <aside>
            <h2 class="heading-medium">Actions</h2>
            <nav class="subnav">
                <ul>
                    <li><a href="/edit-details">Edit my details</a></li>
                    <li><a href="/change-password">Change my password</a></li>
                    <li><a href="/change-email">Change my email address</a></li>
                </ul>
            </nav>
        </aside>
    </div>
</div>
