<div class="card shadow-sm">
  <div class="card-body">
    <%= errors_summary_for @appearance_release %>
    <%= bootstrap_form_with model: [@account, @project, @contract_template, @appearance_release], local: true, validation_context: :native do |form| %>
      <div class="alert alert-warning font-weight-bold"><%= t ".instructions_html", name: @project.name %></div>
      <%= card_field_set_tag t(".legal.heading") do %>
        <p><%= @contract_template.body %></p>
        <% if @contract_template.fee? %>
          <p>
            Fee <span class="font-weight-bold text-success"><%= number_to_currency @contract_template.fee %></span>
          </p>
        <% end %>
      <% end %>

      <hr>

      <% unless @contract_template.guardian_clause.blank? %>
        <%= 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 %>

        <%= card_field_set_tag t(".guardian_clause.heading") do %>
          <p><%= @contract_template.guardian_clause %></p>
        <% end %>
        <hr>
      <% end %>

      <%= card_field_set_tag t(".personal_info.heading") do %>
        <div class="alert alert-warning font-weight-bold"><%= t ".personal_info.instructions" %></div>
        <div class="form-row">
          <%= form.text_field :person_first_name, required: true, wrapper_class: "col-sm-6" %>
          <%= form.text_field :person_last_name, required: true, wrapper_class: "col-sm-6" %>
          <%= form.phone_field :person_phone, required: true, wrapper_class: "col-sm-6" %>
        </div>
        <div class="form-row">
          <%= form.email_field :person_email, required: true, wrapper_class: "col-sm-6" %>
          <%= form.date_field :person_date_of_birth, required: true, wrapper_class: "col-sm-6", placeholder: Date.current %>
        </div>
        <%= render "shared/address_fields", form: form, subject: "person" %>
      <% end %>

      <%= card_field_set_tag t(".photo.heading") do %>
        <div class="alert alert-warning font-weight-bold"><%= t ".photo.instructions" %></div>
        <div class="text-center">
          <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><%= t ".photo.no_photo" %></span>
            </div>
          </div>
          <div class="d-inline-block text-left">
            <% 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="hidden-file-input">
              <%= 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" }, accept: @appearance_release.class.face_photo_acceptable_content_types.join(","), direct_upload: true %>
            </div>
            <%= button_tag t(".photo.take_photo"), type: "button", class: "btn btn-lg btn-primary take-photo-button", data: { behavior: "take-person-photo" } %>
          </div>
          <p class="p-2 font-weight-bold">
            <%= fa_icon "arrow-up", text: t(".photo.camera_instructions_html") %><br>
            <small class="text-muted"><%= t ".photo.warning" %></small>
          </p>
        </div>
      <% end %>

      <hr>

      <% unless @contract_template.guardian_clause.blank? %>
        <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, required: @appearance_release.minor?, wrapper_class: "col-sm-6" %>
            </div>
            <div class="form-row">
              <%= form.text_field :guardian_email, required: @appearance_release.minor?, wrapper_class: "col-sm-6" %>
            </div>
            <div class="form-row">
              <%= form.text_field :guardian_address, required: @appearance_release.minor?, wrapper_class: "col-sm-6" %>
            </div>
          <% end %>

          <hr>

          <%= card_field_set_tag t(".guardian_photo.heading") do %>
            <div class="alert alert-warning font-weight-bold"><%= t ".guardian_photo.instructions" %></div>
            <div class="text-center">
              <div 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><%= t ".photo.no_photo" %></span>
                </div>
              </div>
              <div class="d-inline-block text-left">
                <% if @appearance_release.guardian_photo.attached? %>
                  <%= javascript_tag nonce: true do %>
                    App.PhotoPreview.set("[data-behavior=guardian-photo-preview]", "<%= url_for(@appearance_release.guardian_photo.variant(auto_orient: true, resize: '200x200')) %>");
                  <% end %>
                <% end %>
                <div class="hidden-file-input">
                  <%= form.hidden_field :guardian_photo, value: form.object.guardian_photo.signed_id if @appearance_release.guardian_photo.attached? %>
                  <%= form.file_field :guardian_photo, required: @appearance_release.minor?, hide_label: true, data: { ujs_target: "guardian-photo-input" }, accept: @appearance_release.class.face_photo_acceptable_content_types.join(","), direct_upload: true %>
                </div>
                <%= button_tag t(".photo.take_photo"), type: "button", class: "btn btn-lg btn-primary take-photo-button", data: { behavior: "take-guardian-photo" } %>
              </div>
              <p class="p-2 font-weight-bold">
                <%= fa_icon "arrow-up", text: t(".photo.camera_instructions_html") %><br>
                <small class="text-muted"><%= t ".photo.warning" %></small>
              </p>
            </div>
          <% end %>

          <hr>

        </div>
      <% end %>

      <%= card_field_set_tag t(".signature.heading") do %>
        <%= render "shared/signature_fields", form: form %>
      <% end %>

      <div class="mt-5">
        <%= form.button t("shared.submit_release_long"), class: "btn btn-block btn-lg btn-success", data: { disable_with: t("shared.disable_with") } %>
      </div>
    <% end %>
  </div>
</div>
