!!! 5
%html{:lang=>(attr :lang, 'en')}
  %head
    %meta(http-equiv='Content-Type' content="text/html; charset=#{attr :encoding}")
    %meta(name='generator' content="Asciidoctor #{attr 'asciidoctor-version'}")
    - [:description, :keywords, :author, :copyright].each do |key|
      - if attr? key
        %meta{:name=>key, :content=>(attr key)}
    %title=((doctitle :sanitize => true) || (attr 'untitled-label'))
    - unless (attr :stylesheet, '').empty?
      %link(rel='stylesheet'){:href=>normalize_web_path((attr :stylesheet), (attr :stylesdir, ''))}
    - if attr? :icons, 'font'
      %link(rel='stylesheet'){:href=>(attr 'iconfont-cdn', 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css')}
    - case attr 'source-highlighter'
    - when 'coderay'
      - if (attr 'coderay-css', 'class') == 'class'
        - if @safe >= Asciidoctor::SafeMode::SECURE || (attr? :linkcss)
          %link(rel='stylesheet'){:href=>normalize_web_path('asciidoctor-coderay.css', (attr :stylesdir, ''))}
        - else
          %style=Asciidoctor::HTML5.default_coderay_stylesheet
    - when 'pygments'
      - if (attr 'pygments-css', 'class') == 'class'
        - if @safe >= Asciidoctor::SafeMode::SECURE || (attr? :linkcss)
          %link(rel='stylesheet'){:href=>normalize_web_path('asciidoctor-pygments.css', (attr :stylesdir, ''))}
        - else
          %style=Asciidoctor::HTML5.pygments_stylesheet(attr 'pygments-style')
    - when 'highlightjs'
      %link(rel='stylesheet' href="#{attr :highlightjsdir, 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4'}/styles/#{attr 'highlightjs-theme', 'default'}.min.css")
      %script(src="#{attr :highlightjsdir, 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4'}/highlight.min.js")
      %script hljs.initHighlightingOnLoad()
    - when 'prettify'
      %link(rel='stylesheet' href="#{attr :prettifydir, 'http://cdnjs.cloudflare.com/ajax/libs/prettify/r298'}/#{attr 'prettify-theme', 'prettify'}.min.css")
      %script(src="#{attr :prettifydir, 'http://cdnjs.cloudflare.com/ajax/libs/prettify/r298'}/prettify.min.js")
      %script document.addEventListener('DOMContentLoaded', prettyPrint)
    %link(rel='stylesheet' href='deck.js/core/deck.core.css')
    %link(rel='stylesheet' href='deck.js/extensions/goto/deck.goto.css')
    %link(rel='stylesheet' href='deck.js/extensions/hash/deck.hash.css')
    %link(rel='stylesheet' href='deck.js/extensions/menu/deck.menu.css')
    %link(rel='stylesheet' href='deck.js/extensions/navigation/deck.navigation.css')
    %link(rel='stylesheet' href='deck.js/extensions/scale/deck.scale.css')
    %link(rel='stylesheet' href='deck.js/extensions/status/deck.status.css')
    %link(rel='stylesheet' href='deck.js/extensions/toc/deck.toc.css')
    %link(rel="stylesheet" href="deck.js/themes/style/#{attr :deckjs_theme}.css")
    %link(rel='stylesheet' id='transition-theme-link' href="deck.js/themes/transition/#{attr :deckjs_transition}.css")
    - if attr? :customjs
      %script(src="#{:customjs}.js")
    - if attr? :customcss
      %link(rel='stylesheet' href="#{:customcss}.css")
    %script(src='deck.js/modernizr.custom.js')
  %body{:id=>@id, :class=>['deck-container', doctype], :style=>("max-width: #{attr 'max-width'};" if (attr? 'max-width'))}
    - unless noheader
      %section(class='slide' id='title-slide')
        - unless notitle
          %h1=@header.title
        - if attr? :author
          %span#author=attr :author
          %br
          - if attr? :email
            %span#email=sub_macros(attr :email)
            %br
          - if (authorcount = (attr :authorcount).to_i) > 1
            - (2..authorcount).each do |idx|
              %span{:id=>"author#{idx}", :class=>"author"}=(attr "author_#{idx}")
              %br
              - if attr? "email_#{idx}"
                %span{:id=>"email#{idx}", :class=>"email"}=sub_macros(attr "email_#{idx}")
        - if attr? :revnumber
          %span#revnumber #{((attr 'version-label') || '').downcase} #{attr :revnumber}#{',' if (attr? :revdate)}
        - if attr? :revdate
          %span#revdate=attr :revdate
        - if attr? :revremark
          %br
          %span#revremark=attr :revremark
      =content
    - if attr? :navigation
      %a(href='#' class='deck-prev-link' title='Previous') ←
      %a(href='#' class='deck-next-link' title='Next') →
    - if attr? :status
      %p.deck-status
        %span.deck-status-current
        \/
        %span.deck-status-total
    %a(href='.' title='Permalink to this slide' class='deck-permalink') #
    %script(src='deck.js/jquery-1.7.2.min.js')
    %script(src='deck.js/core/deck.core.js')
    %script(src='deck.js/extensions/deck.js-blank/deck.blank.js')
    %script(src='deck.js/extensions/goto/deck.goto.js')
    %script(src='deck.js/extensions/hash/deck.hash.js')
    %script(src='deck.js/extensions/menu/deck.menu.js')
    %script(src='deck.js/extensions/navigation/deck.navigation.js')
    %script(src='deck.js/extensions/scale/deck.scale.js')
    %script(src='deck.js/extensions/status/deck.status.js')
    %script(src='deck.js/extensions/toc/deck.toc.js')
    - if attr? :menu
      %div{:class=>['deck-toc']}
      %form{:action => ".", :method => "get", :class => "goto-form"}
        %label{:for => "goto-slide"} Go to Slide:
        %input{:type => "text", :name => "slidenum", :id => "goto-slide", :list => "goto-datalist"}
        %datalist{:id => "goto-data-list"}
        %input{:type => "submit", :value => "Go"}
    - if attr? :split
      %script(src='deck.js/extensions/deck.split.js')
    :javascript
      (function($, deck, undefined) {

        $.deck.defaults.keys["previous"] = [8, 33, 37, 39];
        $.deck.defaults.keys["next"] = [13, 32, 34, 39];

        $.extend(true, $[deck].defaults, {
                countNested: false
        });

        $.deck('.slide');

      })(jQuery, 'deck');
    :css
      .slide.canvas-image {
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      display: -moz-box;
      display: -webkit-box;
      display: -ms-box;
      display: box;
      -moz-box-orient: vertical;
      -webkit-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -moz-box-align: start;
      -webkit-box-align: start;
      -ms-box-align: start;
      box-align: start;
      -moz-box-pack: start;
      -webkit-box-pack: start;
      -ms-box-pack: start;
      box-pack: start;}

      .bottom-left {
        left: 1%;
        bottom: 20%; }

      .top-left {
        left: 1%;
        top: 20%; }

      .bottom-right {
        right: 1%;
        bottom: 20%; }

      .top-right {
        right: 1%;
        top: 20%; }

      .center-up {
        right: 50%;
        top: 1%;
      }

      .center-down {
        right: 50%;
        bottom: 1%;
      }
      .canvas-image .canvas-caption p {
        text-align: center;
        padding-top: 0;
        padding: 0;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
        display: inline;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        font-weight: bold;
        font-size: 58px;
        -webkit-box-shadow: 2px 2px 2px #000;
        -moz-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
        padding: 1rem;
        color: white; }