<div class="card shadow-sm">
  <%= card_header text: t(".heading"), subtext: @releasable.name, close_action_path: [@project, @releasable.model_name.plural] %>
  <div class="card-body">
    <% if @releasable.file_infos.any? %>
      <div class="alert alert-info text-center text-md-left">
        <%= fa_icon "info-circle" %>
        <strong>To Add Photos & Videos to the release: Drag & Drop Files or Click or Tap here to browse media.</strong>
      </div>
    <% end %>
    <div class="alert alert-warning text-center text-md-left">
      <%= fa_icon "warning" %>
      <strong>For optimal accuracy, please ensure video file names and photo file names match the source file name in the editing sequence.</strong>
    </div>
    <%= bootstrap_form_with model: @releasable, url: [@releasable, :file_infos] do |form| %>
      <%= render "shared/file_infos_dropzone", form: form, releasable: @releasable %>

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

