.block.block__content
  .metabar.flex.flex--wrap.layout--centered id="image_meta_#{@image.id}"
    .metabar__navigation.hidden--phone
      a.js-prev href=Routes.image_navigate_path(@conn, :index, @image, [rel: "prev"] ++ scope(@conn)) title="Previous Image (j)"
        i.fa.fa-chevron-left
      a.js-up href=Routes.image_navigate_path(@conn, :index, @image, [rel: "find"] ++ scope(@conn)) title="Find this image in the global image list (i)"
        i.fa.fa-chevron-up
      a.js-next href=Routes.image_navigate_path(@conn, :index, @image, [rel: "next"] ++ scope(@conn)) title="Next Image (k)"
        i.fa.fa-chevron-right
      a.js-rand href=Routes.image_random_path(@conn, :index, scope(@conn)) title="Random (r)"
        i.fa.fa-random
    .metabar__interactions
      a.interaction--fave href="#" rel="nofollow" data-image-id=@image.id
        span.favorites> title="Favorites" data-image-id=@image.id = @image.faves_count
        span.fave-span title="Fave!"
          i.fa.fa-star
      a.interaction--upvote href="#" rel="nofollow" data-image-id=@image.id
        = if show_vote_counts?(@conn.assigns.current_user) do
          span.upvotes> title="Upvotes" data-image-id=@image.id = @image.upvotes_count
        span.upvote-span title="Yay!"
          i.fa.fa-arrow-up
      span.score data-image-id=@image.id = @image.score
      a.interaction--downvote href="#" rel="nofollow" data-image-id=@image.id
        span.downvote-span title="Neigh!"
          i.fa.fa-arrow-down
        = if show_vote_counts?(@conn.assigns.current_user) do
          span.downvotes< title="Downvotes" data-image-id=@image.id = @image.downvotes_count
      a.interaction--comment.hidden--phone href="#comments" title="Comments"
        i.fa.fa-comments
        span.comments_count< data-image-id=@image.id = @image.comments_count
      a.interaction--hide href="#" rel="nofollow" data-image-id=@image.id
        span.hide-span title="Hide"
          i.fa.fa-eye-slash
    .metabar__interactions.hidden--mobile
      = render PhilomenaWeb.Image.SubscriptionView, "_subscription.html", watching: @watching, image: @image, conn: @conn
      = render PhilomenaWeb.ImageView, "_add_to_gallery_dropdown.html", image: @image, user_galleries: @user_galleries, conn: @conn
      a href=Routes.image_related_path(@conn, :index, @image) title="Related Images"
        i.fa.fa-sitemap>
        span.hidden--mobile Related
    .metabar__mobile-separator
    .metabar__interactions.hidden--phone
      a href="#{pretty_url(@image, false, false)}" rel="nofollow" title="View (tags in filename)"
        i.fa.fa-eye>
        | View
      a href="#{pretty_url(@image, true, false)}" rel="nofollow" title="View (no tags in filename)"
        i.fa.fa-eye>
        | VS
      a href="#{pretty_url(@image, false, true)}" rel="nofollow" title="Download (tags in filename)"
        i.fa.fa-download>
        | Download
      a href="#{pretty_url(@image, true, true)}" title="Download (no tags in filename)"
        i.fa.fa-download>
        | DS
    .metabar__interactions.hidden--desktop.hidden--tablet
      = render PhilomenaWeb.Image.SubscriptionView, "_subscription.html", watching: @watching, image: @image, conn: @conn
      = render PhilomenaWeb.ImageView, "_add_to_gallery_dropdown.html", image: @image, user_galleries: @user_galleries, conn: @conn
      a href=Routes.image_related_path(@conn, :index, @image) title="Related Images"
        i.fa.fa-sitemap
      a href="#{pretty_url(@image, true, false)}" rel="nofollow" title="View (no tags in filename)"
        i.fa.fa-eye
      a href="#{pretty_url(@image, true, true)}" title="Download (no tags in filename)"
        i.fa.fa-download
  .metabar.metabar__user-credit.hidden--phone.layout--centered#extrameta
    div
      ' Uploaded
      => pretty_time(@image.created_at)
      = render PhilomenaWeb.ImageView, "_uploader.html", assigns

    span.image-size
      | &nbsp;
      = @image.image_width
      | x
      = @image.image_height

      = if not is_nil(@image.image_duration) and @image.image_is_animated and @image.image_duration > 0 do
        span.image-size title=@image.image_duration
          | &nbsp;
          - dur = trunc(@image.image_duration)
          - ms = trunc((@image.image_duration - dur)*100)
          - {mm, ss} = {div(dur, 60), rem(dur, 60)}
          = :io_lib.format("~2..0B:~2..0B.~2..0B", [mm, ss, ms])

      =<> String.upcase(to_string(@image.image_format))
      - size_kb = div(@image.image_size, 1000)
      - size_mb = Float.round(size_kb / 1000.0, 2)
      span title="#{size_kb} kB"
        = if size_kb <= 1000 do
          => size_kb
          | kB
        - else
          => size_mb
          | MB