= semantic_form_for @image_file, :url => admin_image_file_path(:id => @image_file.id, :album_id => params[:album_id], :manager => params[:manager], :multiple => params[:multiple]), :remote => true do |form| 

  .content
  

    #img_view{:data => {:image_file_id => @image_file.id}}
      #principal_img{:style => ("background:no-repeat center center ;background-size:contain;height:400px;background-image:url('"+(@image_file.file.large.url).to_s+"?u="+ @image_file.updated_at.to_s+"');")}
      .left
        =image_tag "/arrow-prev.png"
      .right
        =image_tag "/arrow-next.png"
    .links
      =link_to i(:download), download_admin_image_file_path(@image_file), :target => "_blank"
      =link_to i(:"rotate-left"), rotate_admin_image_file_path(:id => @image_file.id, :direction => "right"), :remote => true
      =link_to i(:"rotate-right"), rotate_admin_image_file_path(@image_file), :remote => true
      =link_to i(:"times"), "#", :onclick => "$('#qi_pane_hover').remove();return false;"

    #bottom_view
      -if @image_file.origin_name?
        %span
          Nom original :
          =@image_file.origin_name
  
      =hidden_field_tag "ids", params[:ids]
    
      -if @ids and @ids.size > 0
        .alert.alert-warning
          Attention ! plusieurs images sont sélectionnées 
          ="(#{@ids.size}),"
          les infos que vous saisissez annuleront et remplaceront celles de TOUTES ces images :
          %p
            =check_box_tag "multiples", true, params[:multiples]
            Infos devant être appliquées à toutes les images ? :
          %p
            =check_box_tag "name", true, params[:name]
            Nom
      
            =check_box_tag "photograph", true, params[:photograph]
            Photographe
            =check_box_tag "description", true, params[:description]
            Description
            =check_box_tag "tags", true, params[:tags]
            Tags
    
      =form.inputs do
      
    
        = form.input :name, :label => "Nom :"
        = form.input :photograph, :label => "Crédits :"
        = form.input :description, :label => "Description :", :input_html => {:style => "height:40px;"}
    
        .tags_form
          %div{:style => "float:right;width:30%"}
            %p
              Chercher des tags à ajouter
     

            =text_field_tag :q, params[:q], :placeholder => "Rechercher un tag :", :onkeyup => "$.ajax({url:'#{search_form_admin_tags_path()}', method: 'get', data : {q: $(this).val(),search_type :'group'}})"

            #results
              -@tags = Tag.joins(:tag_taggables).where(:tag_taggables => {:taggable_id => @ids, :taggable_type => "ImageFile"} ).group(:id)
              =render :partial => "admin/tags/search_form"
            
        
      
          %div{:style => "float:right;width:69%"}
        
            %p Tags de l'image : 
            <input type="hidden" name="image_file[tag_ids][]" id="image_file_tags_none" value="">
    
            %ul#image_tags_in_form
              =render :partial => "admin/tags/tag_form", :collection => form.object.tags.all, :locals => {:form => form}
          
          
  
      .clear
    
    
    
  .actions.submit_tr
    =#link_to "Annuler", admin_image_file_path(:id => @image_file.id, :manager => params[:manager], :multiple => params[:multiple]), :remote => true, :class => "button"
    =form.submit "Sauvegarder", :class => "btn btn-primary"
:coffeescript
  height = $(window).height() - $("#bottom_view").height()
  $("#principal_img").css("min-height",height+"px" )
  
     
:scss
  #qi_pane_hover{ 
    top:0 !important;
    z-index:2000 !important;
    #qi_pane_hover_content{
      height:auto !important;
      max-height:100% !important;
      width:auto !important;
      position:absolute !important;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,0.9) !important;
      color:rgba(255,255,255,0.8);
      .form-group, .tags_form{
        input, textarea{
          background:rgba(255,255,255,0.3);
          color:black;
        }
      }
      .tags_form{
        input{
          border:1px solid white;
          padding:4px 8px;
          border-radius:5px;
        }
      }
      
    }
  }
  
  #img_view{
    position:relative;
    .left, .right{
      text-align:center;
      background:rgba(0,0,0,0.2);
      opacity:0;
      cursor:pointer;
      &:hover{
        display:block;
        opacity:1;
      }
      img{
        height:50px;
        position:absolute;
        top:46%;
      }
      
    }
    .left{

      position:absolute;
      top:0;
      left:0;
      bottom:0;
      width:50%;
    }
    
    .right{

      position:absolute;
      top:0;
      right:0;
      bottom:0;
      width:50%;
    }
    
  }
  .links{
    position:absolute;
    top:10px;
    right:20px;
  }