<%= render 'scrapbook/shared/header' %>
<%= form_for @placement do |f| %>
  <%= f.object.errors.keys.join %>

  <%= hint_text 'placements.edit_hint' %>

  <div class="placement-image">
    <%= content_tag :div, class: 'cropper-wrapper' do %>
      <%= image_tag @placement.master.file.url, id: 'cropper-image',
        data: {
          aspect_ratio: @placement.aspect_ratio,
          crop_metrics: @placement.crop_metrics
        } %>
    <% end %>
    <div class="cropper-controls">
      <%= link_to "Maximize", '#', onclick: "maximizeCropbox()",
                  class: 'button hollow' %>
      <% if freehand_cropping? %>
        <%= link_to 'Rotate Box', '#', onclick: 'rotateCropbox()', class: 'button hollow' %>

        <div class='button-group cropper-ratios'>
          <label>
            <%= radio_button_tag 'ratio-button-group', '', true %>
            <%= content_tag :span, 'Free', class: 'button-group-item',
                           onclick: 'unlockCropbox()'  %>
          </label>

          <% free_crop_ratios.each do |crop_ratio| %>
            <label>
              <%= radio_button_tag 'ratio-button-group', '' %>
              <%= content_tag :span, crop_ratio.join('x'), class: 'button-group-item',
                              onclick: "setCropperRatio(#{crop_ratio.join(',')})"  %>
            </label>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>

  <div class="placement-info">
    <%= content_tag :h1, @placement.title %>
    <%= render 'metadata_fields', f: f %>

    <%= f.hidden_field :crop_origin %>
    <%= f.hidden_field :crop_resolution %>
    <%= f.hidden_field :context_name, value: params[:context] %>
    <%= f.hidden_field :scrapbook_master_id %>

    <%= f.submit "Save #{@placement.context.full_title}" %>
  </div>


<% end %>