<!DOCTYPE html>
  <html lang="en" class="no-js">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= csrf_meta_tags %>

    <title><%= yield(:title) %></title>

    <!--[if ! lte IE 8]><!-->
      <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <!--<![endif]-->

    <!--[if lt IE 9]>
      <%= javascript_include_tag 'ie9' %>
    <![endif]-->


  </head>
  <body>
    <div class="layout">

      <header <%= "class=no-progressbar" unless content_for?(:progress) %>>
        <div class="page-title slash-left">
          <% if content_for?(:category) %>
            <div>Section: <%= yield(:category) %></div>
          <% else %>
            <div>Skills Assessment Test</div>
          <% end %>
        </div>
      </header>

      <%= yield %>

      <% if content_for?(:progress) %>
        <div class="progress ignore-margin">
          <div class="progress-bar" role="progressbar" aria-valuenow="<%= yield :progress %>"
              aria-valuemin="0" aria-valuemax="100" style="width: <%= yield :progress %>%">
            <span><%= yield :progress %>%</span>
          </div>
        </div>
      <% end %>

    </div>

    <footer>
      <div class="footer_title"><h2><%= yield(:footer_title) %></h2></div>
      <div class="pd_logo"><%= image_tag("perficientdigital.png",  alt:"Perficient Digital") %></div>
      <div class="footer_yellow-bar slantleft slantright">&nbsp;</div>
    </footer>

    <!--[if ! lte IE 8]><!-->
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <%= yield :custom_javascipt %>
    <!--<![endif]-->

  </body>
</html>
