<!DOCTYPE html>
<html>
<head>
<% uiIntroduction    = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>
<% uiProject         = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>
<% uiGuide           = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>
<% uiElements        = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
<% uiCollections     = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
<% uiViews           = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
<% uiModules         = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
<% uiBehavior        = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>
<% uiSpecification   = @getCollection("documents").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>
<% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
<% pageCount         = @pageCount(currentCollection) %>
<% pageNumber        = @getPage(currentCollection, @document.id) %>
<% pageCollection    = @getPageCollection(currentCollection, @document.id) %>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="image_src" type="image/jpeg" href="images/share.png" />

  <!-- Site Properities -->
  <%- @getBlock('meta').toHTML() %>
  <title><%= @getPreparedTitle() %></title>

  <meta name="description" content="<%= @getPreparedDescription() %>" />
  <meta name="keywords" content="<%= @getPreparedKeywords() %>" />

  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>

  <% if 'development' in @getEnvironments(): %>
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/basic.icon.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/icon.css">

  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/button.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/divider.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/header.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/image.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/input.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/label.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/loader.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/reveal.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/progress.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/segment.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/step.css">

  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/collections/breadcrumb.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/collections/form.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/collections/grid.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/collections/menu.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/collections/message.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/collections/table.css">

  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/comment.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/list.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/feed.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/item.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/statistic.css">

  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/modal.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/accordion.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/dropdown.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/popup.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/rating.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/sidebar.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/shape.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/tab.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/checkbox.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/dimmer.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/transition.css">
  <% else: %>
  <link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/css/semantic.min.css">
  <% end %>

  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">

  <% if 'development' in @getEnvironments(): %>
  <script>
  (function () {
    var
      eventSupport = ('querySelector' in document && 'addEventListener' in window)
      jsonSupport  = (typeof JSON !== 'undefined'),
      jQuery       = (eventSupport && jsonSupport)
        ? '/javascript/library/jquery.js'
        : '/javascript/library/jquery.legacy.js'
    ;
    document.write('<script src="' + jQuery + '"><\/script>');
  }());
  </script>
  <% else: %>
  <script>
  (function () {
    var
      eventSupport = ('querySelector' in document && 'addEventListener' in window)
      jsonSupport  = (typeof JSON !== 'undefined'),
      jQuery       = (eventSupport && jsonSupport)
        ? '/javascript/library/jquery.min.js'
        : '/javascript/library/jquery.legacy.min.js'
    ;
    document.write('<script src="' + jQuery + '"><\/script>');
  }());
  </script>
  <% end %>
  <script src="/javascript/library/history.js"></script>
  <script src="/javascript/library/easing.js"></script>
  <script src="/javascript/library/ace/ace.js"></script>
  <script src="/javascript/library/tablesort.js"></script>
  <script src="/javascript/library/waypoints.js"></script>

  <% if 'development' in @getEnvironments(): %>
  <script src="/build/uncompressed/modules/behavior/api.js"></script>
  <script src="/build/uncompressed/modules/behavior/state.js"></script>
  <script src="/build/uncompressed/modules/accordion.js"></script>
  <script src="/build/uncompressed/modules/checkbox.js"></script>
  <script src="/build/uncompressed/modules/dimmer.js"></script>
  <script src="/build/uncompressed/modules/dropdown.js"></script>
  <script src="/build/uncompressed/modules/modal.js"></script>
  <script src="/build/uncompressed/modules/popup.js"></script>
  <script src="/build/uncompressed/modules/rating.js"></script>
  <script src="/build/uncompressed/modules/shape.js"></script>
  <script src="/build/uncompressed/modules/sidebar.js"></script>
  <script src="/build/uncompressed/modules/tab.js"></script>
  <script src="/build/uncompressed/modules/transition.js"></script>
  <% else: %>
  <script src="/build/packaged/javascript/semantic.min.js"></script>
  <% end %>

  <script src="/javascript/semantic.js"></script>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-1', 'semantic-ui.com');
  ga('send', 'pageview');

  </script>
</head>
<body id="example" class="<%= @document.css %>">
  <div class="ui large vertical inverted labeled icon sidebar menu" id="menu">
    <a class="hide item">
      <i class="close icon"></i> Close Menu
    </a>
    <a class="item" href="/build/semantic.zip">
      <i class="inverted circular red awesome download cloud icon"></i> <b>Download</b>
    </a>
    <div class="item">
      <a href="/">
        <b>Introduction</b>
      </a>
      <div class="menu">
        <% for element in uiIntroduction: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <b>Project</b>
      <div class="menu">
        <% for element in uiProject: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <a href="/element.html"><b>Elements</b></a>
      <div class="menu">
        <% for element in uiElements: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <a href="/collection.html"><b>Collections</b></a>
      <div class="menu">
        <% for element in uiCollections: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <b>Views</b>
      <div class="menu">
        <% for element in uiViews: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <a href="/module.html"><b>Modules</b></a>
      <div class="menu">
        <% for element in uiModules: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <b>Behavior</b>
      <div class="menu">
        <% for element in uiBehavior: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
    <div class="item">
      <b>Style Guide</b>
      <div class="menu">
        <% for element in uiGuide: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div>
<!--     <div class="item">
      <b>Specification</b>
      <div class="menu">
        <% for element in uiSpecification: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
        <% end %>
      </div>
    </div> -->
  </div>

  <div class="ui fixed transparent inverted main menu">
    <div class="container">
      <a class="launch item"><i class="icon list layout"></i> Content</a>
      <div class="title item">
        <b><%= @document.type %>:</b> <%= @document.title %>
      </div>
      <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>
      <a class="icon item" href="<%= currentCollection[pageNumber - 2].url %>"><i class="left arrow icon"></i></a>
      <% else: %>
      <div class="disabled icon item"><i class="left arrow icon"></i></div>
      <% end %>
      <div class="section ui dropdown link item">
        <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
        <div class="menu">
          <% for element, index in currentCollection: %>
            <div class="<%= if element.id is @document.id then 'active ' %>item">
              <a href="<%= element.url %>"><%= (index+1) %>. <%= element.title %></a>
            </div>
          <% end %>
        </div>
      </div>
      <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>
      <a class="icon item" href="<%= currentCollection[pageNumber].url %>"><i class="right arrow icon"></i></a>
      <% else: %>
      <div class="disabled icon item"><i class="right arrow icon"></i></div>
      <% end %>
      <div class="right menu">
        <div class="vertically fitted borderless item">
          <iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
  allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
        </div>
        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<!--         <a class="popup overview icon item" data-content="Toggle Definition">
          <i class="book icon"></i>
        </a> -->
        <a class="popup designer icon item" data-content="Designer Mode">
          <i class="basic paint icon"></i>
        </a>
        <a class="popup developer icon item" data-content="Developer Mode">
          <i class="terminal icon"></i>
        </a>
        <% end %>
        <a class="popup icon github item" data-content="View project on Github" href="https://github.com/quirkyinc/semantic">
          <i class="icon github"></i>
        </a>
        <!--
        <div class="ui simple dropdown item">
          <i class="icon tint"></i> Theme
          <div class="theme menu">
            <div class="active item" data-theme="flat">Flat</div>
            <div class="item" data-theme="shaded">Shaded</div>
            <div class="item" data-theme="classic">Classic</div>
          </div>
        </div>
        !-->
      </div>
    </div>
  </div>
    <div class="ui black huge launch right attached button">
      <i class="icon list layout"></i>
      <span class="text">Menu</span>
    </div>
  <%- @content %>
</body>

</html>