%nav
  %h1.ctl-labs-logo= link_to('CenturLink Labs', '#about')
  %h4 Generic components
  %ul
    %li= link_to('CTL Identity', '#ctl_id')
    %li= link_to('Buttons', '#buttons')
    %li= link_to('Forms', '#forms')
    %li= link_to('Colors', '#colors')
    %li= link_to('Icons', '#icons')
    %li= link_to('Notices', '#notices')
    %li= link_to('Typograhy','#typograhy')
    %li= link_to('Modal Windows','#modals')
  %h4= "#{CtlBaseUi.configuration.app_name} specific components"
  %ul
    - CtlBaseUi.configuration.additional_entries.each do |entry|
      %li= link_to(entry.humanize,"##{entry}")
%main
  %h1 CenturyLink Labs Base UI Kit
  %section#about
    %p
      This UI kit provides the visual foundation for CenturyLink Labs projects.
      Optionally, this styleguide may contain application-specific items if the developer of the parent application chooses to include them.
      Application-specific items will appear in the menu under the "[My application] specific components" headline.
    %p
      %strong A quick note about semantics:
      This style guide uses class names that are tied to corresponding mixin names.
      In practice, the class names can be much more semantic.

  %section#ctl_id
    %h2 Century Link Identity
    = render 'century_link_identity'
  %section#buttons
    %h2 Buttons
    = render 'buttons'
  %section#forms
    %h2 Forms
    = render 'forms'
  %section#colors
    %h2 Color Palette
    = render 'colors'
  %section#icons
    %h2 Icons
    = render 'icons'
  %section#notices
    %h2 Notices
    = render 'notices'
  %section#typograhy
    %h2 Typography
    = render 'typography'
  %section#modals
    %h2 Modal Windows
    = render 'modals'
  %h1= "#{CtlBaseUi.configuration.app_name} specific components"
  - CtlBaseUi.configuration.additional_entries.each do |entry|
    %section{id: entry}
      %h2= entry.humanize
      = render "#{CtlBaseUi.configuration.partials_path}#{entry}"