philomena/lib/philomena_web/templates/image/_source.html.heex

<div class="js-sourcesauce">
  <% has_sources = Enum.any?(@image.sources) %>
  <%= form_for @changeset, ~p"/images/#{@image}/sources", [method: "put", class: "hidden", id: "source-form", data: [remote: "true"]], fn f -> %>
    <%= if can?(@conn, :edit_metadata, @image) and !@conn.assigns.current_ban do %>
      <%= if @changeset.action do %>
        <div class="alert alert-danger">
          <p>
            Oops, something went wrong! Please check the errors below.
          </p>
        </div>
      <% end %>
      <p>
        The page(s) you found this image on. Images may have a maximum of
        <span class="js-max-source-count">
          10
        </span>
        source URLs. Leave any sources you don't want to use blank.
      </p>
      <%= inputs_for f, :sources, [as: "image[old_sources]", skip_hidden: true], fn fs -> %>
        <%= hidden_input(fs, :source) %>
      <% end %>
      <%= inputs_for f, :sources, [skip_hidden: true], fn fs -> %>
        <div class="field js-image-source field--inline flex--no-wrap flex--centered">
          <%= text_input(fs, :source, class: "input flex__grow js-source-url", placeholder: "Source URL") %>
          <%= error_tag(fs, :source) %>
          <label class="input--separate-left flex__fixed flex--centered">
            <a class="js-source-remove" href="#">
              <i class="fa fa-trash"></i>
              Delete
            </a>
          </label>
        </div>
      <% end %>
      <div class="field">
        <button class="button js-image-add-source" type="button">
          <i class="fa fa-plus"></i>
          Add source
        </button>
        <%= submit("Save sources", class: "button button--separate-left") %>
        <button class="button button--separate-left" data-click-hide="#source-form" data-click-show="#image-source" type="reset">
          Cancel
        </button>
      </div>
      <%= render(PhilomenaWeb.CaptchaView, "_captcha.html", name: "source", conn: @conn) %>
    <% else %>
      <p>
        You can't edit the source on this image.
      </p>
    <% end %>
  <% end %>
  <div class="block" id="image-source">
    <div class="block__header flex">
      <span class="block__header__title">
        <i class="fas fa-link"></i>
        <%= if !has_sources || length(@image.sources) == 1 do %>
          Source
        <% else %>
          Sources
        <% end %>
      </span>
      <div class="block__header__buttons">
        <a accessKey="s" class="button button--inline" data-click-focus=".js-image-source" data-click-hide="#image-source" data-click-show="#source-form" id="edit-source" title="Edit source">
          <i class="fas fa-edit"></i>
          <%= if has_sources do %>
            Add/Edit
          <% else %>
            Add
          <% end %>
        </a>
        <%= if @source_change_count > 0 do %>
          <a class="button button--link button--inline" href={~p"/images/#{@image}/source_changes"} title="Source history">
            <i class="fa fa-history"></i>
            <spanspan class="hide-mobile">
              History
            </spanspan>
            (
            <%= @source_change_count %>
            )
          </a>
        <% end %>
        <%= if can?(@conn, :hide, @image) and not hide_staff_tools?(@conn) do %>
          <%= form_for @changeset, ~p"/images/#{@image}/source_history", [method: "delete"], fn _f -> %>
            <a class="button button--state-danger button--inline" data-confirm="Are you really, really sure?" title="Wipe sources" type="submit">
              <i class="fas fa-eraser"></i>
              Wipe
            </a>
          <% end %>
        <% end %>
      </div>
    </div>
    <div class="block__content flex flex--wrap flex--column">
      <div class="image_sources">
        <%= if has_sources do %>
          <% [first_source | sources] = @image.sources %>
          <div class="image_source__icon">
            <i class={image_source_icon(first_source.source)}></i>
          </div>
          <div class="image_source__link">
            <a class="js-source-link" href={first_source.source}>
              <strong>
                <%= first_source.source %>
              </strong>
            </a>
          </div>
          <%= for source <- sources do %>
            <div class="image_source__icon">
              <i class={image_source_icon(source.source)}></i>
            </div>
            <div class="image_source__link">
              <a href={source.source}>
                <strong>
                  <%= source.source %>
                </strong>
              </a>
            </div>
          <% end %>
        <% else %>
          <div class="image_source__icon">
            <i class="fa fa-unlink"></i>
          </div>
          <div class="image_source__link">
            <em>
              not provided yet
            </em>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>