<aside class="sidebar" id="sidebar">
  <div class="sidebar__brand">
    <span class="sidebar__logo">ETA</span>
    <span class="sidebar__sub">Admin Panel</span>
  </div>

  <nav class="sidebar__nav">
    <a href="/dashboard" class="sidebar__link <%= active === 'records' ? 'is-active' : '' %>">
      <span class="sidebar__icon" aria-hidden="true">&#9776;</span> Records
    </a>
    <a href="/records/new" class="sidebar__link <%= active === 'new' ? 'is-active' : '' %>">
      <span class="sidebar__icon" aria-hidden="true">&#43;</span> Add Record
    </a>
    <a href="/approvals" class="sidebar__link <%= active === 'approvals' ? 'is-active' : '' %>">
      <span class="sidebar__icon" aria-hidden="true">&#10003;</span> Approvals
    </a>
    <a href="/winners" class="sidebar__link <%= active === 'winners' ? 'is-active' : '' %>">
      <span class="sidebar__icon" aria-hidden="true">&#127942;</span> Winners
    </a>
  </nav>

  <div class="sidebar__footer">
    <div class="sidebar__user">
      <span class="sidebar__avatar" aria-hidden="true"><%= currentAdmin.username.charAt(0).toUpperCase() %></span>
      <div>
        <div class="sidebar__username"><%= currentAdmin.username %></div>
        <div class="sidebar__role">Administrator</div>
      </div>
    </div>
    <form method="POST" action="/logout">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
      <button type="submit" class="btn btn--ghost btn--block">Log out</button>
    </form>
  </div>
</aside>
