<%= javascript_include_tag "jquery.minicolors" %>
<%= stylesheet_link_tag "jquery.minicolors" %>
<style type="text/css">
  .control-group {
    align-items: center;
  }
  .control-group {
    align-items: center;
  }
</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>
<%= form_for @custom_album_setting, url: '/admin/custom_galleries/update_custom_album_setting',:class=>'update_custom_album_setting_form',method: 'post' do |f| %>
  <div class="control-group" style='display: flex;'>
    <label class="control-label muted"><%= t('custom_gallery.custom_album_limit_for_one_page') %></label>
    <%= f.text_field :limit,:placeholder => t('custom_gallery.blank_for_nil') %>
  </div>
  <div class="control-group" style='display: flex;'>
    <label class="control-label muted"><%= t('custom_gallery.thumb_resize_reference') %></label>
    <%= 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 class="control-group" style='display: flex;'>
    <label class="control-label muted"><%= t('custom_gallery.custom_album_card_background_color') %></label>
    <%= f.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>
    <%= f.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>
    
  <%= f.hidden_field :id %>
  <%= f.submit t('submit'),:class=>'btn btn-primary' %>
<% end %>