gitcoinco/code_fund_ads

<%= simple_form_for image, url: image_path(imageable.to_gid_param, image), html: {class: "js-validate"} do |f| %>
  <div class="row mb-4">
    <div class="col-md-6 mt-2 mb-2">
      <%= render CardComponent.new do %>
        <%= render(Card::HeaderComponent.new) { "Image Settings" } %>
        <%= render Card::BodyComponent.new do %>
          <%= f.input(:name, required: true) %>
          <%= f.input(:description, required: false, as: :text) %>
          <%= f.input(:format, label: "Format", as: :select, collection: image_formats_for_select, hint: "* Image files cannot be replaced", required: true, input_html: {data: {controller: "select"}}) %>
        <% end %>
        <%= render Card::FooterComponent.new do |component| %>
          <% component.with(:actions) do %>
            <%= cancel_button(images_path(imageable.to_gid_param)) %>
            <%= f.submit "Save Image", class: "btn btn-primary" %>
          <% end %>
        <% end %>
      <% end %>
    </div>
    <div class="col-md-6 mt-2 mb-2">
      <%= render CardComponent.new do %>
        <%= render(Card::HeaderComponent.new) { "Image Details" } %>
        <%= render Card::BodyComponent.new do %>
          <div class="d-flex justify-content-center align-items-center" style="min-height:200px">
            <% if image.attachment.blob.svg? %>
              <%= image_tag image.attachment, disposition: "inline", style: "width:400px" %>
            <% else %>
              <%= image_tag image.variant(geometry: "400x400>"), class: "img-thumbnail img-fluid d-block mb-2" %>
            <% end %>
          </div>
        <% end %>
        <%= render Card::FooterComponent.new do %>
          <%= render ListGroupComponent.new(bordered: true, flush: true) do %>
            <%= render(ListGroup::ItemComponent.new(label: "Owner: ")) { link_to imageable.name, imageable } %>
            <%= render(ListGroup::ItemComponent.new(label: "Filename: ")) do %>
              <%= image.filename.to_s %>
              <%= link_to(tag.span("", class: "small fas fa-external-link"), image.image_url, target: "_blank") %>
            <% end %>
            <%= render(ListGroup::ItemComponent.new(label: "Content Type: ")) { image.content_type } %>
            <%= render(ListGroup::ItemComponent.new(label: "Width: ")) { "#{number_with_precision(image.width, precision: 0)}px" } %>
            <%= render(ListGroup::ItemComponent.new(label: "Height: ")) { "#{number_with_precision(image.height, precision: 0)}px" } %>
            <%= render(ListGroup::ItemComponent.new(label: "Checksum: ")) { image.checksum } %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
<% end %>