<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <%= stylesheet_link_tag "jquery.minicolors" %>
<% 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/modal-preview" %>
  <%= javascript_include_tag "lib/file-type" %>
  <%= javascript_include_tag "jquery.minicolors" %>
<% end %>
<style>
.main-forms fieldset .input-area .module-area {
    padding: 20px;
    overflow: visible;
}
input.minicolors-input{
    height: 2.5em;
    max-width: 90%;
}
</style>
<script type="text/javascript">
  function set_transparent(trigger) {
      var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
      if (trigger.checked){
          color_input_box.attr('data-color',color_input_box.val())
          color_input_box.minicolors('value','transparent')
          color_input_box.prop('disabled',true)
      }
      else{
          color_input_box.minicolors('value',color_input_box.attr('data-color'))
          color_input_box.prop('disabled',false)
      }
  }
  $(document).ready( function() {
      $('.minicolors-input').minicolors({
        defaultValue: '',
        format: 'hex',
        letterCase: 'lowercase',
        position: 'bottom left',
        change: function(value, opacity) {
          if( !value ) return;
          if( opacity ) value += ', ' + opacity;
        },
        theme: 'bootstrap'
      });
      $('.minicolors-input').attr('autocomplete','off')
      $('.minicolors').css('margin','0 10px')
      $('.minicolors').css('height','34px')
      $('*').submit(function () {
        $.each($(this).find('input.minicolors-input'),function(){
          var value = $(this).val();
          if (value == ''){
              $(this).find('input.minicolors-input').val('transparent');
              $(this).find('input.minicolors-input').prop('disabled',false); 
          }
        })
        return true
      })
  });
</script>
   <fieldset>           
            <!-- 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="#tag" data-toggle="tab"><%= t(:tags) %></a>
                </li>
                <li>
                  <a href="#frame_color" data-toggle="tab"><%= t('custom_gallery.recreate_thumb') %></a>
                </li>
              </ul>

              <!-- Module -->
              <div class="tab-content module-area">

                <!-- Basic Module -->
                <div class="tab-pane fade in active" id="basic">

                  <!-- Category -->
                  <div class="control-group">
                    <label class="control-label muted"><%= t(:category) %></label>
                    <div class="controls">
                     <%= select_category(f, @module_app) %>
                    </div>
                  </div>

                </div>
            <!-- Tag Module -->
                <div class="tab-pane fade" id="tag">

                  <!-- Tag -->
                  <div class="control-group">
                    <label class="control-label muted"><%= t(:tags) %></label>
                    <%= select_tags(f, @module_app) %>
                  </div>
                </div>
            <!-- Frame Color Module -->
                <% if @custom_album.custom_album_colors.first.nil? %>
                    <% @custom_album.custom_album_colors.new('color' => 'transparent') %>
                <% end %>
                <%= f.fields_for :custom_album_colors do |custom_album_color_form| %>
                    <div class="tab-pane fade" id="frame_color">
                      <!-- Frame Color -->
                      <div class="control-group" style='display: flex;'>
                        <label class="control-label muted"><%= t('custom_gallery.recreate_thumb') %></label>
                        <%= custom_album_color_form.text_field :color , :class => 'input-block-level minicolors-input' %>
                        <span style='font-size: 20px;display: flex;align-items: center;'>
                        <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
                        <%= t('custom_gallery.transparent') %>
                        </span>
                      </div>
                      <div class="control-group" style='display: flex;'>
                        <label class="control-label muted"><%= t('custom_gallery.custom_album_card_background_color') %></label>
                        <%= custom_album_color_form.text_field :custom_album_card_background_color, :class => 'input-block-level minicolors-input' %>
                        <span style='font-size: 20px;display: flex;align-items: center;'>
                        <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
                        <%= t('custom_gallery.transparent') %>
                        </span>
                      </div>
                      <div class="control-group" style='display: flex;'>
                        <label class="control-label muted"><%= t('custom_gallery.custom_album_card_text_color') %></label>
                        <%= custom_album_color_form.text_field :custom_album_card_text_color, :class => 'input-block-level minicolors-input' %>
                        <span style='font-size: 20px;display: flex;align-items: center;'>
                        <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
                        <%= t('custom_gallery.transparent') %>
                        </span>
                      </div>
                      <div class="control-group">
                        <label class="control-label muted">
                          <%= t('custom_gallery.thumb_resize_reference') %>
                        </label>
                        <div class="controls">
                          <%= f.select :resize_gravity, [["---#{t("default")}: #{t("custom_gallery.gravity.#{CustomAlbumSetting::ResizeGravities[0]}")}---",nil]]+CustomAlbumSetting::ResizeGravities.collect{|v| [t("custom_gallery.gravity.#{v}"),v]} %>
                        </div>
                      </div>
                    </div>
                <% end %>
              </div>
              </div>
              <div class='input-area'>
                  <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 <%= (i == 0 ? 'class=active' : '') %>>
                            <a href=".<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
                          </li>
                       <% end %>
                    </ul>
                    <div class="tab-content language-area">
                  <!-- Language Tabs -->
                   
                     
                        <% @site_in_use_locales.each_with_index do |locale, i| %>
    
                             <div class="tab-pane fade in <%= (i == 0 ? 'active' : '') %> <%= locale %>">
                              <div class="control-group input-title">
                                <%= f.fields_for :name_translations do |name| %>
                                    <%= label_tag(locale, t("custom_gallery.custom_album_name"),:class=>"control-label muted") %>
                                    <div class="controls">
                                       <%= name.text_field locale, :class => "input-block-level", :placeholder=>"#{t(:title)}",:value => (@custom_album.name_translations[locale] rescue nil) %>
                                    </div>
                                 <% end %> 
                              </div>
                              <div class="control-group input-content">
                                 <%= f.fields_for :description_translations do |desc| %>
                                     <%= label_tag(locale, t("custom_gallery.custom_album_desc"), :class=>"control-label muted") %>
                                    <div class="controls">
                                      <div class="textarea">
                                        <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@custom_album.description_translations[locale] rescue nil)%>
                                      </div>
                                    </div>
                                <% end %>
                              </div>
                            </div>
                        <% end %>
                               
                  </div>
                 
                </div>
                <!-- Form Actions -->
                <div class="form-actions">
                  <%= f.submit t("custom_gallery.save"), :class=> "btn btn-primary bt-form-save" %>
                  <%= link_to t('cancel'), admin_custom_galleries_path + (params[:custom_module].blank? ? '' : "/#{params[:custom_module]}#{(params[:bind_uid].blank? ? '' : ('-'+params[:bind_uid]))}"), :class=>"btn" %> 
                  <% if params[:custom_module].present? %>
                    <%= f.hidden_field :custom_module, :value=> params[:custom_module] %>
                    <% if params[:bind_uid].present? %>
                      <%= f.hidden_field :bind_uid, :value=> params[:bind_uid] %>
                    <% end %>
                  <% end %>
                </div>
            </div>
          </fieldset>