h1 Reverse Search

= form_for @changeset, ~p"/search/reverse", [multipart: true, as: :image], fn f ->
  .walloftext
    p
      ' Basic image similarity search. Finds uploaded images similar to the one
      ' provided based on simple intensities and uses the median frame of
      ' animations; very low contrast images (such as sketches) will produce
      ' poor results and, regardless of contrast, results may include seemingly
      ' random images that look very different.

  .image-other
    #js-image-upload-previews
    p Upload a file from your computer, or provide a link to the page containing the image and click Fetch.
    .field
      = file_input f, :image, class: "input js-scraper"
      = error_tag f, :uploaded_image
      = error_tag f, :image_width
      = error_tag f, :image_height
      = error_tag f, :image_mime_type

    .field.field--inline
      = url_input f, :url, name: "url", class: "input input--wide js-scraper", placeholder: "Link a deviantART page, a Tumblr post, or the image directly"
      button.button.button--separate-left#js-scraper-preview(type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch" disabled)
        ' Fetch

    .field-error-js.hidden.js-scraper

  h4 Optional settings

  .field
    = label f, :distance, "Match distance (suggested values: between 0.2 and 0.5)"
    br
    = number_input f, :distance, min: 0, max: 1, step: 0.01, class: "input"
    = error_tag f, :distance

  = error_tag f, :limit

  .field
    = submit "Reverse Search", class: "button"

= cond do
  - is_nil(@images) ->
    / Don't render anything.

  - Enum.any?(@images) ->
    .block#imagelist-container
      section.block__header.page__header.flex
        span.block__header__title.page__title.hide-mobile
          ' Search by uploaded image

    .block__content.js-resizable-media-container
      = for image <- @images do
        = render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: ~p"/images/#{image}", size: :thumb, conn: @conn

    .block__header.block__header--light.page__header.flex
      span.block__header__title.page__info
        = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @images

      .flex__right.page__options
        a href="/settings/edit" title="Display Settings"
          i.fa.fa-cog
          span.hide-mobile.hide-limited-desktop<>
            ' Display Settings

  - true ->
    p
      ' No images found!