<%= errors_summary_for appearance_release %>
<%= bootstrap_form_with model: model, local: true, validation_context: :non_native do |form| %>
  <%= field_set_tag content_tag(:span, t(".person_details.heading"), class: "h6 text-muted text-uppercase") do %>
    <%= form.form_group :minor do %>
      <%= form.check_box :minor, label: t("helpers.label.appearance_release.minor"), data: { target: "[data-ujs-target=guardian-fields]", toggle: "collapse" } %>
    <% end %>

    <div class="form-row">
      <%= form.text_field :person_first_name, required: true, wrapper_class: "col-sm-3" %>
      <%= form.text_field :person_last_name, required: true, wrapper_class: "col-sm-3" %>
      <%= form.phone_field :person_phone, wrapper_class: "col-sm-6" %>
    </div>
    <div class="form-row">
      <%= form.email_field :person_email, wrapper_class: "col-sm-6" %>
      <%= form.date_field :person_date_of_birth, wrapper_class: "col-sm-6", placeholder: Date.current %>
      <%= form.text_field :person_address_street1, wrapper_class: "col-sm-6" %>
    </div>

    <div class="<%= class_string("collapse" => !appearance_release.minor?) %>" data-ujs-target="guardian-fields">
      <%= card_field_set_tag t(".guardian_info.heading") do %>
        <div class="form-row">
          <%= form.text_field :guardian_first_name, required: appearance_release.minor?, wrapper_class: "col-sm-3" %>
          <%= form.text_field :guardian_last_name, required: appearance_release.minor?, wrapper_class: "col-sm-3" %>
          <%= form.phone_field :guardian_phone, wrapper_class: "col-sm-6" %>
          <%= form.text_field :guardian_email, wrapper_class: "col-sm-6" %>
          <%= form.text_field :guardian_address_street1, wrapper_class: "col-sm-6" %>
        </div>
      <% end %>

      <%= card_field_set_tag t(".guardian_2_info.heading") do %>
        <div class="form-row">
          <%= form.text_field :guardian_2_first_name, wrapper_class: "col-sm-3" %>
          <%= form.text_field :guardian_2_last_name, wrapper_class: "col-sm-3" %>
          <%= form.phone_field :guardian_2_phone, wrapper_class: "col-sm-6" %>
          <%= form.text_field :guardian_2_email, wrapper_class: "col-sm-6" %>
          <%= form.text_field :guardian_2_address_street1, wrapper_class: "col-sm-6" %>
        </div>
      <% end %>
    </div>
  <% end %>

  <hr>

  <%= field_set_tag content_tag(:span, t(".contract_and_rights.heading"), class: "h6 text-muted text-uppercase") do %>
    <%= render "shared/contract_fields", form: form, release: appearance_release %>
    <%= render "shared/exploitable_rights_fields", form: form %>
  <% end %>

  <hr>

  <%= field_set_tag content_tag(:span, t(".photos.heading"), class: "h6 text-muted text-uppercase") do %>
    <div class="text-left">
      <p class="<%= class_string("collapse" => !appearance_release.minor?) %>" data-ujs-target="guardian-fields"><%= t(".photos.person_photo.heading") %></p>
      <div class="d-inline-block mb-2" data-behavior="person-photo-preview" data-file-input="[data-ujs-target=person-photo-input]">
        <div class="align-items-center d-flex photo-preview img-thumbnail justify-content-center">
          <span>No photo yet</span>
        </div>
      </div>
      <% if appearance_release.person_photo.attached? %>
        <%= javascript_tag nonce: true do %>
          App.PhotoPreview.set("[data-behavior=person-photo-preview]", "<%= url_for(appearance_release.person_photo.variant(auto_orient: true, resize: '200x200')) %>");
        <% end %>
      <% end %>
      <div class="d-inline-block">
        <%= form.hidden_field :person_photo, value: form.object.person_photo.signed_id if appearance_release.person_photo.attached?%>
        <%= form.file_field :person_photo, hide_label: true, data: { ujs_target: "person-photo-input" }, help: "PNG or JPG only", accept: appearance_release.class.face_photo_acceptable_content_types.join(",") %>
      </div>
    </div>

    <div class="<%= class_string("collapse" => !appearance_release.minor?) %>" data-ujs-target="guardian-fields">
      <div class="text-left">
        <p><%= t(".photos.guardian_photo.heading") %></p>
        <div id='guardian-photo-preview' class="d-inline-block mb-2" data-behavior="guardian-photo-preview" data-file-input="[data-ujs-target=guardian-photo-input]">
          <div class="align-items-center d-flex photo-preview img-thumbnail justify-content-center">
            <span>No photo yet</span>
          </div>
        </div>
        <% if appearance_release.guardian_photo.attached? %>
          <%= javascript_tag nonce: true do %>
            App.PhotoPreview.set("#guardian-photo-preview", "<%= url_for(appearance_release.guardian_photo.variant(auto_orient: true, resize: '200x200')) %>");
          <% end %>
        <% end %>
        <div class="d-inline-block">
          <%= form.hidden_field :guardian_photo, value: form.object.guardian_photo.signed_id if appearance_release.guardian_photo.attached?%>
          <%= form.file_field :guardian_photo, hide_label: true, data: { ujs_target: "guardian-photo-input" }, help: "PNG or JPG only", accept: appearance_release.class.face_photo_acceptable_content_types.join(",") %>
        </div>

        <p><%= t(".photos.guardian_2_photo.heading") %></p>
        <div id='guardian-2-photo-preview' class="d-inline-block mb-2" data-behavior="guardian-photo-preview" data-file-input="[data-ujs-target=guardian-2-photo-input]">
          <div class="align-items-center d-flex photo-preview img-thumbnail justify-content-center">
            <span>No photo yet</span>
          </div>
        </div>
        <% if appearance_release.guardian_2_photo.attached? %>
          <%= javascript_tag nonce: true do %>
            App.PhotoPreview.set("#guardian-2-photo-preview", "<%= url_for(appearance_release.guardian_2_photo.variant(auto_orient: true, resize: '200x200')) %>");
          <% end %>
        <% end %>
        <div class="d-inline-block">
          <%= form.hidden_field :guardian_2_photo, value: form.object.guardian_2_photo.signed_id if appearance_release.guardian_2_photo.attached?%>
          <%= form.file_field :guardian_2_photo, hide_label: true, data: { ujs_target: "guardian-2-photo-input" }, help: "PNG or JPG only", accept: appearance_release.class.face_photo_acceptable_content_types.join(",") %>
        </div>
      </div>
    </div>
  <% end %>

  <div class="row align-items-center text-center mt-4">
    <%= link_to t("shared.cancel"), [appearance_release.project, :appearance_releases], class: "col-3 text-reset" %>
    <div class="col-9">
      <%= form.button id: "submit_release", class: class_string("btn btn-block", ["btn-success", "btn-primary"] => appearance_release.new_record?), data: { disable_with: t("shared.disable_with") } %>
    </div>
  </div>
<% end %>
