- form_class = if @changeset.action, do: "", else: "hidden"
- tags = display_order(@image.tags)
- tag_input = Enum.map_join(tags, ", ", & &1.name)

.js-tagsauce#image_tags_and_source
  .js-imageform class=form_class
    = if can?(@conn, :edit_metadata, @image) and !@conn.assigns.current_ban do

      = if Enum.any?(@image.locked_tags) do
        .block.block--fixed.block--warning
          i.fa.fa-lock>
          ' The following tags have been restricted on this image:
          code= Enum.map_join(@image.locked_tags, ", ", & &1.name)

      = form_for @changeset, ~p"/images/#{@image}/tags", [id: "tags-form", method: "put", data: [remote: "true"]], fn f ->
        = if @changeset.action do
          .alert.alert-danger
            p Oops, something went wrong! Please check the errors below.
            
        = hidden_input f, :old_tag_input, value: tag_input

        .field
          = label f, :tag_input do
            ' Separate tags with commas. Use 'artist:name' tags to identify artists. Got questions? Check the
            a> href="/pages/tags" tag guidelines
            ' or the
            a href="/pages/spoilers" spoiler guidelines
            ' .

          = render PhilomenaWeb.TagView, "_tag_editor.html", f: f, name: :tag_input, type: :edit, extra: [value: tag_input]
          = error_tag f, :tag_input

        = if !@conn.assigns.current_user do
          .block.block--fixed.block--warning
            strong
              em Hang on a sec&hellip;
            br
            ' Make sure you have read and understood our
            a> href="/pages/tags" tagging guidelines
            ' before editing tags.

          = render PhilomenaWeb.CaptchaView, "_captcha.html", name: "tags", conn: @conn

        ul.horizontal-list
          li
            .actions
              = submit "Save tags", class: "button", id: "edit_save_button", data: [disable_with: raw("Saving&hellip;")]
          li
            button.button.js-tag-sauce-toggle data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input"
              ' Cancel

        .block.js-tagtable data-target="[name=&quot;image[tag_input]&quot;]"
          = PhilomenaWeb.TagView.quick_tags(@conn)

    - else
      p
        ' You can't edit the tags on this image.

  .block.tagsauce
    .block__header.flex
      span.block__header__title
        i.fas.fa-tag>
        ' Tags
      .block__header__buttons
        a.button.button--inline.js-tag-sauce-toggle#edit-tags data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input" title="Edit tags" accessKey="t"
          i.fas.fa-edit>
          ' Edit
        = if @tag_change_count > 0 do
          a.button.button--link.button--inline href=~p"/images/#{@image}/tag_changes" title="Tag history"
            i.fa.fa-history>
            | History (
            = @tag_change_count
            | )
    .block__content.block__tagbox
      = render PhilomenaWeb.TagView, "_tag_list.html", tags: tags, conn: @conn
