<%= stylesheet_link_tag "jquery.miniColors" %>
<%= stylesheet_link_tag "calendar" %>
<%= stylesheet_link_tag "bootstrap-responsive" %>
<%= javascript_include_tag "jquery.miniColors.min" %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "calendarAPI" %>
<% end %>


<div id="filter" class="subnav">
	<div class="filters">
		<div id="sort_headers" class="table-label">
			<table class="table main-list">	
				<thead>
					<tr>
						<th class="span2"><span class="" title="">Color</span></th>
						<th class="span2">English</th>
						<th class="span2">Chinese</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>
<table id="calendars" class="table main-list">
	<thead>
		<tr>
			<th class="span2"></th>
			<th class="span2"></th>
			<th class="span2"></th>
		</tr>
	</thead>
	<tbody id="calendar_list">
		<%= render :partial => "calendar", :collection => @calendars %>
	</tbody>
</table>

<div id="form">

<%= form_for @calendar, :url => {:action => "create"}, :remote => true do |f| %>
<h2>Add</h2>
	<div class="row-fluid">
		<div class="span2">
		   <%= label_tag("color", t("calendar.color")) %>
		   <%= f.text_field :color, :class => "color-picker miniColors span5", :size => "7", :maxlength => "7", :autocomplete=>"off",:value=>"9100FF" %>
		</div>
	</div>

	<div>
		<%= f.fields_for :name_translations do |name| %>
			<% @site_valid_locales.each_with_index do |locale, i| %>
				<div class="control-group">
					<%= label_tag(locale, t("calendar.name")+"-"+I18nVariable.from_locale(locale)) %>
					<div class="controls">
						<%= name.text_field locale, :class => "input-xxlarge", :size=>"30" %>
					</div>
				</div>
			<% end %>
		<% end %>
	</div>
  <div class="form-actions form-fixed pagination-right">
    <%= f.submit t("calendar.save"), :class=>"btn  btn-primary" %>
  </div>
<% end %>
</div>
<script type="text/javascript">
	var calendar = new calendarAPI()
	calendar.newCalendars();
</script>