<div id="header" class="topbar">
  <div class="topbar-logo">
  <a href="/" title="Mailpile">
    {% include("../img/logo-color.svg") %}
  </a>
  </div>
  <div class="topbar-logo-name">
    <a href="/" title="Mailpile">
      {% include("../img/logo-name.svg") %}
    </a>
  </div>
  <div id="setup-progress" class="clearfix">
    <ul class="horizontal">
      <li class="setup-progress-crypto left">
        <a href="/setup/crypto/" class="setup-progress-circle" title="{{_("Encryption Keys")}}">
          <span class="icon icon-lock-closed"></span></a>
      </li>
      <li class="left">
        <div><span class="setup-progress-line"></span></div>
      </li>
      <li class="setup-progress-profiles left">
        <a href="#profiles" class="setup-progress-circle" title="{{_("Profiles")}}">
          <span class="icon icon-profiles"></span>
        </a>
      </li>
      <li class="left">
        <div><span class="setup-progress-line"></span></div>
      </li>
      <li class="setup-progress-sources left">
        <a href="#sources" class="setup-progress-circle" title="{{_("Mail Sources")}}">
          <span class="icon icon-inbox"></span>
        </a>
      </li>
      <li class="left">
        <div><span class="setup-progress-line"></span></div>
      </li>
      <li class="setup-progress-complete left">
        <a href="#complete" class="setup-progress-circle" title="{{_("Complete")}}">
          <span class="icon icon-checkmark"></span>
        </a>
      </li>
    </ul>
  </div>
</div>