<!DOCTYPE html>
<html lang="en">
  <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]-->
  </head>

  <body>
    <header>
      <% if content_for?(:category) %>
        <div>Section: <%= yield(:category) %></div>
      <% else %>
        <div>Skills Assessment Test</div>
      <% end %>
    </header>

    <main>
      <%= yield %>
    </main>

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

    <footer>
      <div><%= yield(:footer_title) %></div>
      <%= image_tag("perficientdigital.png",  alt:"Perficient Digital") %>
    </footer>

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