// Variables
- latest_version = current_page.metadata[:page][:version] == $last_version
- language_code = current_page.metadata[:page][:language]
- versions = Dir.entries("source/#{language_code}") - %w[. ..]
- current_version = current_page.metadata[:page][:version]
- newer_version_available = File.exists?("source/#{language_code}/#{$last_version}")

!!! 5
%html
  %head{ lang: current_page.data.language }
    %meta{ charset: 'utf-8' }
    %meta{ content: 'IE=edge', 'http-equiv' => 'X-UA-Compatible' }
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
    %meta{ name: 'description', content: current_page.data.description }

    -# Open Graph

    %meta{ property: 'og:article:publisher', content: config.publisher_url }
    %meta{ property: 'og:title', content: current_page.data.title }
    %meta{ property: 'og:type', content: 'article' }
    %meta{ property: 'og:url', content: path_to_url(current_page.url) }
    %meta{ property: 'og:description', content: current_page.data.description }
    = yield_content :og

    -# Icons

    %link{ rel: 'canonical', href: path_to_url(current_page.url) }

    %title= current_page.data.title

    %link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Muli:400,700" }
    = stylesheet_link_tag '//fonts.googleapis.com/css?family=Source+Code+Pro:400,700'
    - if latest_version
      = stylesheet_link_tag 'application'
    - else
      = stylesheet_link_tag 'legacy'
    = javascript_include_tag 'all'

  %body
    %article
      %header{ role: "banner" }
        - if latest_version
          = image_tag "keep-a-changelog-mark.svg", width: 100, class: "mark"
        %nav.locales{ role: "navigation" }
          %select
            - $languages.each do |language|
              - version_exists = File.exists?("source/#{language.first}/#{$last_version}")
              - selected = language_code == language.first
              - if version_exists
                %option{ selected: selected, label: "#{$last_version} #{language.last[:name]}", value: language.first }
              - else
                - previous_version = File.exists?("source/#{language.first}/#{$previous_version}")
                - if previous_version
                  %option{ selected: selected, label: "#{$previous_version} #{language.last[:name]}", value: language.first }

      .main{ role: "main" }
        - if !latest_version
          - if versions.include?($last_version)
            %p.newer
              - if $languages[language_code][:new]
                = "#{$languages[language_code][:new]}: "
              - else
                There is a newer version available:
              = link_to "#{$languages[language_code][:name]} #{$last_version}", "/#{language_code}/#{$last_version}"
          - else
            - if $languages[language_code][:notice]
              %p.last-version-notice= $languages[language_code][:notice]
            - else
              %p.last-version-notice
                The latest version (#{$last_version}) is not yet available in
                this language but
                = link_to "you can read it in English", "/en/#{$last_version}"
                for now and
                = link_to "help translate ", "https://github.com/olivierlacan/keep-a-changelog/issues"
                it.

        = yield

        %footer.footer.clearfix{ role: "banner" }
          = image_tag "keep-a-changelog-mark.svg", width: 30, class: "mark"

          %p.about
            This project is
            = link_to "MIT Licensed", "http://choosealicense.com/licenses/mit/"
            \ //
            = link_to "Created & maintained", "https://github.com/olivierlacan/keep-a-changelog/"
            by
            = link_to "Olivier Lacan", "http://olivierlacan.com/"
            \ //
            Designed by
            = link_to "Tyler Fortune", "http://tylerfortune.me/"

  - unless config.gauges_id.blank?
    :javascript
      var _gauges = _gauges || [];
      (function() {
        var t   = document.createElement('script');
        t.type  = 'text/javascript';
        t.async = true;
        t.id    = 'gauges-tracker';
        t.setAttribute('data-site-id', '#{config.gauges_id}');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
      })();