SemanSemantic-UItic-UI/server/partials/header.html.eco

<% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
<% @tabs = {  overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>
<div class="<% if @tabs?: %>tab <% end %> header segment">
  <div class="container">
    <div class="introduction">

      <h1 class="ui header">
        <%=@document.title %>
        <% if @document.status?: %><span class="ui label"><%= @document.status %></span><% end %>
      </h1>

      <p><%=@document.description %></p>
      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>
      <div class="ui divider"></div>
      <% end %>
      <% if @document.type is 'UI Module': %>
      <a href="/module.html" class="ui right floated basic labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to trigger."></i>
      </a>
      <% end %>
      <div class="ui right floated basic button floating mode dropdown">
        Change View
        <div class="menu">
          <a class="overview item">
            Definition
          </a>
          <a class="designer item">
            Designer
          </a>
          <a class="developer item">
            Developer
          </a>
        </div>
      </div>
      <% if @document.themes?: %>
      <div class="ui floating dropdown theme basic button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
        <span class="text">Theme</span>
        <div class="menu ui transition hidden">
          <% for id, name of @document.themes: %>
            <div class="item" data-value="<%= name %>"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %></div>
          <% end %><!--
          <div class='divider'></div>
          <div class="header">Create Your Own</div>
          <a class="item" href="#">Submit Theme</a> -->
        </div>
      </div>
      <% end %>
      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
      <div class="ui disabled secondary button">
        Download
      </div>
      <% end %>
    </div>
    <div class="advertisement">
      <% unless 'development' in @getEnvironments(): %>
      <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/51619/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
      <% end %>
    </div>
    <% if @tabs?: %>
    <% index = 0 %>
    <% tabCount = 0 %>
    <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>
    <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>
      <% for id, name of @tabs: %>
        <% tabCount++ %>
      <% end %>
      <div class="<%= numbers[tabCount] %> item tabular ui menu">
        <% for id, name of @tabs: %>
          <a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
          <% index++ %>
        <% end %>
      </div>
      <% index = 0 %>
      <div class="fluid vertical ui menu">
        <% for id, name of @tabs: %>
          <a class="<%= if index == 0 then 'active ' %>item" data-tab="<%= id %>"><%= name %></a>
          <% index++ %>
        <% end %>
      </div>
    <% end %>
  </div>
</div>