<% content_for :side_bar do %>
	<%= render :partial => 'layouts/side_bar', :locals => {:link_name => t('site.settings'), :link_url => admin_site_site_info_path(@site), :side_bar_content => 'admin/sites/side_bar'} %>
<% end %>

<head>
    <%= stylesheet_link_tag "lib/wrap-nav"%>
    <%= stylesheet_link_tag "lib/filter"%>
    <%= stylesheet_link_tag "lib/code_editor"%>
    <%= stylesheet_link_tag "lib/codemirror/codemirror"%>
    <%= stylesheet_link_tag "lib/codemirror/theme/theme"%>
  
    <%= javascript_include_tag "codemirror/codemirror" %>
    <%= javascript_include_tag "codemirror/jquery.codemirror" %>  
    <%= javascript_include_tag "codemirror/mode/css" %> 
    <%= javascript_include_tag "codemirror/mode/xml" %> 
    <%= javascript_include_tag "codemirror/mode/vbscript" %> 
    <%= javascript_include_tag "codemirror/mode/javascript" %> 
    <%= javascript_include_tag "codemirror/mode/htmlmixed" %> 
    <%= javascript_include_tag "codemirror/addon/edit/closetag" %> 
    <%= javascript_include_tag "codemirror/addon/edit/closebrackets" %> 
    <%= javascript_include_tag "codemirror/util/formatting" %> 
    <%= javascript_include_tag "lib/templates_code" %>   
</head>

        <!-- Main -->
        <h3><%= @design.title %></h3>
        <div class="pull-right btn-group">
          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Theme
            <span class="caret"></span>
          </a>
          <ul id="code-theme" class="dropdown-menu">
            <li><a href="default">Default</a></li>
            <li><a href="ambiance-mobile">Ambiance Mobile</a></li>
            <li><a href="ambiance">Ambiance</a></li>
            <li><a href="blackboard">Blackboard</a></li>
            <li><a href="cobalt">Cobalt</a></li>
            <li><a href="eclipse">Eclipse</a></li>
            <li><a href="elegant">Elegant</a></li>
            <li><a href="erlang-dark">Erlang Dark</a></li>
            <li><a href="midnight">Midnight</a></li>
            <li><a href="monokai">Monokai</a></li>
            <li><a href="neat">Neat</a></li>
            <li><a href="night">Night</a></li>
            <li><a href="rubyblue">Rubyblue</a></li>
            <li><a href="solarized">Solarized</a></li>
            <li><a href="theme">Theme</a></li>
            <li><a href="twilight">Twilight</a></li>
            <li><a href="vibrant-ink">Vibrant Ink</a></li>
            <li><a href="xq-dark">Xq Dark</a></li>
            <li><a href="xq-light">Xq Light</a></li>
          </ul>
        </div>
        <ul id="code-tab" class="nav nav-pills">
          <li class="dropdown active">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">HTML <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="active"><a href="#html_0" data-toggle="tab"><%= @design.layout.name %></a></li>
              <% @design.themes.each do |theme| %>
              <li><a href="#<%= dom_id theme %>" data-toggle="tab"><%= theme.name %></a></li>
              <%end%>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">CSS <b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li class="active"><a href="#html_0" data-toggle="tab"><%= @design.layout.name %></a></li>
              <% @design.themes.each do |theme| %>
              <li><a href="#<%= dom_id theme %>" data-toggle="tab"><%= theme.name %></a></li>
              <%end%>
              <li><a href="#css_0" data-toggle="tab"><%= @design.css_default.name %></a></li>
              <li><a href="#css_1" data-toggle="tab"><%= @design.css_reset.name %></a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Javascript <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <% @design.javascripts.each do |js| %>
               <li><a href="#<%= dom_id js %>" data-toggle="tab"><%= js.name %></a></li>
              <% end %>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
            <ul class="dropdown-menu">
                 <% @design.themes.each do |theme| %>
                   <li><a href="#<%= dom_id theme %>" data-toggle="tab"><%= theme.name %></a></li>
                  <% end %>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Images <b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="#images" data-toggle="tab">Images</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Template Info<b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="#info" data-toggle="tab">Template Info</a></li>
            </ul>
          </li>
        </ul>
        <div id="code-groups" class="tab-content">
          <div class="clearfix tab-pane fade active in" id="html_0">
            <%= render :partial => 'tab_form', :locals => {:type => :layout, :object => @design.layout} %>
          </div>
          <% @design.themes.each do |theme| %>
          <div class="clearfix tab-pane fade active in" id="<%= dom_id theme %>">
           <%= render :partial => 'tab_form', :locals => {:type => :themes, :object => theme} %>
          </div>
          <% end %>
          <div class="clearfix tab-pane fade active in" id="css_0">
            <%= render :partial => 'tab_form', :locals => {:type => :css_default, :object => @design.css_default} %>
          </div>
          <div class="clearfix tab-pane fade active in" id="css_1">
            <%= render :partial => 'tab_form', :locals => {:type => :css_reset, :object => @design.css_reset} %>
          </div>

           <div class="clearfix tab-pane fade active in" id="images">
            <%= render :partial => 'images' %>
           </div>

           <div class="clearfix tab-pane fade active in" id="info">
             <%= render :partial => 'form' %>
           </div>

        <% @design.javascripts.each do |js| %>
          <div class="clearfix tab-pane fade active in" id="<%= dom_id js %>">
            <%= render :partial => 'tab_form', :locals => {:type => :javascripts, :object => js} %>
          </div>
        <% end %>
        </div>