<div id="dialog-image" title="<%=t("seminar.original_image")%>">

</div>
<%= form_for @seminar_template_setting, url: update_template_setting_admin_seminar_path(@seminar_template_setting), html: {class: "form-horizontal main-forms"} do |f| %>
  <fieldset>
    <%
	  multi_helper = Admin::SeminarsHelper::MultiLang
	  new_record = @seminar.new_record? && @seminar.copy_id.nil?
	%>
	<% content_for :page_specific_css do %>
	  <%= stylesheet_link_tag "lib/main-forms" %>
	  <%= stylesheet_link_tag "lib/fileupload" %>
	  <%= stylesheet_link_tag "lib/main-list" %>
	<% end %>
	<% content_for :page_specific_javascript do %>
	  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
	  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
	  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
	  <%= javascript_include_tag "lib/file-type" %>
	  <%= javascript_include_tag "lib/module-area" %>  
	<% end %>
	<style type="text/css">
	  .col-sm-10.controls{
	    margin-left:0px;
	  }
	  .input-append input{
	    width: 150px;
	  }
	  .img_preview{
	  	width: calc(20% - 2em);
	  	float: left;
	  	padding: 1em;
	  }
	  .image_group{
	  	border: 0.1em solid #666;
	  	margin-bottom: 0.3em;
	  }
	</style>
	<!-- Input Area -->
	<div class="input-area">

	  <!-- Module Tabs -->
	  <div class="nav-name"><strong><%= t(:module) %></strong></div>
	  <ul class="nav nav-pills module-nav">
	  	<li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
	    <li><a href="#menu_setting" data-toggle="tab"><%= t('seminar.menu_setting') %></a></li>
	    <li><a href="#template_setting" data-toggle="tab"><%= t('seminar.template_setting') %></a></li>
	    <li><a href="#home_setting" data-toggle="tab"><%= t('seminar.home_setting') %></a></li>
	  </ul>

	  <!-- Module -->
	  <div class="tab-content module-area">
	  	<!-- Basic -->
	  	<div class="tab-pane fade in active" id="basic">
	  		<!-- Enable custom template -->
		    <div class="control-group">
		        <label class="control-label muted"><%= t("seminar.custom_template") %></label>
		        <div class="controls">
		            <label class="checkbox inline">
		            	<%= radio_button_tag "#{f.object_name}[enable_custom_template]", true , f.object.enable_custom_template == true %>
		            	<%= t("seminar.custom_feature.enable") %>
		            </label>
		        </div>
		        <div class="controls">
		            <label class="checkbox inline">
		            	<%= radio_button_tag "#{f.object_name}[enable_custom_template]", false , f.object.enable_custom_template == false %>
		            	<%= t("seminar.custom_feature.disable") %>
		            </label>
		        </div>
		    </div>
	  	</div>
	    <!-- Menu Setting Module -->
	    <div class="tab-pane fade in" id="menu_setting">
	      <!-- Display menu -->
	      <div class="control-group">
	        <label class="control-label muted"><%= t("seminar.display_menu") %></label>
	        <div class="controls">
	         <% SeminarTemplateSetting::DefaultMenu.each do |menu| %>
	            <label class="checkbox inline">
	            	<%= check_box_tag "#{f.object_name}[display_menu][]", menu, f.object.display_menu.include?(menu) %>
	            	<%= t("seminar.menu.#{menu}") %>
	            </label>
	         <% end %>
	        </div>
	      </div>
	    </div>
	    <!-- Template Setting Module -->
	    <div class="tab-pane fade in " id="template_setting">
	    	<h4><%=t("seminar.background_style")%></h4>
	    	<div>
	    		<% last_idx = SeminarTemplateSetting.background_style_infos.count - 1 %>
	    		<% SeminarTemplateSetting.background_style_infos.each_with_index do |(key,info),i| %>
	    			<%= "<div style=\"clear: both;\">".html_safe if i % 5 == 0 %>
	    			<div class="img_preview">
	    				<a href="#" onclick="open_image_dialog(this)" data-key="<%=key%>" title="<%=t("seminar.click_to_view_original_image")%>">
		    				<img src="<%=info["image"]%>" alt="<%=key%>">
		    			</a>
		    			<label>
		    				<%= radio_button_tag "#{f.object_name}[background_style]", key , f.object.background_style == key %>
		    				<%= key %>
		    			</label>
	    			</div>
	    			<%= "</div>".html_safe if i % 5 == 4 || i == last_idx %>
	    		<% end %>
	    	</div>
	    	<div style="clear: both;"></div>
	    	<h4><%=t("seminar.content_style")%></h4>
	    	<div>
	    		<% last_idx = SeminarTemplateSetting.content_style_infos.count - 1 %>
	    		<% SeminarTemplateSetting.content_style_infos.each_with_index do |(key,info),i| %>
	    			<%= "<div style=\"clear: both;\">".html_safe if i % 5 == 0 %>
	    			<div class="img_preview">
	    				<a href="#" onclick="open_image_dialog(this)" data-key="<%=key%>" title="<%=t("seminar.click_to_view_original_image")%>">
		    				<img src="<%=info["image"]%>" alt="<%=key%>">
		    			</a>
		    			<label>
		    				<%= radio_button_tag "#{f.object_name}[content_style]", key , f.object.content_style == key %>
		    				<%= key %>
		    			</label>
	    			</div>
	    			<%= "</div>".html_safe if i % 5 == 4 || i == last_idx %>
	    		<% end %>
	    	</div>
	    </div>
	    <!-- Template Setting Module -->
	    <div class="tab-pane fade in " id="home_setting">
	    	<!-- Announcement limit -->
		    <div class="control-group">
		        <label class="control-label muted"><%= t("seminar.announcement_limit") %></label>
		        <div class="controls">
			    	<%= f.number_field :announcement_limit,{min: 0,max: 30} %>
		        </div>
		    </div>
		    <!-- Album limit -->
		    <div class="control-group">
		        <label class="control-label muted"><%= t("seminar.album_limit") %></label>
		        <div class="controls">
			    	<%= f.number_field :album_limit,{min: 0,max: 30} %>
		        </div>
		    </div>
	    </div>
	  </div>

	  <!-- Language Tabs -->
	  <div class="nav-name"><strong><%= t(:language) %></strong></div>
	  <ul class="nav nav-pills language-nav">
	    <% @site_in_use_locales.each_with_index do |locale, i| %>
	      <li class="<%= 'active' if i == 0 %>">
	        <a data-toggle="tab" href=".<%= locale %>"><%= t(locale) %></a>
	      </li>
	    <% end %>
	  </ul>

	  <!-- Language -->
	  <div class="tab-content language-area">
	    <% @site_in_use_locales.each_with_index do |locale, i| %>
	    
	      <div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">

	        <!-- Website Title-->
	        <div class="control-group input-title">
	          <label class="control-label muted"><%= t('seminar.website_title') %></label>
	          <div class="controls">
	            <%= f.fields_for :website_title_translations do |f| %>
	              <%= f.text_field locale, class: "input-block-level", placeholder: t('seminar.website_title'), value: (@seminar_template_setting.website_title_translations[locale] rescue nil) %>
	            <% end %>
	          </div>
	        </div>

	        <!-- Introduction -->
	        <!--<div class="control-group input-title">
	          <label class="control-label muted"><%= t('seminar.introduction') %></label>
	          <div class="controls">
	            <%= f.fields_for :introduction_translations do |f| %>
	              <%= f.text_field locale, class: "input-block-level", placeholder: t('seminar.introduction'), value: (@seminar_template_setting.introduction_translations[locale] rescue nil) %>
	            <% end %>
	          </div>
	        </div> -->
	        <!-- Footer info -->
	        <div class="control-group input-title">
	          <label class="control-label muted"><%= t('seminar.footer_info') %></label>
	          <div class="controls">
	            <%= f.fields_for :footer_info_translations do |f| %>
	              <%= f.text_field locale, class: "input-block-level", placeholder: t('seminar.footer_info'), value: (@seminar_template_setting.footer_info_translations[locale] rescue nil) %>
	            <% end %>
	          </div>
	        </div>
	      </div>
	    <% end %>
	  </div>
	  <div class="control-group">
      <label class="control-label muted"><%= t('seminar.upload_banner') %></label>
      <div class="controls">
      	<% if @seminar_template_setting && !@seminar_template_setting.seminar_banner_images.blank? %>
	        <div class="exist">
	          <% @seminar_template_setting.seminar_banner_images.each_with_index do |seminar_banner_image, i| %>
	            <%= f.fields_for :seminar_banner_images, seminar_banner_image do |f| %>
	              <%= render :partial => 'form_image', :object => seminar_banner_image, :locals => {:f => f, :i => i} %>
	            <% end %>
	          <% end %> 
	          <hr>
	        </div>
	      <% end %>
	      <!-- Add -->
	      <div class="add-target">
	      </div>
	      <p class="add-btn controls">
	        <%= hidden_field_tag 'seminar_banner_image_count', @seminar_template_setting.seminar_banner_images.count %>
	        <a id="add_banner_image" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></a>
	      </p>
      </div>
	  </div>
	</div>

	<!-- Form Actions -->
	<div class="form-actions">
	  <%= get_referer_url[:seminarion] rescue "" %>
	  <%= f.submit t('submit'), class: 'btn btn-primary' %>
	  <input type="hidden" name="referer_url" value="<%= get_referer_url %>">
	  <%= link_to t('cancel'), admin_seminars_path, :class=>"btn" %>  
	</div>
    <script>
			function open_image_dialog(self){
				window.image_src = $(self).find("img").attr("src");
				window.image_alt = $(self).data("key");
				$("#dialog-image").html("<img alt=\""+window.image_alt+"\" src=\""+window.image_src+"\">")
		    $( "#dialog-image" ).dialog({
		        resizable: true,
		        modal: true,
		        width: '80%',
		        minHeight: Math.floor($(window).height() * 0.95),
		        open: function(){
		        	$("#dialog-image").html("<img alt=\""+window.image_alt+"\" src=\""+window.image_src+"\">");
		        	$('[role=dialog]').css({top: Math.floor($(window).height() * 0.025),left: Math.floor($(window).width() * 0.1)})
		        },
		        close: function(){$( this ).dialog( "close" );}
		    });
			}
			$(document).on('click', '#add_banner_image', function(){
	      var new_id = $(this).prev().attr('value');
	      var old_id = new RegExp("new_seminar_banner_images", "g");
	      var on = $('.language-nav li.active').index();
	      var le = $(this).parent('.add-btn').prev('.add-target').children('.start-line').length;
	      $(this).prev().attr('value', parseInt(new_id) + 1);
	      $(this).parent().siblings('.add-target').append(("<%= escape_javascript(add_attribute 'form_image', f, :seminar_banner_images) %>").replace(old_id, new_id));
	      $(this).parent('.add-btn').prev('.add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
	        $(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
	      });
	    });
	    $(document).on('click', '.remove_existing_record', function(){
	      if(confirm("<%= I18n.t(:sure?)%>")){
	        $(this).children('.should_destroy').attr('value', 1);
	        $(this).parents('.start-line').hide();
	      }
	    });
	  </script>
	<style type="text/css">
	  .remove_btn{
	    color: red;
	    font-weight: bold;
	    cursor: pointer;
	  }
	</style>
  </fieldset>
<% end %>