<div class="card shadow-sm">
  <div class="card-body">
    <%= errors_summary_for @medical_release %>
    <%= bootstrap_form_with model: [@account, @project, @contract_template, @medical_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.medical_release.minor"), data: { behavior: "update-required-status", 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 %>
      
      <% if (1..MedicalRelease::NUMBER_OF_CUSTOM_FIELDS).map {|n| @contract_template.public_send("question_#{n}_text").presence }.compact.any? %>
        <%= card_field_set_tag t(".questionnaire.heading") do %>
          <% (1..MedicalRelease::NUMBER_OF_CUSTOM_FIELDS).each do |n| %>
            <% if @contract_template.public_send("question_#{n}_text").present? %>
              <div class="form-row">
                <%= form.text_area "question_#{n}_answer", required: true, wrapper_class: "col-sm-12", label: @contract_template.public_send("question_#{n}_text") %>
              </div>
            <% end %>
          <% end %>
        <% 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, wrapper_class: "col-sm-6" %>
          <%= form.email_field :person_email, wrapper_class: "col-sm-6" %>
        </div>
        <%= render "shared/address_fields", form: form, subject: "person" %>
      <% end %>

      <hr>

      <%= card_field_set_tag t(".photo.heading") do %>
        <%= render "shared/photos_dropzone_fields", form: form, release: @medical_release %>
      <% end %>

      <% unless @contract_template.guardian_clause.blank? %>
        <div class="<%= class_string("collapse" => !@medical_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: @medical_release.minor?, wrapper_class: "col-sm-3", data: { required_tag: "guardian" } %>
              <%= form.text_field :guardian_last_name, required: @medical_release.minor?, wrapper_class: "col-sm-3", data: { required_tag: "guardian" } %>
              <%= form.phone_field :guardian_phone, required: @medical_release.minor?, wrapper_class: "col-sm-6", data: { required_tag: "guardian" } %>
              <%= form.text_field :guardian_email, required: @medical_release.minor?, wrapper_class: "col-sm-6", data: { required_tag: "guardian" } %>
            </div>
            <%= render "shared/address_fields", form: form, subject: "guardian", required: @medical_release.minor?, data: { required_tag: "guardian" } %>
          <% 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 @medical_release.guardian_photo.attached? %>
                  <%= javascript_tag nonce: true do %>
                    App.PhotoPreview.set("[data-behavior=guardian-photo-preview]", "<%= url_for(@medical_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 @medical_release.guardian_photo.attached? %>
                  <%= form.file_field :guardian_photo, required: @medical_release.minor?, hide_label: true, data: { ujs_target: "guardian-photo-input" }, accept: @medical_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>

          <%= 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" %>
            </div>
            <div class="form-row">
              <%= form.text_field :guardian_2_email, wrapper_class: "col-sm-6" %>
            </div>
            <%= render "shared/address_fields", form: form, subject: "guardian_2" %>
          <% end %>

          <hr>

          <%= card_field_set_tag t(".guardian_2_photo.heading") do %>
            <div class="alert alert-warning font-weight-bold"><%= t ".guardian_2_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-2-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 @medical_release.guardian_2_photo.attached? %>
                  <%= javascript_tag nonce: true do %>
                    App.PhotoPreview.set("[data-behavior=guardian-photo-preview]", "<%= url_for(@medical_release.guardian_2_photo.variant(auto_orient: true, resize: '200x200')) %>");
                  <% end %>
                <% end %>
                <div class="hidden-file-input">
                  <%= form.hidden_field :guardian_2_photo, value: form.object.guardian_2_photo.signed_id if @medical_release.guardian_2_photo.attached? %>
                  <%= form.file_field :guardian_2_photo, hide_label: true, data: { ujs_target: "guardian-2-photo-input" }, accept: @medical_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-2-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, signature_legal_text: @contract_template.signature_legal_text %>
      <% end %>

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